Update Home
58
Home.md
58
Home.md
@@ -96,4 +96,62 @@ questions:
|
|||||||
points: 0
|
points: 0
|
||||||
---
|
---
|
||||||
This is a great quiz that I'm sure you'll have fun taking. Let me tell you all about it…
|
This is a great quiz that I'm sure you'll have fun taking. Let me tell you all about it…
|
||||||
|
```
|
||||||
|
|
||||||
|
### Settings
|
||||||
|
How to add a settings "plugin," like woo-mode, or weather:
|
||||||
|
|
||||||
|
1. Create a user-facing form control element at `_includes/settings/controllers/myController.njk`, for example:
|
||||||
|
``` nunjucks
|
||||||
|
<form class="siteSettingsToggle" id="birbController">
|
||||||
|
<input type="checkbox" id="birbToggle" {% if metadata.weatherOnByDefault %}checked{% endif %} />
|
||||||
|
<label for="birbToggle">Pet bird (Will refresh page when turned off)</label>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
2. Create the logic for your settings plugin at `_includes/mySetting.njk`, for example:
|
||||||
|
``` nunjucks
|
||||||
|
<!-- Birb -->
|
||||||
|
<script>
|
||||||
|
const showBirb = () => {
|
||||||
|
script = document.createElement('script');
|
||||||
|
script.setAttribute("src", "https://cdn.jsdelivr.net/gh/IdreesInc/Pocket-Bird@main/dist/web/birb.embed.js");
|
||||||
|
document.body.appendChild(script);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hideBirb = () => {
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
const noBirb = () => {
|
||||||
|
console.info("Settings: Not showing birb :[");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- /Birb -->
|
||||||
|
```
|
||||||
|
You will need, at minimum, two functions: one to start the plugin, and one to end it. Four are possible:
|
||||||
|
* start the plugin when it is loaded on a page by default
|
||||||
|
* start the plugin when it is toggled on by the user
|
||||||
|
* stop the plugin when it is off by default and the user has not turned it on
|
||||||
|
* stop the plugin when the user toggles it off
|
||||||
|
3. Add the configuration for your setting in `_includes/settings/settingsConfig.njk`, for example:
|
||||||
|
```nunjucks
|
||||||
|
const petBirbSettings = {
|
||||||
|
handleOnToggle: showBirb,
|
||||||
|
handleOnDefault: showBirb,
|
||||||
|
handleOffToggle: hideBirb,
|
||||||
|
handleOffDefault: noBirb,
|
||||||
|
settingToggle: "birbToggle", // ID of the input created to control the setting
|
||||||
|
preferenceName: "petBirb", // Name to be used in local storage to record the user's preference
|
||||||
|
defaultSetting: false, // Whether the plugin will run by default in absence of a user preference
|
||||||
|
forcedOn: false, // Whether the plugin will ignore user preference and run anyway if on by default
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
4. In the same file, hand off the config object to `settingHandler()` which will handle the starting, stopping, and local storage for your plugin:
|
||||||
|
```nunjucks
|
||||||
|
settingHandler(petBirbSettings);
|
||||||
|
```
|
||||||
|
5. Add your plugin include to `_includes/layouts/base.njk`:
|
||||||
|
```nunjucks
|
||||||
|
{% include "birb.njk" %}
|
||||||
```
|
```
|
||||||
Reference in New Issue
Block a user