Skip to Content
Last modified by Gregory CAUCHIE on 2026/04/14 10:22
From version 2.2
edited by Jean-Clément AUDUSSEAU
on 2025/03/31 14:57
Change comment: There is no comment for this version
To version 2.7
edited by Jean-Clément AUDUSSEAU
on 2025/03/31 16:25
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -14,10 +14,10 @@
14 14  
15 15  - À définir dans le front-matter du fichier .md (texte indépendant qui n’est pas un extrait du début de l’article)
16 16  
17 -~#~# <title>
17 +~#~# `<title>`
18 18  
19 -- ~{~{ site.Title }} fait référence au titre dans le fichier de configuration hugo.toml (e.g. title = 'Koevoo'). Est utilisé dans le <head> de home.html pour définir le titre du site.
20 -- ~{~{ page.Title}} fait référence au titre des différentes pages et articles pour adapter la balise <title>. Est utilisé dans le <head> de head-blog.html
19 +- `~{~{ site.Title }}` fait référence au titre dans le fichier de configuration hugo.toml (e.g. title = 'Koevoo'). Est utilisé dans le `<head>` de home.html pour définir le titre du site.
20 +- `~{~{ page.Title}}` fait référence au titre des différentes pages et articles pour adapter la balise `<title>`. Est utilisé dans le `<head>` de head-blog.html
21 21  - Utilisé en complément de `pluralizeListTitles = false ; titleCaseStyle = 'firstupper'` définie dans hugo.toml (cf ci-dessous)
22 22  
23 23  ~#~# shortcode et CSS en markdown
... ... @@ -28,28 +28,32 @@
28 28  
29 29  ~#~# backtick
30 30  
31 -- le backtick ` pour insérer du code en markdown est transformé en balise <code> dans le html par HUGO. Une classe CSS est configuré pour un surlignage dans le fichier markdown.css
31 +- le backtick pour insérer du code en markdown est transformé en balise `<code>` dans le html par HUGO. Une classe CSS est configuré pour un surlignage dans le fichier markdown.css
32 32  
33 33  ~#~# Liste à puces
34 34  
35 35  - Dans un article, l’utilisation de markdown pour les listes à puces numérotées (e.i. 1. 2. 3.) va générer des balises `<ol>` par HUGO.\
36 36   Dans le fichier blog.css la règle :
37 -\\ ```
37 +
38 + ```
38 38   ol {
39 39   list-style-position: inside;
40 40   }
41 41   ```
42 -\\ Permet de garder les puces alignées avec le texte.
43 +
44 + Permet de garder les puces alignées avec le texte.
43 43  
44 44  /!\ Nécéssiter d’utiliser le shortcode `{.space}` entre les paragraphes pour ne pas laisser d’espace entre 2 blocs de texte (sans quoi le texte va à la ligne sous le numéro et ne reste pas sur la même ligne).
45 45  
46 46  - La régle :
47 -\\ ```
49 +
50 + ```
48 48   ul {
49 49   list-style: none;
50 50   }
51 51   ```
52 -\\ empêche les autres formes de puces (nécessaire pour ne pas faire apparaître de puces devant les tags qui utilisent aussi des balises `<ul>`).\
55 +
56 + empêche les autres formes de puces (nécessaire pour ne pas faire apparaître de puces devant les tags qui utilisent aussi des balises `<ul>`).\
53 53   Nécessiter de coller une puce manuellement si un visuel de puces autres que des numéros est souhaité.
54 54  
55 55  ~#~# SEO
... ... @@ -56,7 +56,8 @@
56 56  
57 57  - ~*~*minification~*~* : put css and js in folder assets.\
58 58   use this lines in head:
59 -\\ `~{~{ $style := resources.Get "styles.css" | minify | fingerprint }}`\
63 +
64 + `~{~{ $style := resources.Get "styles.css" | minify | fingerprint }}`\
60 60   `<link rel="stylesheet" href="~{~{ $style.Permalink }}">`
61 61  
62 62  with integrity to check if the file is the good one :\
... ... @@ -94,64 +94,81 @@
94 94  
95 95  ~#~# hugo.toml
96 96  
97 - pluralizeListTitles = false
102 +```
103 +pluralizeListTitles = false
98 98   titleCaseStyle = 'firstupper'
99 -
105 +```
100 100  Permet respectivement d’enlever une fonction pas défaut de HUGO qui ajoute un pluriel au titre. Et de n’ajouter une majuscule qu’au 1er mot d’un titre (et non à tous les mots d’un titre par défaut)
101 101  
102 - [markup.goldmark.renderer]
103 - unsafe= true
104 -
108 +```
109 +[markup.goldmark.renderer]
110 + unsafe= true
111 +```
105 105  est utile pour permettre le rendu markdown dans les shortcodes (en utilisant %).
106 106  
107 - [markup.goldmark.parser.attribute]
108 - block = true
109 - title = true
110 -
114 +```
115 +[markup.goldmark.parser.attribute]
116 + block = true
117 + title = true
118 +```
111 111  Pour débloquer la fonction {.class} pour utiliser du css dans le markdown via HUGO.
112 112  
113 - baseURL = 'https:~/~/preprod.koevoo.fr'
114 - [params]
115 - links_url = "https:~/~/preprod.koevoo.fr"
116 -
121 +```
122 +baseURL = 'https:~/~/preprod.koevoo.fr'
123 +[params]
124 + links_url = "https:~/~/preprod.koevoo.fr"
125 +```
117 117  À modifier lors d’un changement d’URL. Le paramètre `links_url` a été créé pour configurer l’adresse correcte d’un article pour partager vers d’autres sites (single.html -> global-share-icons).\
118 118  Ex : `href="~{~{ .Site.Params.links_url | safeURL }}~{~{ .RelPermalink | safeURL }}"`\
119 119  Le paramètre baseURL ne fonctionne pas et renvoie `localhost` (lié à l’utilisation du serveur d’HUGO qui ne prend pas en compte `baseURL` ?).
120 120  Est également utile pour générer les liens dans le template sitemap.xml (/layouts/sitemap.xml).\
121 121  
122 - [sitemap]
123 - filename = 'sitemap_index.xml'
124 -
125 -Permet de renomer le fichier sitemap généré.\
131 +```
132 +[sitemap]
133 + filename = 'sitemap_index.xml'
134 +```
135 +Permet de renommer le fichier sitemap généré.\
126 126  Par défaut fichier sitemap.xml est généré automatiquement par HUGO.
127 127  Pour avoir des URL sans localhost un template a été créé pour remplacer celui par défaut et modifié avec `links_url` (dans /layouts/sitemap.xml).\
128 128  Il est possible de définire des paramètres globalement ou dans un front-matter pour désindexer une page ou changer la priorité d’indexation. (https:~/~/gohugo.io/templates/sitemap/)
129 129  
130 - [params]
131 - noindex_taxonomy = ['tags', 'categories', 'feeds']
132 -
140 +```
141 +[params]
142 + noindex_taxonomy = ['tags', 'categories', 'feeds']
143 +```
133 133  Permet d’exclure les pages générés par hugo non souhaité dans l’indexation. Ce paramètre agit à la fois en enlevant les liens dans le sitemap_index.xml ET en rajoutant une balise `meta` dans le `<head>` des pages concernées.
134 134  
135 - [taxonomies]
136 - tag = 'tags'
137 -
146 +```
147 +[taxonomies]
148 + tag = 'tags'
149 +```
138 138  Permet d’ajouter une taxonomie à HUGO  (à définir dans le front-matter des articles). Si on ne souhaite pas l’indexer, penser à le rajouter dans le noindex_taxonomy.
139 139  
140 140  - Pour activer les mathématiques dans markdown et pouvoir utiliser du texte en indice : https:~/~/gohugo.io/content-management/mathematics/
141 141  
154 +~#~# Date
155 +- Il n’est plus nécessaire d’écrire la date à la main. Hugo a maintenant une fonction pour l’écrire dans la bonne langue (en fonction de la langue de l’article).
156 +```
157 +# dans le front-matter généré par défaut (archetypes/default.md)
158 + datemanual = "~{~{ .Date | time.Format ":date\_full" }}"
159 +```
160 +Où :
161 +- `.Date` : est la date généré automatiquement par HUGO lors de la création de l’article
162 +- `| time.Format ":date\_full" }}` : transforme la date avec le format désiré (court ou long) et dans la bonne langue automatiquement (si nécessaire).
163 +
142 142  ~#~# URL and links
143 143  
144 -- Lorsqu’il s’agit de lien interne au site, il vaut mieux utiliser .RelPermalink (ou ~{~{ texte | relURL }} ; qui vont fournir des URL relatives) que .Permalink pour que le site puisse changer d’url sans revoir tout le code.\
166 +- Lorsqu’il s’agit de lien interne au site, il vaut mieux utiliser .RelPermalink (ou `~{~{ texte | relURL }}` ; qui vont fournir des URL relatives) que .Permalink pour que le site puisse changer d’url sans revoir tout le code.\
145 145   .Permalink va prendre l’url complète (absolute URL).\
146 146   .RelPermalink va prendre le chemin de l’url (et complèter automatiquement avec le nom de domaine, quel que soit le nom de domaine déployé).
147 147  - utiliser relURL si on doit l’ajouter à du texte avant. Utiliser .RelPermalink pour utiliser l’adresse relative toute seule. Idem avec absURL et .Permalink (?)
170 +- Il est possible de modifier l’url d’une page avec `url = " "` dans le front-matter (par exemple pour avoir une url dans la langue désirée).
148 148  
149 149  ~#~# search bar
150 150  
151 151  - utilisation de [pagefind](https:~/~/pagefind.app) et de ce [site](https:~/~/www.brycewray.com/posts/2022/07/pagefind-quite-find-site-search/#update-2022-07-31) (pour un lancement dans le dossier static et avoir le résultat du code en temps réel).
152 -- rajouter "[data-pagefind-body](https:~/~/pagefind.app/docs/indexing/#limiting-what-sections-of-a-page-are-indexed)" autour de "~{~{ .Content }}" dans single.html pour ne lister les articles (et pas la main page blog).
175 +- rajouter "[data-pagefind-body](https:~/~/pagefind.app/docs/indexing/#limiting-what-sections-of-a-page-are-indexed)" autour de `~{~{ .Content }}` dans single.html pour ne lister les articles (et pas la main page blog).
153 153  - pour customiser pagefind : https:~/~/pagefind.app/docs/ui-usage/#customising-the-styles. Vérifier le style lors d’une mise à jour.
154 -- Initialiser la barre de recherche du blog avec docker : todo !
155 155  
156 156  ~#~# Formulaire de contact HUGO
157 157  
... ... @@ -179,13 +179,24 @@
179 179  
180 180  ~#~#~#~# Autres possibilités de formulaires :
181 181  - https:~/~/ktarila.com/blog/1-contact-forms-for-static-generated-sites/
182 - - https:~/~/www.pierremorsa.com/post/2017-11-13-ajouter-formulaire-hugo/
183 - - https:~/~/medium.com/@irishgeoff22/crafting-a-contact-form-using-the-hugo-static-website-generator-d043e5c2ca88
184 - - https:~/~/discourse.gohugo.io/t/sending-emails/3739
185 - - https:~/~/discourse.gohugo.io/t/is-it-possible-to-add-a-contact-form-to-a-site/1550/24
204 +- https:~/~/www.pierremorsa.com/post/2017-11-13-ajouter-formulaire-hugo/
205 +- https:~/~/medium.com/@irishgeoff22/crafting-a-contact-form-using-the-hugo-static-website-generator-d043e5c2ca88
206 +- https:~/~/discourse.gohugo.io/t/sending-emails/3739
207 +- https:~/~/discourse.gohugo.io/t/is-it-possible-to-add-a-contact-form-to-a-site/1550/24
186 186  
209 +~#~# Internationalisation (i18n)
210 +
211 +- Le paramètre `~{~{  .Lang }}` permet de récupérer la langue actuelle du navigateur : utile pour que les liens du site reste dans la même langue au fur et à mesure de la navigation !
212 +- Le dossier i18n permet de traduire des mots ou phrase spécifique en déterminant des fichiers attribués à chaque langue (e.i : en.toml et fr.toml). Un mot clef donne la traduction demandé (e.i : dans le fichier fr.toml : `lireArticle = "Lire l’article"` ; dans le fichier en.toml : `lireArticle = "Read more"`).
213 +- HUGO reconnaît automatiquement les abrévations de langue (en, fr, de, es…). Il est possible de créer des fichiers reconnu et utilisé dans la bonne langue en les enregistrants ainsi : `home.fr.html` ; `home.en.html` ; `article.en.md` ; `article.fr.md`…
214 +- Il y a un ordre à respecter dans le fichier hugo.toml pour que les langues soient prises en compte (?). Dans les premières lignes sous baseURL.
215 +```
216 +baseURL = 'https:~/~/www.koevoo.tech'
217 +defaultContentLanguage = 'fr'
218 +defaultContentLanguageInSubdir = true
219 +title = 'Koevoo'
220 +```
221 +
187 187  ~#~# Trucs en plus pour HUGO
188 188  
189 189  - https:~/~/www.pierremorsa.com/post/2016-08-16-quelques-trucs-en-plus-pour-votre-site-hugo/
190 -
191 -