docs: update customization instructions for footer section

This commit is contained in:
Xin 2024-12-26 23:50:11 +00:00
parent 0716533699
commit cf61e606c1

View File

@ -56,7 +56,6 @@ The theme can be further customized by overriding the default styles via the exp
.hextra-footer:is(html[class~="dark"] *) { .hextra-footer:is(html[class~="dark"] *) {
/* Styles will be applied to the footer element in dark mode */ /* Styles will be applied to the footer element in dark mode */
} }
``` ```
The following classes can be used to customize various parts of the theme. The following classes can be used to customize various parts of the theme.
@ -185,28 +184,28 @@ You may add custom scripts to the end of the head for every page by adding the f
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## Custom Footer Section ## Custom Extra Section in Footer
You can add a custom section the footer between the language/theme buttons and the "Copyright"/"Powered By" section by creating a file `layouts/partials/custom/footer.html` in your site. You can add extra section in the footer by creating a file `layouts/partials/custom/footer.html` in your site.
```html {filename="layouts/partials/custom/footer.html"} ```html {filename="layouts/partials/custom/footer.html"}
<!-- Your footer element here --> <!-- Your footer element here -->
``` ```
Available variables in the footer section are: The added section will be added before the copyright section in the footer.
You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content.
- `.switchesVisible`: `true` if the language/theme button(s) are visible above the footer along with a horizontal separator. Hugo variables available in the footer section are: `.switchesVisible` and `.copyrightVisible`.
- `.copyrightVisible`: `true` if the "Copyright" and "Powered By" text are visible at the bottom of the footer.
_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
## Custom Layouts ## Custom Layouts
The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site. The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site. For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site.
For further information, refer to the [Hugo Templates](https://gohugo.io/templates/). For further information, refer to the [Hugo Templates][hugo-template-docs].
## Further Customization ## Further Customization
Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme! Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!
[hugo-template-docs]: https://gohugo.io/templates/