Merge branch 'master' of https://github.com/pdelaby/hugo-theme-learn into pdelaby-master

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
+```

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
+```

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}}

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}}
+

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}}

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;    
+}

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);
+}

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);
+}

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);
+}

static/css/theme.css

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+
+/* Tags */
+@import "tags.css";
+
 #top-github-link, #body #breadcrumbs {
     position: relative;
     top: 50%;