mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-01-18 10:50:24 +00:00
docs: honing #567
This commit is contained in:
parent
1fea948000
commit
8e2eb1ae73
5 changed files with 32 additions and 32 deletions
|
@ -99,6 +99,7 @@ The `identifier` option is mandatory and equivalent to the string in the first e
|
|||
#### Example Configuration of This Site
|
||||
|
||||
{{< multiconfig file=hugo >}}
|
||||
[params]
|
||||
themeVariant = [
|
||||
{ identifier = "relearn-auto", name = "Relearn Light/Dark", auto = [] },
|
||||
{ identifier = "relearn-light" },
|
||||
|
@ -152,7 +153,7 @@ In case you like a shipped variant but only want to tweak some aspects, you have
|
|||
|
||||
Once a color variant is fully loaded, either initially or by switching the color variant manually with the variant selector, the custom event `themeVariantLoaded` on the `document` will be dispatched. You can add an event listener and react to changes.
|
||||
|
||||
````javascript
|
||||
````javascript {title="JavaScript"}
|
||||
document.addEventListener( 'themeVariantLoaded', function( e ){
|
||||
console.log( e.detail.variant ); // `relearn-light`
|
||||
});
|
||||
|
|
|
@ -12,15 +12,14 @@ For a detailed usage example, see [this page](content/imageeffects).
|
|||
If you don't configure anything in your `hugo.toml`, the image effects default to
|
||||
|
||||
{{< multiconfig >}}
|
||||
[params]
|
||||
[params.imageEffects]
|
||||
border = false
|
||||
lazy = true
|
||||
lightbox = true
|
||||
shadow = false
|
||||
[imageEffects]
|
||||
border = false
|
||||
lazy = true
|
||||
lightbox = true
|
||||
shadow = false
|
||||
{{< /multiconfig >}}
|
||||
|
||||
You can change these settings in your `hugo.toml`
|
||||
{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} You can change these settings in your `hugo.toml`
|
||||
|
||||
{{< multiconfig file=hugo >}}
|
||||
[params]
|
||||
|
@ -32,12 +31,11 @@ You can change these settings in your `hugo.toml`
|
|||
This would result in
|
||||
|
||||
{{< multiconfig >}}
|
||||
[params]
|
||||
[params.imageEffects]
|
||||
border = true
|
||||
lazy = false
|
||||
lightbox = true
|
||||
shadow = false
|
||||
[imageEffects]
|
||||
border = true
|
||||
lazy = false
|
||||
lightbox = true
|
||||
shadow = false
|
||||
{{< /multiconfig >}}
|
||||
|
||||
## Adding Custom Effects
|
||||
|
@ -53,13 +51,12 @@ You can add new effects with boolean values
|
|||
Result:
|
||||
|
||||
{{< multiconfig >}}
|
||||
[params]
|
||||
[params.imageEffects]
|
||||
bg-white = true
|
||||
border = true
|
||||
lazy = false
|
||||
lightbox = true
|
||||
shadow = false
|
||||
[imageEffects]
|
||||
bg-white = true
|
||||
border = true
|
||||
lazy = false
|
||||
lightbox = true
|
||||
shadow = false
|
||||
{{< /multiconfig >}}
|
||||
|
||||
## Styling Custom Effects
|
||||
|
@ -71,13 +68,13 @@ If the effective image effect value is
|
|||
|
||||
### Example
|
||||
|
||||
````markdown
|
||||
````markdown {title="Markdown"}
|
||||
![Minion](https://octodex.github.com/images/minion.png)
|
||||
````
|
||||
|
||||
### Result
|
||||
|
||||
````html
|
||||
````html {title="HTML"}
|
||||
<img src="https://octodex.github.com/images/minion.png" loading="lazy" alt="Minion" class="bg-white border nolazy lightbox noshadow">
|
||||
````
|
||||
|
||||
|
@ -85,11 +82,13 @@ Styles for default image effets are contained in the theme. Add custom styles fo
|
|||
|
||||
In the above example you could add styles for both cases:
|
||||
|
||||
````css
|
||||
````html {title="layouts/partials/content-header.html"}
|
||||
<style>
|
||||
img.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
img.nobg-white {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
````
|
||||
|
|
|
@ -148,16 +148,16 @@ The predefined buttons by the theme (all other buttons besides the _more_ and _t
|
|||
|
||||
Call these from your own redefined area templates if you want to use default button behavior.
|
||||
|
||||
The `_<varying>_` parameter values are different for each button and configured for standard behavior as seen on this page.
|
||||
The _<varying>_ parameter values are different for each button and configured for standard behavior as seen on this page.
|
||||
|
||||
#### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|-----------------------|-------------------|-------------|
|
||||
| **page** | _<empty>_ | Mandatory reference to the page. |
|
||||
| **onwidths** | __<varying>__ | The action that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its given area<br>- `hide`: The button is removed.<br>- `area-XXX`: The button is moved from its given area into the area `XXX`. |
|
||||
| **onwidthm** | __<varying>__ | See above. |
|
||||
| **onwidthl** | __<varying>__ | See above. |
|
||||
| **onwidths** | _<varying>_ | The action that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its given area<br>- `hide`: The button is removed.<br>- `area-XXX`: The button is moved from its given area into the area `XXX`. |
|
||||
| **onwidthm** | _<varying>_ | See above. |
|
||||
| **onwidthl** | _<varying>_ | See above. |
|
||||
|
||||
### Predefined Overlay-Buttons
|
||||
|
||||
|
@ -165,7 +165,7 @@ The predefined buttons by the theme that open an overlay (the _more_ and _toc_ b
|
|||
|
||||
Call these from your own redefined area templates if you want to use default button behavior utilizing overlay functionality.
|
||||
|
||||
The `_<varying>_` parameter values are different for each button and configured for standard behavior as seen on this page.
|
||||
The _<varying>_ parameter values are different for each button and configured for standard behavior as seen on this page.
|
||||
|
||||
#### Parameter
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@ By default, the theme displays a home button between search form and navigation
|
|||
|
||||
If this option isn't set for a specific language, it will use these default values
|
||||
|
||||
{{< multiconfig >}}
|
||||
{{< multiconfig file=hugo >}}
|
||||
[params]
|
||||
landingPageName = "<i class='fa-fw fas fa-home'></i> Home"
|
||||
{{< /multiconfig >}}
|
||||
|
@ -42,7 +42,7 @@ If this option isn't set for a specific language, it will use these default valu
|
|||
|
||||
{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} Turn on `showVisitedLinks=true` to see checkmarks next to visited pages in the main menu. This also adds a `Clear History` option at the bottom of the menu to remove all checkmarks. Note that checkmarks will disappear if you rebuild your site, as the page IDs may change.
|
||||
|
||||
{{< multiconfig >}}
|
||||
{{< multiconfig file=hugo >}}
|
||||
[params]
|
||||
showVisitedLinks = true
|
||||
{{< /multiconfig >}}
|
||||
|
|
|
@ -1 +1 @@
|
|||
6.4.0+8b93d3a3700bd984e4d499f0b87ecfe854524b91
|
||||
6.4.0+7836dc37f8820d8f49c183fc5c7db9e61aec8360
|
Loading…
Reference in a new issue