docs: honing #567

This commit is contained in:
Sören Weber 2024-10-07 22:18:49 +02:00
parent 1fea948000
commit 8e2eb1ae73
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 32 additions and 32 deletions

View file

@ -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`
});

View file

@ -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>
````

View file

@ -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 `_&lt;varying&gt;_` parameter values are different for each button and configured for standard behavior as seen on this page.
The _&lt;varying&gt;_ parameter values are different for each button and configured for standard behavior as seen on this page.
#### Parameter
| Name | Default | Notes |
|-----------------------|-------------------|-------------|
| **page** | _&lt;empty&gt;_ | Mandatory reference to the page. |
| **onwidths** | __&lt;varying&gt;__ | 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** | __&lt;varying&gt;__ | See above. |
| **onwidthl** | __&lt;varying&gt;__ | See above. |
| **onwidths** | _&lt;varying&gt;_ | 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** | _&lt;varying&gt;_ | See above. |
| **onwidthl** | _&lt;varying&gt;_ | 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 `_&lt;varying&gt;_` parameter values are different for each button and configured for standard behavior as seen on this page.
The _&lt;varying&gt;_ parameter values are different for each button and configured for standard behavior as seen on this page.
#### Parameter

View file

@ -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 >}}

View file

@ -1 +1 @@
6.4.0+8b93d3a3700bd984e4d499f0b87ecfe854524b91
6.4.0+7836dc37f8820d8f49c183fc5c7db9e61aec8360