diff --git a/exampleSite/content/cont/tags.en.md b/exampleSite/content/cont/tags.en.md new file mode 100644 index 0000000000..02972bb6b4 --- /dev/null +++ b/exampleSite/content/cont/tags.en.md @@ -0,0 +1,39 @@ +--- +date: 2018-11-29T08:41:44+01:00 +title: Tags +weight: 40 +tags: ["documentation", "tutorial"] +--- + +*Learn theme* support one default taxonomy of gohugo: the *tag* feature. + +## Configuration + +Just add tags to any page: + +```markdown +--- +date: 2018-11-29T08:41:44+01:00 +title: Theme tutorial +weight: 15 +tags: ["tutorial", "theme"] +--- +``` + +## Behavior + + +The tags are displayed at the top of the page, in their insertion order. + +Each tag is a link to a *Taxonomy* page displaying all the articles with the given tag. + +## List all the tags + +In the `config.toml` file you can add a shortcut to display all the tags + +```toml +[[menu.shortcuts]] +name = "<i class='fas fa-tags'></i> Tags" +url = "/tags" +weight = 30 +``` \ No newline at end of file diff --git a/exampleSite/content/cont/tags.fr.md b/exampleSite/content/cont/tags.fr.md new file mode 100644 index 0000000000..d19b396c6d --- /dev/null +++ b/exampleSite/content/cont/tags.fr.md @@ -0,0 +1,40 @@ +--- +date: 2018-11-29T08:41:44+01:00 +title: Tags +weight: 40 +tags: ["documentation", "tutorial"] +--- + + +Le *thème Learn* supporte une des taxonomy par défaut de GoHugo : les tags. + +## Configuration + +Il suffit d'ajouter un tableau de tags sur la page : + +```markdown +--- +date: 2018-11-29T08:41:44+01:00 +title: Tutoriel pour le thème +weight: 15 +tags: ["tutoriel", "theme"] +--- +``` + +## Comportement + +Les tags sont affichés en haut de la page, dans l'ordre dans lequel ils ont été saisis. + +Chaque tag est un lien vers une page *Taxonomy*, qui affiche tous les article avec ce tag. + + +## Liste des tags + +Il est possible de rajouter un raccourci dans le fichier `config.toml` afin d'afficher une page listant tous les tags + +```toml +[[menu.shortcuts]] +name = "<i class='fas fa-tags'></i> Tags" +url = "/tags" +weight = 30 +``` \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index d9598ac6e8..e0c466d8d8 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,6 +1,16 @@ {{ partial "header.html" . }} -{{ .Content }} +{{ if eq .Kind "section" }} + {{ .Content }} +{{end}} + +{{ if or (eq .Kind "taxonomy") (eq .Kind "taxonomyTerm") }} +<ul> + {{ range .Pages }} + <li><a href="{{.URL}}">{{.Title}}</a></li> + {{ end }} +</ul> +{{end}} <footer class=" footline" > {{with .Params.LastModifierDisplayName}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ef92973605..c950a3f257 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -80,13 +80,20 @@ </div> </div> {{ end }} - + <div id="head-tags"> + {{ partial "tags.html" . }} + </div> {{ if .Params.chapter }} <div id="chapter"> {{ end }} <div id="body-inner"> {{if and (not .IsHome) (not .Params.chapter) }} - <h1>{{.Title}}</h1> + <h1> + {{ if eq .Kind "taxonomy" }} + {{.Kind}} :: + {{ end }} + {{.Title}} + </h1> {{end}} {{define "breadcrumb"}} @@ -98,3 +105,4 @@ {{.value|safeHTML}} {{end}} {{end}} + diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html new file mode 100644 index 0000000000..48790d87cb --- /dev/null +++ b/layouts/partials/tags.html @@ -0,0 +1,7 @@ +{{ if .Params.tags }} +<div class="tags"> +{{range .Params.tags}} + <a class="tag-link" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> +{{end}} +</div> +{{end}} \ No newline at end of file diff --git a/static/css/tags.css b/static/css/tags.css new file mode 100644 index 0000000000..495d2f9f71 --- /dev/null +++ b/static/css/tags.css @@ -0,0 +1,49 @@ +/* Tags */ + +#head-tags{ + margin-left:1em; + margin-top:1em; +} + +#body .tags a.tag-link { + display: inline-block; + line-height: 2em; + font-size: 0.8em; + position: relative; + margin: 0 16px 8px 0; + padding: 0 10px 0 12px; + background: #8451a1; + + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + color: #fff; +} + +#body .tags a.tag-link:before { + content: ""; + position: absolute; + top:0; + left: -1em; + width: 0; + height: 0; + border-color: transparent #8451a1 transparent transparent; + border-style: solid; + border-width: 1em 1em 1em 0; +} + +#body .tags a.tag-link:after { + content: ""; + position: absolute; + top: 10px; + left: 1px; + width: 5px; + height: 5px; + -webkit-border-radius: 50%; + border-radius: 100%; + background: #fff; +} diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css index dc58214b40..9771ae5e3a 100644 --- a/static/css/theme-blue.css +++ b/static/css/theme-blue.css @@ -102,3 +102,10 @@ a:hover { border-color: var(--MENU-SECTION-HR-color); } +#body .tags a.tag-link { + background-color: var(--MENU-HEADER-BG-color); +} + +#body .tags a.tag-link:before { + border-right-color: var(--MENU-HEADER-BG-color); +} \ No newline at end of file diff --git a/static/css/theme-green.css b/static/css/theme-green.css index 2bbc868149..3b0b1f7215 100644 --- a/static/css/theme-green.css +++ b/static/css/theme-green.css @@ -102,3 +102,10 @@ a:hover { border-color: var(--MENU-SECTION-HR-color); } +#body .tags a.tag-link { + background-color: var(--MENU-HEADER-BG-color); +} + +#body .tags a.tag-link:before { + border-right-color: var(--MENU-HEADER-BG-color); +} \ No newline at end of file diff --git a/static/css/theme-red.css b/static/css/theme-red.css index 8c2401aaae..36c9278e56 100644 --- a/static/css/theme-red.css +++ b/static/css/theme-red.css @@ -102,3 +102,10 @@ a:hover { border-color: var(--MENU-SECTION-HR-color); } +#body .tags a.tag-link { + background-color: var(--MENU-HEADER-BG-color); +} + +#body .tags a.tag-link:before { + border-right-color: var(--MENU-HEADER-BG-color); +} \ No newline at end of file diff --git a/static/css/theme.css b/static/css/theme.css index 0c0818775d..924148d783 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1,4 +1,8 @@ @charset "UTF-8"; + +/* Tags */ +@import "tags.css"; + #top-github-link, #body #breadcrumbs { position: relative; top: 50%;