theme: allow to display tags below article #513

exampleSite/content/basics/customization/_index.en.md

@@ -28,7 +28,8 @@ This theme defines the following partials :
 - `menu-footer.html`: footer of the the left menu
 - `toc.html`: table of contents
 - `content.html`: the content page itself. This can be overridden if you want to display page's meta data above or below the content.
-- `content-footer`: footer below the content, has a default implementation but you can overwrite it if you don't like it.
+- `content-header.html`: header above the title, has a default implementation but you can overwrite it if you don't like it.
+- `content-footer.html`: footer below the content, has a default implementation but you can overwrite it if you don't like it.
 ## Change the logo
 
 Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want.

exampleSite/content/basics/migration/_index.en.md

@@ -26,6 +26,16 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The new parameter `breadcrumbSeparator` is now available in your `config.toml` to change the - well - separator of the breadcrumb items. An appropriate default is in place if you do not configure anything.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} To give you more flexibility in customizing your article layout a new partial `content-header.html` is introduced.
+
+  This came out of the requirement to customize the position of article tags, which by default is displayed above the title. A second requirement was to also show additional [taxonomies](https://gohugo.io/content-management/taxonomies/) not supported by the theme nativly. While Hugo supports tags and categories by default, the theme only displays tags.
+
+  So how does it work starting from the theme's default where tags are only shown above the title?
+
+  1. Hide tags above title: Overwrite `content-header.html` with an empty file.
+  2. Show tags below title: Overwrite `heading-post.html` and add `{{- partial "tags.html" . }}` to it.
+  3. Show tags below article: Overwrite `content-footer.html` and add `{{- partial "tags.html" . }}` to it.
+
 ---
 
 ## 5.13.0 (2023-05-17)

layouts/_default/taxonomy.html

@@ -1,6 +1,8 @@
 {{- partialCached "page-meta.hugo" . .RelPermalink }}
 {{- partial "header.html" . }}
           <article>
+            <header class="headline">
+            </header>
 {{- $page := . }}
 
 {{- $title := i18n .Data.Plural }}

layouts/_default/term.html

@@ -1,6 +1,8 @@
 {{- partialCached "page-meta.hugo" . .RelPermalink }}
 {{- partial "header.html" . }}
           <article>
+            <header class="headline">
+            </header>
 {{- $page := . }}
 
 {{- $title := i18n .Data.Singular }}

layouts/partials/archetypes/chapter/article.html

@@ -2,6 +2,9 @@
 {{- $content := .content }}
 {{- with $page }}
           <article class="chapter">
+            <header class="headline">
+              {{- partial "content-header.html" . }}
+            </header>
 {{ partial "heading-pre.html" . }}<div class="article-subheading">{{ T "Chapter" .Params.Weight }}</div>
 <h1 id="{{ .Title | anchorize }}">{{ .Title }}</h1>{{ partial "heading-post.html" . }}
 

layouts/partials/archetypes/default/article.html

@@ -2,6 +2,9 @@
 {{- $content := .content }}
 {{- with $page }}
           <article class="default">
+            <header class="headline">
+              {{- partial "content-header.html" . }}
+            </header>
 {{ partial "heading-pre.html" . }}<h1 id="{{ .Title | anchorize }}">{{ .Title }}</h1>{{ partial "heading-post.html" . }}
 
 {{ $content | safeHTML }}

layouts/partials/archetypes/deprecated-chapter/article.html

@@ -2,6 +2,9 @@
 {{- $content := .content }}
 {{- with $page }}
           <article class="chapter deprecated">
+            <header class="headline">
+              {{- partial "content-header.html" . }}
+            </header>
 
 {{ $content | safeHTML }}
             <footer class="footline">

layouts/partials/archetypes/deprecated-home/article.html

@@ -2,6 +2,9 @@
 {{- $content := .content }}
 {{- with $page }}
           <article class="home deprecated">
+            <header class="headline">
+              {{- partial "content-header.html" . }}
+            </header>
 
 {{ $content | safeHTML }}
             <footer class="footline">

layouts/partials/archetypes/home/article.html

@@ -2,6 +2,9 @@
 {{- $content := .content }}
 {{- with $page }}
           <article class="home">
+            <header class="headline">
+              {{- partial "content-header.html" . }}
+            </header>
 {{ partial "heading-pre.html" . }}<h1 id="{{ .Title | anchorize }}">{{ .Title }}</h1>{{ partial "heading-post.html" . }}
 
 {{ $content | safeHTML }}

layouts/partials/body.searchpage.html

@@ -1,5 +1,7 @@
 {{- $title := T "Search" }}
           <article class="default">
+            <header class="headline">
+            </header>
             <h1 id="{{ $title | anchorize }}">{{ $title }}</h1>
 
             <form action="javascript:triggerSearch()">
@@ -22,6 +24,5 @@
             </div>
 
             <footer class="footline">
-              {{- partial "content-footer.html" . }}
             </footer>
           </article>

layouts/partials/content-footer.html

@@ -1,6 +1,6 @@
 {{- with .Params.LastModifierDisplayName }}
-            <i class='fas fa-user'></i> {{ with $.Params.LastModifierEmail }}<a href="mailto:{{ . }}">{{ end }}{{ . }}{{ with $.Params.LastModifierEmail }}</a>{{ end }}
+              <i class='fas fa-user'></i> {{ with $.Params.LastModifierEmail }}<a href="mailto:{{ . }}">{{ end }}{{ . }}{{ with $.Params.LastModifierEmail }}</a>{{ end }}
   {{- with $.Date }}
-            <i class='fas fa-calendar'></i> {{ . | time.Format ":date_medium" }}
+              <i class='fas fa-calendar'></i> {{ . | time.Format ":date_medium" }}
   {{- end }}
 {{- end }}

layouts/partials/content-header.html

@@ -0,0 +1 @@
+{{- partial "tags.html" . }}

layouts/partials/header.html

@@ -151,9 +151,6 @@
       {{- $hook := "styleclass" }}
       <main id="body-inner" class="highlightable {{ partialCached "archetype.hugo" (dict "hook" $hook "page" . "parameter" . "outputFormat" $outputFormat) .RelPermalink $outputFormat $hook }}" tabindex="-1">
         <div class="flex-block-wrapper">
-          <div id="head-tags">
-{{- partial "tags.html" . }}
-          </div>
 {{- define "breadcrumb" }}
   {{- $breadcrumb := slice }}
   {{- $page := .page }}

static/css/format-print.css

@@ -110,6 +110,7 @@ body,
     margin-top: 1.5rem;
     padding-top: .75rem;
 }
+#body #body-inner .headline a,
 #body #body-inner .footline a,
 #body #body-inner .btn a {
     text-decoration: none;
@@ -142,7 +143,7 @@ body,
 #body .tab-nav-button:not(.active) {
     opacity: .5;
 }
-#head-tags {
+.tags {
     display: none;
 }
 mark {

static/css/ie.css

@@ -140,9 +140,11 @@
 	html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 		transform: scaleX(1);
 	}
+	.headline i,
 	.footline i{
 		margin-left: .5rem;
 	}
+	.headline i:first-child,
 	.footline i:first-child{
 		margin-left: 0;
 	}

static/css/tags.css

@@ -1,6 +1,6 @@
 /* Tags */
 
-#head-tags{
+.tags{
     margin-left:1rem;
     margin-top:1rem;
 }

static/css/theme.css

@@ -1053,9 +1053,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     margin-top: 2rem;
 }
 
+.headline i,
 .footline i{
     margin-inline-start: .5rem;
 }
+.headline i:first-child,
 .footline i:first-child{
     margin-inline-start: 0;
 }