diff --git a/exampleSite/content/cont/tags.en.md b/exampleSite/content/cont/tags.en.md new file mode 100644 index 0000000000..6227dba465 --- /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 the order wich they are enterted. + +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 = " 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 = " Tags" +url = "/tags" +weight = 30 +``` \ 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 068350f8d8..4479aff452 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%; @@ -1127,52 +1131,4 @@ pre .copy-to-clipboard:hover { text-align: left; } -#head-tags{ - margin-left:1em; - margin-top:1em; -} - -#body .tags a.tag-link { - display: inline-block; - height: 2em; - line-height: 2em; - position: relative; - margin: 0 16px 8px 0; - padding: 0 10px 0 12px; - background: #777; - -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; - font-size: 0.8em; -} - -#body .tags a.tag-link:before { - content: ""; - position: absolute; - top:0; - left: -1em; - width: 0; - height: 0; - border-color: transparent #777 transparent transparent; - border-style: solid; - border-width: 1em 1em 1em 0; -} - -#body .tags a.tag-link:after { - content: ""; - position: absolute; - top: 10px; - left: 1px; - float: left; - width: 5px; - height: 5px; - -webkit-border-radius: 50%; - border-radius: 50%; - background: #fff; -} - /*# sourceMappingURL=theme.css.map */