docs: variant migration #831

This commit is contained in:
Sören Weber 2024-04-19 00:53:23 +02:00
parent 26724fba2c
commit 2ab97e91e4
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 27 additions and 11 deletions

View file

@ -24,9 +24,9 @@ Set the `themeVariant` value to the name of your theme file. That's it! Your sit
{{< /multiconfig >}}
{{% notice note %}}
Your theme variant file must reside in your site's `static/css` directory or in the theme's `static/css` directory and the file name must start with `theme-` and end wit `.css`. In the above example, the path of your theme file must be `static/css/theme-relearn-light.css`.
Your theme variant file must reside in your site's `assets/css` directory and the file name must start with `theme-` and end in `.css`. In the above example, the path of your theme file must be `assets/css/theme-relearn-light.css`.
If you want to make changes to a shipped color variant, create a copy in your site's `static/css` directory. Don't edit the file in the theme's directory!
If you want to make changes to a shipped color variant, create a copy in your site's `assets/css` directory. Don't edit the file in the theme's directory!
{{% /notice %}}
### Multiple Variants
@ -92,9 +92,9 @@ The size of the logo will adapt automatically.
If you want to switch the syntax highlighting theme together with your color variant, you need to configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/) and provide a syntax highlighting stylesheet file.
You can use a one of the shipped stylesheet files or use Hugo to generate a file for you. The file must be written to `static/css/chroma-<NAME>.css`. To use it with your color variant you have to define `--CODE-theme: <NAME>` in the color variant stylesheet file.
You can use a one of the shipped stylesheet files or use Hugo to generate a file for you. The file must be written to `assets/css/chroma-<NAME>.css`. To use it with your color variant you have to define `--CODE-theme: <NAME>` in the color variant stylesheet file.
For an example, take a look into [`theme-relearn-light.css`](https://github.com/McShelby/hugo-theme-relearn/blob/main/static/css/theme-relearn-light.css) and [`hugo.toml`](https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/hugo.toml) of the exampleSite.
For an example, take a look into [`theme-relearn-light.css`](https://github.com/McShelby/hugo-theme-relearn/blob/main/assets/css/theme-relearn-light.css) and [`hugo.toml`](https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/hugo.toml) of the exampleSite.
## Change the Variant (Advanced) {#theme-variant-advanced}
@ -125,7 +125,7 @@ The `identifier` option is mandatory and equivalent to the string in the first e
| Name | Default | Notes |
|-----------------------|-----------------|-------------|
| identifier | _&lt;empty&gt;_ | Must correspond to the name of a color variant either in your site's or the theme's directory in the form `static/css/theme-<IDENTIFIER>.css`. |
| identifier | _&lt;empty&gt;_ | Must correspond to the name of a color variant either in your site's or the theme's directory in the form `assets/css/theme-<IDENTIFIER>.css`. |
| name | see notes | The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form. |
| auto | _&lt;empty&gt;_ | If set, the variant is treated as an [auto mode variant](#adjust-to-os-settings). It has the same behavior as the `themeVariantAuto` option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options. |
@ -159,15 +159,15 @@ In case you like a shipped variant but only want to tweak some aspects, you have
1. Copy and change
You can copy the shipped variant file from the theme's `static/css` directory to the site's `static/css` directory and either store it with the same name or give it a new name. Edit the settings and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.
You can copy the shipped variant file from the theme's `assets/css` directory to the site's `assets/css` directory and either store it with the same name or give it a new name. Edit the settings and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.
2. Create and import
You can create a new variant file in the site's `static/css` directory and give it a new name. Import the shipped variant, add the settings you want to change and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.
You can create a new variant file in the site's `assets/css` directory and give it a new name. Import the shipped variant, add the settings you want to change and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.
For example, you want to use the `relearn-light` variant but want to change the syntax highlighting schema to the one used in the `neon` variant. For that, create a new `static/css/theme-my-branding.css` in your site's directory and add the following lines:
For example, you want to use the `relearn-light` variant but want to change the syntax highlighting schema to the one used in the `neon` variant. For that, create a new `assets/css/theme-my-branding.css` in your site's directory and add the following lines:
````css {title="static/css/theme-my-branding.css"}
````css {title="assets/css/theme-my-branding.css"}
@import "theme-relearn-light.css";
:root {

View file

@ -18,9 +18,11 @@ To better understand this select the `neon` variant and modify the different hea
Once you've changed a color, the variant selector will show a "My custom variant" entry and your changes are stored in the browser. You can **browse to other pages** and even close the browser **without losing your changes**.
Once you are satisfied, you can download the new variants file and copy it into your site's `static/css` directory. Afterwards you have to adjust the `themeVariant` parameter in your `hugo.toml` to your chosen file name.
Once you are satisfied, you can download the new variants file and copy it into your site's `assets/css` directory. Afterwards you have to adjust the `themeVariant` parameter in your `hugo.toml` to your chosen file name.
Eg. if your new variants file is named `theme-my-custom-variant.css`, you have to set `themeVariant='my-custom-variant'` to use it.
See the docs for [further configuration options](basics/branding)
{{% /expand %}}
{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}}

View file

@ -18,7 +18,21 @@ This document shows you what's new in the latest release and flags it with one o
---
## 5.28.0.beta (XXXX-XX-XX) {#5280}
## 6.0.0.beta (XXXX-XX-XX) {#600}
- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} This release requires you to move your self-defined variant (`theme-*.css`) and chroma stylesheets (`chroma-*.css`) from `static/css` to `assets/css`.
This was necessary to avoid permission errors on build if running in certain Unix configurations.
In addition it is not allowed anymore to `@import` your chroma stylesheet from inside of your variant stylesheet.
Say, your chroma stylesheet is named `chroma-monokai.css`, you have to add the following inside your variant stylesheet:
````css
--CODE-theme: monokai;
````
- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} Support for Internet Explorer 11 was finally dropped.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Translation into Romanian.