nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 02:40:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

taxonomy: add style and color parameter for tags #671

Browse source
This commit is contained in:
Sören Weber 2023-10-03 22:49:49 +02:00
parent b2e07af42d
commit 93b115b7cb
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/content/cont/taxonomy.en.md
View file

@ -59,5 +59,7 @@ If you define [custom taxonomies](https://gohugo.io/content-management/taxonomie
|-----------------------|-----------------|-------------|
| **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. |
| **class** | _&lt;empty&gt;_ | Additional CSS classes set on the outermost generated HTML element.<br><br>If set to `tags` you will get the visuals for displaying the _tags_ taxonomy, otherwise it will be a simple list of links as for the _categories_ taxonomy. |
| **style** | `primary` | The style scheme used if **class** is `tags`.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used if **class** is `tags`. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **icon** | _&lt;empty&gt;_ | An optional [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the list. |

1
layouts/partials/tags.html
View file

@ -1,4 +1,3 @@
{{- partial "term-list.html" (dict
"page" .
"taxonomy" "tags"

7
layouts/partials/term-list.html
View file

@ -1,6 +1,11 @@
{{- $page := .page }}
{{- $taxonomy := .taxonomy }}
{{- $class := .class }}
{{- $color := .color | default "" }}
{{- $style := .style | default "" }}
{{- if and (not $style) (eq (len $style) 0) }}
{{- $color = .color | default "var(--INTERNAL-TAG-BG-color)" }}
{{- end }}
{{- $icon := .icon | default "" }}
{{- $icon = trim $icon " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
@ -24,7 +29,7 @@
{{- end }}
{{- end }}
{{- with $term_pages }}
<div class=" taxonomy-{{ $taxonomy }} term-list {{ $class }}" title="{{ $taxonomy_page.Title }}">
<div class=" taxonomy-{{ $taxonomy }} term-list cstyle {{ $style }} {{ $class }}" title="{{ $taxonomy_page.Title }}"{{ if $color }}{{ printf " style=\"--VARIABLE-TAGS-BG-color: %s;\"" $color | safeHTMLAttr }}{{ end }}>
{{- if $icon }}
<i class="{{ $icon }}"></i>
{{- end }}

13
static/css/variant.css
View file

@ -372,17 +372,22 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover {
--VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
}
#R-body .tags {
--VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
--VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
}
#R-body .tags a.term-link {
background-color: var(--INTERNAL-TAG-BG-color);
color: var(--INTERNAL-MAIN-BG-color);
background-color: var(--VARIABLE-TAGS-BG-color);
color: var(--VARIABLE-TAGS-color);
}
#R-body .tags a.term-link:before {
border-right-color: var(--INTERNAL-TAG-BG-color);
border-right-color: var(--VARIABLE-TAGS-BG-color);
}
#R-body .tags a.term-link:after {
background-color: var(--INTERNAL-MAIN-BG-color);
background-color: var(--VARIABLE-TAGS-color);
}
.badge > * {