Wiki source code of Koevoo's Home

Version 2.7 by Jean-Clément AUDUSSEAU on 2025/03/31 16:25

version	line-number	content
2.1	1	# Notes HUGO
1.1	2
2.1	3	~#~# Images
1.1	4
2.1	5	intégrer image css "background: url()" plutôt que src dans le html
1.1	6
2.1	7	- plus facile pour le responsive
	8	- mieux pour le seo.
	9	- meilleur gestion de la taille avec center/cover (?) (actuellement il faut que les images soient en 400x250 px). Pour ça utiliser url() et afficher les images depuis le css plutôt que depuis le html via src (?).
	10	- avec l’utilisation du shortcode par défaut figure `~{~{< figure src="/mon-image.jpg" link="https:~/~/koevoo.tech" alt="" width=100% >}}`\
	11	L’option `title=""` ne crée pas la balise `<title>` dans le html, mais rajoute un titre h4 comme légende à la photo.
1.1	12
2.1	13	~#~# Summary
1.8	14
2.1	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)
1.1	16
2.7	17	~#~# `<title>`
1.1	18
2.7	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
2.1	21	- Utilisé en complément de `pluralizeListTitles = false ; titleCaseStyle = 'firstupper'` définie dans hugo.toml (cf ci-dessous)
1.1	22
2.1	23	~#~# shortcode et CSS en markdown
1.1	24
2.1	25	- https:~/~/gohugo.io/templates/shortcode/
	26	- Défini dans le readme
	27	- Se trouve dans le dossier /shortcodes
1.1	28
2.1	29	~#~# backtick
	30
2.7	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
2.1	32
	33	~#~# Liste à puces
	34
	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	Dans le fichier blog.css la règle :
2.7	37
	38	```
2.1	39	ol {
	40	list-style-position: inside;
	41	}
	42	```
2.7	43
	44	Permet de garder les puces alignées avec le texte.
2.1	45
	46	/!\ 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).
	47
	48	- La régle :
2.7	49
	50	```
2.1	51	ul {
	52	list-style: none;
	53	}
	54	```
2.7	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>`).\
2.1	57	Nécessiter de coller une puce manuellement si un visuel de puces autres que des numéros est souhaité.
	58
	59	~#~# SEO
	60
	61	- ~~minification~~ : put css and js in folder assets.\
	62	use this lines in head:
2.7	63
	64	`~{~{ $style := resources.Get "styles.css" \| minify \| fingerprint }}`\
2.1	65	`<link rel="stylesheet" href="~{~{ $style.Permalink }}">`
	66
	67	with integrity to check if the file is the good one :\
	68	ex:
	69
	70	`~{~{ $script := resources.Get "js/main.js" \| minify \| fingerprint }}`\
	71	`<script src="~{~{ $script.Permalink }}" integrity="~{~{ $script.Data.Integrity }}"></script>`
	72
	73	(source : https:~/~/hugo-mini-course.netlify.app/sections/optimizing/css/#minify)
	74
	75	```
	76	In case of HUGO not recognize "assets" folder for default css an js (work fine in "static" folder) :
	77
	78	2 answers for this function (not bug) :
	79	- Assets can be used in pipes, static can’t. So you best put files that need some kind of modification in assets: CSS you want to be fingerprinted and minimized, for example. static is for resources that are … static. Like images and fonts.
	80	- files in static are always pulled on a build, where assets only when needed/requested by the code/function/module/shortcode etc. You may have 10 versions of a file in assets and call for 1 only in code, then folder on the build website will serve only 1 file (links to 9 others will results in file not found). When you got 10 versions of a file in static on the build you will have all 10 files served (accessible).
	81
	82	links :
	83	https:~/~/discourse.gohugo.io/t/difference-between-asset-and-static-folder/41203
	84	https:~/~/discourse.gohugo.io/t/are-assets-and-static-folders-interchangeable/36778/2
	85	The HUGO documentation for this :
	86	https:~/~/gohugo.io/hugo-pipes/introduction
	87
	88	[RESOLVE] : It works with the use of minify for call css/js, when you put css and js in respective folder in assets folder (but you need to reconstruct website each time you modify files. It useful for developpement to keep css/js in static folder).
	89	```
	90
	91	- ~~robots.txt~~
	92	set enableRobotsTXT = true in hugo.toml
	93
	94	- ~~sitemap.xml~~ : automatiquement généré par HUGO : https:~/~/gohugo.io/templates/sitemap/ (voir la configuration du fichier hugo.toml ci-dessous: [sitemap])
	95
	96	- ~~Meta Tags~~ : todo (?) with link : https:~/~/hugo-mini-course.netlify.app/sections/optimizing/seo/ ; création d’une balise meta pour exclure des pages (tags) de l’indexation des moteurs de recherche (cf : hugo.toml ci-dessous).
	97
	98	- ~~how to compress image~~ : https:~/~/hugo-mini-course.netlify.app/sections/optimizing/images/
	99
	100	~#~# hugo.toml
	101
2.7	102	```
	103	pluralizeListTitles = false
