mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-01-18 10:50:24 +00:00
Sören Weber
parent
15fc7e62b9
commit
d8c353b1a5
19 changed files with 58 additions and 39 deletions
|
|
@ -45,7 +45,7 @@ The Relearn theme is an enhanced fork of the popular [Learn theme](https://githu
|
|||
- **Enhanced Markdown Features**
|
||||
- [GitHub Flavored Markdown (GFM) support](https://mcshelby.github.io/hugo-theme-relearn/content/markdown)
|
||||
- [Support for Obsidian callouts](https://mcshelby.github.io/hugo-theme-relearn/content/markdown#obsidian-callouts)
|
||||
- [Advanced image manipulation like lightbox, sizing, shadows, borders, and alignment](https://mcshelby.github.io/hugo-theme-relearn/content/imageeffects)
|
||||
- [Advanced image manipulation like lightbox, sizing, shadows, borders, and alignment](https://mcshelby.github.io/hugo-theme-relearn/configuration/modifications/imageeffects)
|
||||
|
||||
- **Rich Shortcode Library**
|
||||
- [Customizable marker badges](https://mcshelby.github.io/hugo-theme-relearn/shortcodes/badge)
|
||||
|
|
|
|||
|
|
@ -115,7 +115,9 @@ themeVariant = [
|
|||
]
|
||||
{{< /multiconfig >}}
|
||||
|
||||
## Modify Shipped Variants
|
||||
## Advanced Variant Topics
|
||||
|
||||
### Modify Shipped Variants
|
||||
|
||||
In case you like a shipped variant but only want to tweak some aspects, you have some choices. **Don't edit the file in the theme's directory!** You will loose the ability to later easily upgrade your theme to a newer version.
|
||||
|
||||
|
|
@ -148,7 +150,17 @@ In case you like a shipped variant but only want to tweak some aspects, you have
|
|||
|
||||
In comparison to _copy and change_, this has the advantage that you profit from any adjustments to the `relearn-light` variant but keep your modifications.
|
||||
|
||||
## Syntax Highlighting
|
||||
### React to Variant Switches in JavaScript
|
||||
|
||||
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
|
||||
document.addEventListener( 'themeVariantLoaded', function( e ){
|
||||
console.log( e.detail.variant ); // `relearn-light`
|
||||
});
|
||||
````
|
||||
|
||||
## Change Syntax Highlighting
|
||||
|
||||
If you want to switch the syntax highlighting theme together with your color variant, first you need to configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css) to provide a syntax highlighting stylesheet file
|
||||
|
||||
|
|
@ -171,6 +183,13 @@ The file must be written to `assets/css/chroma-<NAME>.css`. To use it with your
|
|||
}
|
||||
````
|
||||
|
||||
## Change 3rd-Party Libraries Theming
|
||||
|
||||
Some of the shipped shortcodes are using 3rd-party libraries. See the individual shortcode documentation on how to do this:
|
||||
|
||||
- [`mermaid` shortcode](shortcodes/mermaid#setting-a-specific-mermaid-theme)
|
||||
- [`openapi` shortcode](shortcodes/openapi#setting-a-specific-swagger-ui-theme)
|
||||
|
||||
## Change the Favicon
|
||||
|
||||
If your favicon is a SVG, PNG or ICO, just drop your image in your site's `static/images/` directory and name it `favicon.svg`, `favicon.png` or `favicon.ico` respectively.
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
+++
|
||||
description = "Add 3rd-party dependencies to your site"
|
||||
title = "Extending Client Code"
|
||||
weight = 3
|
||||
description = "Add further code to your site"
|
||||
title = "Extending HTML"
|
||||
weight = 2
|
||||
+++
|
||||
|
||||
One of the most commonly asked questions is, how to add additional CSS styles or JavaScript.
|
||||
|
||||
This depends on your use case.
|
||||
|
||||
## Adding JavaScript or Stylesheets Unconditionally
|
||||
|
||||
If you simply want to add additional JavaScript files or CSS stylesheets on every page of your site, you can do so by either adding them in your `layouts/partials/custom-header.html` or `layouts/partials/custom-footer.html` partial.
|
||||
|
||||
Sometimes this just bloats up your site when only in a few cases those files are really needed. See the [next section](#own-shortcodes-with-javascript-dependencies), on how to conditionally add those dependencies.
|
||||
Sometimes this just bloats up your site when only in a few cases those files are really needed. See the [next section](#own-shortcodes-with-dependencies), on how to conditionally add such dependencies.
|
||||
|
||||
## Own Shortcodes with JavaScript Dependencies
|
||||
## Own Shortcodes with Dependencies
|
||||
|
||||
Certain shortcodes make use of additional dependencies like JavaScript and CSS files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files.
|
||||
|
||||
|
|
@ -56,13 +60,3 @@ If you are really into customization of the theme and want to use the dependency
|
|||
````
|
||||
|
||||
{{% /notice %}}
|
||||
|
||||
## React to Variant Switches in JavaScript
|
||||
|
||||
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
|
||||
document.addEventListener( 'themeVariantLoaded', function( e ){
|
||||
console.log( e.detail.variant ); // `relearn-light`
|
||||
});
|
||||
````
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
+++
|
||||
description = "Add 3rd-party dependencies to your site"
|
||||
title = "Extending Client Code"
|
||||
weight = 3
|
||||
description = "Add further code to your site"
|
||||
title = "Extending HTML"
|
||||
weight = 2
|
||||
+++
|
||||
{{< piratify >}}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
+++
|
||||
title = "Image Effects"
|
||||
weight = 4
|
||||
description = "How to extend image effects"
|
||||
title = "Custom Image Effects"
|
||||
weight = 3
|
||||
+++
|
||||
|
||||
The theme supports non-standard [image effects](content/markdown#image-effects).
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
+++
|
||||
description = "How to extend image effects"
|
||||
title = "Custom Image Effects"
|
||||
weight = 3
|
||||
+++
|
||||
{{< piratify >}}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
description = "Adding Custom Output Formats"
|
||||
title = "Custom Output Formats"
|
||||
weight = 4
|
||||
weight = 5
|
||||
+++
|
||||
|
||||
Besides the `print` output format supoorted by the theme, you can write your own [output formats](https://gohugo.io/templates/output-formats/).
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
+++
|
||||
description = "Adding Custom Output Formats"
|
||||
title = "Custom Output Formats"
|
||||
weight = 4
|
||||
weight = 5
|
||||
+++
|
||||
{{< piratify >}}
|
||||
|
|
@ -3,7 +3,7 @@ categories = ["taxonomy", "content"]
|
|||
description = "How to display custom taxonomies on your pages"
|
||||
tags = "tutorial"
|
||||
title = "Custom Taxonomies"
|
||||
weight = 5
|
||||
weight = 6
|
||||
+++
|
||||
|
||||
This page shows you how customize your templates to display custom taxonomies on your pages.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ categories = ["taxonomy", "content"]
|
|||
description = "How to display custom taxonomies on your pages"
|
||||
tags = "tutorrrial"
|
||||
title = "Custom Taxonomies"
|
||||
weight = 5
|
||||
weight = 6
|
||||
+++
|
||||
{{< piratify >}}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
description = "How to extend the topbar"
|
||||
options = ["editURL"]
|
||||
title = "Custom Topbar"
|
||||
weight = 2
|
||||
weight = 4
|
||||
+++
|
||||
|
||||
The theme comes with a reasonably configured topbar. You can learn how to [configure the defaults in this section](configuration/appearance/topbar).
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
+++
|
||||
description = "How to extend the topbar"
|
||||
title = "Custom Topbarrr"
|
||||
weight = 2
|
||||
weight = 4
|
||||
+++
|
||||
{{< piratify >}}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
+++
|
||||
title = "Image Effects"
|
||||
weight = 4
|
||||
+++
|
||||
{{< piratify >}}
|
||||
|
|
@ -722,7 +722,7 @@ Images can also be linked by reference ID to later define the URL location. This
|
|||
|
||||
### Image Effects
|
||||
|
||||
{{% badge color="#7dc903" icon="fa-fw fas fa-puzzle-piece" %}}Relearn{{% /badge %}} This theme allows additional non-standard formatting by setting query parameter at the end of the image URL. The default [behavior is configurable](content/imageeffects) through your `hugo.toml` or frontmatter parameter.
|
||||
{{% badge color="#7dc903" icon="fa-fw fas fa-puzzle-piece" %}}Relearn{{% /badge %}} This theme allows additional non-standard formatting by setting query parameter at the end of the image URL. The default [behavior is configurable](configuration/modifications/imageeffects) through your `hugo.toml` or frontmatter parameter.
|
||||
|
||||
#### Resizing
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ weight = -19
|
|||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has added two new color variants `zen-light` and `zen-dark`. Check it out!
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now [dispatches the custom event](configuration/modifications/dependencies/#react-to-variant-switches-in-javascript) `themeVariantLoaded` on the `document` when the variant is fully loaded either initially or by switching the variant manually with the variant selector.
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now [dispatches the custom event](configuration/appearance/branding/#react-to-variant-switches-in-javascript) `themeVariantLoaded` on the `document` when the variant is fully loaded either initially or by switching the variant manually with the variant selector.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 10.3.1. This adds support for the [sankey diagram type](shortcodes/mermaid#sankey) and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ weight = -20
|
|||
|
||||
For existing variants nothing has changed visually.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The default values for the [image effects](content/markdown#image-effects) are [now configurable](content/imageeffects) for your whole site via `hugo.toml` or for each page through frontmatter.
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The default values for the [image effects](content/markdown#image-effects) are [now configurable](configuration/modifications/imageeffects) for your whole site via `hugo.toml` or for each page through frontmatter.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} This release fixes a long-standing bug where Mermaid graphs could not be displayed if they were initially hidden - like in collapsed `expand` or inactive `tabs`.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ weight = -26
|
|||
|
||||
### New
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The lazy loading of images is now configurable by using the new `lazy` [image effect](content/imageeffects). The default value hasn't changed in comparison to older versions, you don't need to change anything.
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The lazy loading of images is now configurable by using the new `lazy` [image effect](configuration/modifications/imageeffects). The default value hasn't changed in comparison to older versions, you don't need to change anything.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to [adjust the max width of the main area](configuration/content/width/), eg. in case you want to use the full page width for your content.
|
||||
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ Set `disableHoverBlockCopyToClipBoard=true` to disable the hover effect and alwa
|
|||
|
||||
### Setting a Specific Color Scheme
|
||||
|
||||
You can configure the color style used for code blocks in your [color variants stylesheet](configuration/appearance/branding#syntax-highlighting) file using the `--CODE-theme` variable. This requires further configuration as described in the above link.
|
||||
You can configure the color style used for code blocks in your [color variants stylesheet](configuration/appearance/branding#change-syntax-highlighting) file using the `--CODE-theme` variable. This requires further configuration as described in the above link.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,10 @@ customOpenapiURL = "https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"
|
|||
|
||||
You can force loading the Swagger UI library if no shortcode or codefence was used by setting `openapi.force=true`. If a shortcode or codefence was found, the option has no effect. This comes handy in case you are using scripting to render a spec.
|
||||
|
||||
### Setting a Specific Swagger UI Theme
|
||||
|
||||
The recommended way to configure your Swagger UI theme is to set the default value using the `--OPENAPI-theme` variable in your [color variant stylesheet](configuration/appearance/generator/). This allows your specs to look pretty when the user switches the color variant.
|
||||
|
||||
## Example
|
||||
|
||||
### Using Local File
|
||||
|
|
|
|||
Loading…
Reference in a new issue