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"] *) {
/* Styles will be applied to the footer element in dark mode */
}
```
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
```
## 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"}
<!-- 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.
- `.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._
Hugo variables available in the footer section are: `.switchesVisible` and `.copyrightVisible`.
## 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.
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
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/