2.1	104	titleCaseStyle = 'firstupper'
2.7	105	```
2.1	106	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)
	107
2.7	108	```
	109	[markup.goldmark.renderer]
	110	unsafe= true
	111	```
2.1	112	est utile pour permettre le rendu markdown dans les shortcodes (en utilisant %).
	113
2.7	114	```
	115	[markup.goldmark.parser.attribute]
	116	block = true
	117	title = true
	118	```
2.1	119	Pour débloquer la fonction {.class} pour utiliser du css dans le markdown via HUGO.
	120
2.7	121	```
	122	baseURL = 'https:~/~/preprod.koevoo.fr'
	123	[params]
	124	links_url = "https:~/~/preprod.koevoo.fr"
	125	```
2.1	126	À 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).\
	127	Ex : `href="~{~{ .Site.Params.links_url \| safeURL }}~{~{ .RelPermalink \| safeURL }}"`\
	128	Le paramètre baseURL ne fonctionne pas et renvoie `localhost` (lié à l’utilisation du serveur d’HUGO qui ne prend pas en compte `baseURL` ?).
	129	Est également utile pour générer les liens dans le template sitemap.xml (/layouts/sitemap.xml).\
	130
2.7	131	```
	132	[sitemap]
	133	filename = 'sitemap_index.xml'
	134	```
	135	Permet de renommer le fichier sitemap généré.\
2.1	136	Par défaut fichier sitemap.xml est généré automatiquement par HUGO.
	137	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).\
	138	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/)
	139
2.7	140	```
	141	[params]
	142	noindex_taxonomy = ['tags', 'categories', 'feeds']
	143	```
2.1	144	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.
	145
2.7	146	```
	147	[taxonomies]
	148	tag = 'tags'
	149	```
2.1	150	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.
	151
	152	- Pour activer les mathématiques dans markdown et pouvoir utiliser du texte en indice : https:~/~/gohugo.io/content-management/mathematics/
	153
2.7	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
2.1	164	~#~# URL and links
	165
2.7	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.\
2.1	167	.Permalink va prendre l’url complète (absolute URL).\
	168	.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é).
	169	- utiliser relURL si on doit l’ajouter à du texte avant. Utiliser .RelPermalink pour utiliser l’adresse relative toute seule. Idem avec absURL et .Permalink (?)
2.7	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).
2.1	171
	172	~#~# search bar
	173
	174	- 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).
2.7	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).
2.1	176	- pour customiser pagefind : https:~/~/pagefind.app/docs/ui-usage/#customising-the-styles. Vérifier le style lors d’une mise à jour.
	177
	178	~#~# Formulaire de contact HUGO
	179
	180	~#~#~#~# Configuration de n8n
	181
	182	- Utilisation de n8n pour le formulaire.
	183	- Ce sont les « Field Label » qui sont utilisés comme entré dans le json produit. Comment faire si le field label contient des espaces ?
	184	- Dans le nœud Email, dans Email Format choisir "text" puis cliquer sur "Expression" pour rentrer le texte et le code json
	185
	186	exemple avec le formulaire koevoo :
	187
	188	```
	189	Nom : ~{~{$json.Nom}}
	190	Prénom : ~{~{$json.Prénom}}
	191	Société : ~{~{$json.Société}}
	192	Email : ~{~{$json.Email}}
	193	Téléphone : ~{~{$json.Téléphone}}
	194	Message : ~{~{$json.Message}}
	195
	196
	197	Backup : ~{~{JSON.stringify($json)}}
	198	```
	199
	200	- En utilisant un nœud "webhook" plutôt qu’un "Form Trigger" il est possible d’utiliser son propre HTML/CSS pour le formulaire et capturer les infos fourni dans n8n.
	201
	202	~#~#~#~# Autres possibilités de formulaires :
2.2	203	- https:~/~/ktarila.com/blog/1-contact-forms-for-static-generated-sites/
2.3	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
2.4	207	- https:~/~/discourse.gohugo.io/t/is-it-possible-to-add-a-contact-form-to-a-site/1550/24
2.1	208
2.6	209	~#~# Internationalisation (i18n)
	210
2.7	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	```
2.6	221
2.1	222	~#~# Trucs en plus pour HUGO
	223
	224	- https:~/~/www.pierremorsa.com/post/2016-08-16-quelques-trucs-en-plus-pour-votre-site-hugo/