From 9efcda2fdd411df1102819b39ba4a2f68263e25c Mon Sep 17 00:00:00 2001 From: Attila Greguss Date: Wed, 25 Dec 2024 21:25:47 +0000 Subject: [PATCH] feat: support custom footer section (#518) * Add support for custom footer * amend how the custom footer section is displayed * Add missing class * add missing class * Remove context variable and flag in hugo.yaml * update hugo_stats * Only show footer section for copyright and PoweredBy if they are enabled * Add missing compiled css * Added necessary variables for correct styling of the custom footer in some cases * make padding consistent for copyright section and custom footer * chore: update css * chore: clean up css * docs: update customization instructions * fix: footer padding --------- Co-authored-by: Xin --- .../content/docs/advanced/customization.md | 16 ++++++++++++ exampleSite/hugo_stats.json | 1 + layouts/partials/custom/footer.html | 0 layouts/partials/footer.html | 25 +++++++++++++------ 4 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 layouts/partials/custom/footer.html diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index f9f78a1..0b8afef 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -119,6 +119,7 @@ The following classes can be used to customize various parts of the theme. #### Footer - `hextra-footer` - The footer element +- `hextra-custom-footer` - The custom footer section container #### Search @@ -184,6 +185,21 @@ 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 + +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. + +```html {filename="layouts/partials/custom/footer.html"} + +``` + +Available variables in the footer section are: + +- `.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._ + ## 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. diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 788b37d..ab09e99 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -228,6 +228,7 @@ "hextra-code-block", "hextra-code-copy-btn", "hextra-code-copy-btn-container", + "hextra-custom-footer", "hextra-feature-card", "hextra-feature-grid", "hextra-filetree", diff --git a/layouts/partials/custom/footer.html b/layouts/partials/custom/footer.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8bbb7d8..f11b42d 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,7 @@ {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}} {{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}} +{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}} +{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}} {{- $copyright := (T "copyright") | default "© 2024 Hextra." -}} {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}} @@ -15,7 +17,7 @@ {{- define "theme-credit" -}}