diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html index b378805af6..425a793b3e 100644 --- a/layouts/blog/baseof.html +++ b/layouts/blog/baseof.html @@ -19,6 +19,14 @@ {{ partial "taxonomy_terms_clouds.html" . }}
+ {{ if .Page.Params.banner }} + {{ if .Page.Params.banner_file }} + {{ $bannerfile := printf "hooks/%s" $.Page.Params.banner_file }} + {{ partial $bannerfile . }} + {{ else }} + {{ partial "hooks/banner.html" . }} + {{ end }} + {{ end }} {{ with .CurrentSection.OutputFormats.Get "rss" -}} diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 210b6af52a..d11990bb61 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -20,6 +20,14 @@
{{ partial "version-banner.html" . }} + {{ if .Page.Params.banner }} + {{ if .Page.Params.banner_file }} + {{ $bannerfile := printf "hooks/%s" $.Page.Params.banner_file }} + {{ partial $bannerfile . }} + {{ else }} + {{ partial "hooks/banner.html" . }} + {{ end }} + {{ end }} {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }} {{ block "main" . }}{{ end }}
diff --git a/userguide/content/en/docs/adding-content/banners.md b/userguide/content/en/docs/adding-content/banners.md new file mode 100644 index 0000000000..81ef087ec9 --- /dev/null +++ b/userguide/content/en/docs/adding-content/banners.md @@ -0,0 +1,26 @@ +--- +title: "Banners" +date: 2024-02-22 +weight: 12 +description: > + Add a banner above the page content. +--- + +You can add custom banners above the page content of documentation and blog pages. + +To display the banner, you have to: + +1. Create a file in your project called `layouts/partials/hooks/banner.html` +1. Edit the file to add the content of the banner. You can use HTML code, or anything that [Hugo partial templates](https://gohugo.io/templates/partials/) support. For example: + + ```html +
+

This is a simple banner that appears if you set banner to yes in the front matter of the page.

+
+ ``` + +1. Set the `banner` option to `yes` in the front matter of the page you want the banner on. + + To apply the banner to multiple pages, you can also [cascade](https://gohugo.io/content-management/front-matter/#cascade) the `banner` value. + +If you want to use multiple different banners in your docs, you can create multiple separate banner files called `layouts/partials/hooks/`, and set the `banner` option to `yes`, and the `banner_file` option to `` in the front matter to display the specified file as banner. Note that currently only one banner can be displayed on a page: if you have both `banner` and `banner_class` set, only `banner_class` takes effect.