From 15959fe60dd3aeb4902201eca7d7384470e6cb2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Tue, 3 Oct 2023 13:20:20 +0200 Subject: [PATCH] taxonomy: modularize term list generation #671 --- .../content/basics/migration/_index.en.md | 6 +++ exampleSite/content/cont/taxonomy.en.md | 21 ++++++++++ layouts/partials/content-footer.html | 16 +++----- layouts/partials/tags.html | 17 +++------ layouts/partials/term-list.html | 38 +++++++++++++++++++ static/css/format-print.css | 2 +- static/css/ie.css | 6 +-- static/css/tags.css | 16 +++++--- static/css/theme.css | 12 +++++- static/css/variant.css | 6 +-- 10 files changed, 103 insertions(+), 37 deletions(-) create mode 100644 layouts/partials/term-list.html diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 080daf25e0..3f42ff26d4 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -18,6 +18,12 @@ This document shows you what's new in the latest release. For a detailed list of --- +## 5.23.0 (2023-10-03) {#5230} + +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to print custom taxonomies anywhere in you page. [See the docs]({{% relref "cont/taxonomy#customization" %}}). + +--- + ## 5.22.0 (2023-10-02) {#5220} - {{% badge style="note" title=" " %}}Change{{% /badge %}} This release fixes an issue where in unfortunate conditions DOM ids generated by Hugo may collide with DOM ids set by the theme. To avoid this, all theme DOM ids are now prefixed with `R-`. diff --git a/exampleSite/content/cont/taxonomy.en.md b/exampleSite/content/cont/taxonomy.en.md index 7cdd6beeab..c00f00eba2 100644 --- a/exampleSite/content/cont/taxonomy.en.md +++ b/exampleSite/content/cont/taxonomy.en.md @@ -40,3 +40,24 @@ url = "/tags" name = " Categories" url = "/categories" ``` + +## Customization + +If you define [custom taxonomies](https://gohugo.io/content-management/taxonomies/#configure-taxonomies) and want to display a list of them somewhere on your page (often in the `layouts/partials/content-footer.html`) you can call a partial that does the job for you: + +````markdown +{{- partial "term-list.html" (dict + "page" . + "taxonomy" "categories" + "icon" "list" +) }} +```` + +### Parameter + +| Name | Default | Notes | +|-----------------------|-----------------|-------------| +| **page** | _<empty>_ | Mandatory reference to the page. | +| **taxonomy** | _<empty>_ | The plural name of the taxonomy to display as used in your frontmatter. | +| **class** | _<empty>_ | Additional CSS classes set on the outermost generated HTML element. | +| **icon** | _<empty>_ | An optional [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the list. | diff --git a/layouts/partials/content-footer.html b/layouts/partials/content-footer.html index 84a20d7551..a2b3dd4417 100644 --- a/layouts/partials/content-footer.html +++ b/layouts/partials/content-footer.html @@ -4,14 +4,8 @@ {{ . | time.Format ":date_medium" }} {{- end }} {{- end }} -{{- $page := . }} -{{- if .Params.categories }} - - {{- $terms := slice | append .Params.categories }} - {{- range $idx, $term := sort $terms }} - {{- with ($page.Site.GetPage (printf "%s%s" ("/categories/" | relURL) ($term | plainify | anchorize)) | default ($page.Site.GetPage (printf "%s%s" ("/categories/" | relURL) ($term | urlize)))) }} - {{- $to := . }} - {{ if gt $idx 0 }} | {{ end }}{{ $term }} - {{- end }} - {{- end }} -{{- end }} +{{- partial "term-list.html" (dict + "page" . + "taxonomy" "categories" + "icon" "list" +) }} \ No newline at end of file diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html index 5eb004d719..a46a3856c8 100644 --- a/layouts/partials/tags.html +++ b/layouts/partials/tags.html @@ -1,13 +1,6 @@ -{{- $page := . }} -{{- if .Params.tags }} -
- {{- $terms := slice | append .Params.tags }} - {{- range $term := sort $terms }} - {{- with ($page.Site.GetPage (printf "%s%s" ("/tags/" | relURL) ($term | plainify | anchorize)) | default ($page.Site.GetPage (printf "%s%s" ("/tags/" | relURL) ($term | urlize)))) }} - {{- $to := . }} - {{ $term }} - {{- end }} - {{- end }} -
-{{- end }} \ No newline at end of file +{{- partial "term-list.html" (dict + "page" . + "taxonomy" "tags" + "class" "tags" +) }} \ No newline at end of file diff --git a/layouts/partials/term-list.html b/layouts/partials/term-list.html new file mode 100644 index 0000000000..2726552df9 --- /dev/null +++ b/layouts/partials/term-list.html @@ -0,0 +1,38 @@ +{{- $page := .page }} +{{- $taxonomy := .taxonomy }} +{{- $class := .class }} +{{- $icon := .icon | default "" }} +{{- $icon = trim $icon " " }} +{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} + {{- $icon = printf "fa-fw fas fa-%s" $icon }} +{{- end }} +{{- $taxonomy_page := $page.Site.GetPage $taxonomy }} +{{- $terms := slice | append (index $page.Params $taxonomy) }} +{{- $term_pages := dict }} +{{- range sort $terms }} + {{- $term := trim . " " }} + {{- if not $term }} + {{- continue }} + {{- end }} + {{- $term_key := ($term | plainify | anchorize) }} + {{- with $page.Site.GetPage (printf "%s/%s" $taxonomy $term_key) }} + {{- $term_pages = $term_pages | merge (dict $term_key .) }} + {{- end }} + {{- $term_key = ($term | urlize) }} + {{- with $page.Site.GetPage (printf "%s/%s" $taxonomy $term_key) }} + {{- $term_pages = $term_pages | merge (dict $term_key .) }} + {{- end }} +{{- end }} +{{- with $term_pages }} +
+ {{- if $icon }} + + {{- end }} + +
+{{- end }} \ No newline at end of file diff --git a/static/css/format-print.css b/static/css/format-print.css index e0128c8327..38caa3d9b8 100644 --- a/static/css/format-print.css +++ b/static/css/format-print.css @@ -138,7 +138,7 @@ h1 + .footline{ #R-body .topbar-sidebar-divider { border-width: 0; } -.tags { +.term-list { display: none; } mark { diff --git a/static/css/ie.css b/static/css/ie.css index 351b24c4b7..80bf42136b 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -711,17 +711,17 @@ color: rgba( 74, 74, 74, 1 ); /* var(--MAIN-TITLES-TEXT-color) */ } - #R-body .tags a.tag-link { + #R-body .tags a.term-link { background-color: rgba( 125, 201, 3, 1 ); /* var(--TAG-BG-color) */ color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ margin-right: 16px; } - #R-body .tags a.tag-link:before { + #R-body .tags a.term-link:before { border-right-color: rgba( 125, 201, 3, 1 ); /* var(--TAG-BG-color) */ } - #R-body .tags a.tag-link:after { + #R-body .tags a.term-link:after { background: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ } diff --git a/static/css/tags.css b/static/css/tags.css index 0b5ee92c78..5eba2aa6c9 100644 --- a/static/css/tags.css +++ b/static/css/tags.css @@ -1,11 +1,15 @@ /* Tags */ .tags{ - margin-left:1rem; - margin-top:1rem; + margin-left: 1rem; + margin-top: 1rem; } -#R-body .tags a.tag-link { +.tags.term-list li ~ li:before { + content: none +} + +#R-body .tags a.term-link { border-bottom-right-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 1px 2px rgba( 0, 0, 0, .2 ); @@ -19,7 +23,7 @@ position: relative; } -#R-body .tags a.tag-link:before { +#R-body .tags a.term-link:before { border-color: transparent; border-style: solid; border-width: 1em 1em 1em 0; @@ -31,7 +35,7 @@ width: 0; } -#R-body .tags a.tag-link:after { +#R-body .tags a.term-link:after { border-radius: 100%; content: ""; left: 1px; @@ -41,6 +45,6 @@ width: 5px; } -#R-body .tags a.tag-link:hover:after { +#R-body .tags a.term-link:hover:after { width: 5px; } diff --git a/static/css/theme.css b/static/css/theme.css index e09fc349e1..ca34e85281 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -2188,4 +2188,14 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right #R-topics { padding-top: 1rem; -} \ No newline at end of file +} + +.term-list ul, +.term-list li { + list-style: none; + display: inline; + padding: 0; +} +.term-list li ~ li:before { + content: " | " +} diff --git a/static/css/variant.css b/static/css/variant.css index 12c619af81..722518ed4e 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -372,16 +372,16 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover { --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color); } -#R-body .tags a.tag-link { +#R-body .tags a.term-link { background-color: var(--INTERNAL-TAG-BG-color); color: var(--INTERNAL-MAIN-BG-color); } -#R-body .tags a.tag-link:before { +#R-body .tags a.term-link:before { border-right-color: var(--INTERNAL-TAG-BG-color); } -#R-body .tags a.tag-link:after { +#R-body .tags a.term-link:after { background-color: var(--INTERNAL-MAIN-BG-color); }