mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-30 03:03:09 +00:00
Add documentation an theme variants
This commit is contained in:
Delaby Pierre
parent
a75b1a0ce1
commit
5f53dfaa15
7 changed files with 153 additions and 48 deletions
39
exampleSite/content/cont/tags.en.md
Normal file
39
exampleSite/content/cont/tags.en.md
Normal file
|
|
@ -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 = "<i class='fas fa-tags'></i> Tags"
|
||||
url = "/tags"
|
||||
weight = 30
|
||||
```
|
||||
40
exampleSite/content/cont/tags.fr.md
Normal file
40
exampleSite/content/cont/tags.fr.md
Normal file
|
|
@ -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
|
||||
```
|
||||
49
static/css/tags.css
Normal file
49
static/css/tags.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Reference in a new issue