Mémo des modifications du thème hugo-clarity
Ce site est construit en combinant Hugo + Github Pages. J’utilise le thème hugo-clarity. Ce post récapitule les configurations et modifications que j’y ai apporté.
Le thème hugo-clarity demande pas mal de conf. Plutôt que partir de zéro j’ai suivi le conseil que donne sa doc d’install et je suis parti du examplesite/ fourni dans le thème, que j’ai ensuite modifié.
documents non-utilisés
Suppression des exemples en portugais
rm ./config/_default/menus/menu.pt.toml
rm ./content/about.pt.md
Suppression des pages exemples dans ./content
rm ./content/archives.md
rm ./content/homepage/about.md
rm ./content/homepage/work.md
rm ./content/post/* # exemples de pages
rm ./static/images/* # images non utilisées
Modification des fichiers de conf
Modification de _./config/default/config.toml
Modifié :
baseurl = "https://loboto51.github.io/"
title = "Lobotourisme"
author = "Loboto"
paginate = 10
theme = "hugo-clarity"
DefaultContentLanguage = "fr"
[taxonomies]
category = "categories"
tag = "tags"
series = "series"
Modification de _./config/default/languages.toml
Modifié :
[fr]
title = "Lobotourisme"
LanguageName = "French"
weight = 1
Modification de _./config/default/params.toml
Très long fichier, principales modifs :
author = "Loboto"
introDescription = "(...)"
enforceDarkMode = true
dateFormat = "02/01/2006"
since = 2021
footerLogo = "logos/logo.png"
Création d’un menu.fr.toml à partir de menu.en.toml
mv ./config/_default/menus/menu.en.toml ./config/_default/menus/menu.fr.toml
Modifié pour le restreindre à 2 blocs :
[[main]]
name = "A propos"
url = "about/"
weight = -107
# social menu links
[[social]]
name = "rss"
weight = 4
url = "index.xml"
Modification des pages principales
Modification de ./content/about.md
Il s’agit juste d’une page normale, affichée lorsqu’on clique sur “à propos”.
Modification de _./content/index.md
+++
author = "Loboto"
description = "Lobotourisme"
+++
Modification des templates
Point important : Hugo permet de passer outre n’importe quel élément du thème en mettant une version locale dans l’arborescence du site.
Exemple : _./layouts/default/single.html sera pris en priorité sur _./themes/hugo-clarity/layouts/default/single.html
Cela permet de modifier son site tout en ne touchant pas aux sources du thème. On peut donc toujours se référer à l’original ou revenir en arrière.
Template des articles single.html
Edit du 10/05/2021 : Finalement je suis revenu au template initial, et je marque les éditions comme ici, pour pouvoir les contextualiser.
mkdir -p ./layouts/_default
cp ./themes/hugo-clarity/layouts/_default/single.html ./layouts/_default/
J’ai ajouté la date de dernière mise à jour si le paramètre lastmod existe :
{{ if $p.lastmod }}
<blockquote><p>Dernière mise à jour : <time datetime="{{ $p.lastmod.Format "Mon Jan 10 17:13:38 2020 -0700" }}">{{ $p.lastmod.Format (default "Jan 2, 2006" $.Site.Params.dateFormat) }}</time></p></blockquote>
{{ end }}
Template de l’entête des billets post-meta.html
mkdir -p ./layouts/partials
cp ./themes/hugo-clarity/layouts/partials/post-meta.html ./layouts/partials/
J’ai ajouté les catégories, avec un bouton plus imposant, avant les tags :
(...)
<span class="post_time"> · {{ T "reading_time" . }} </span>
{{ end }}
{{- with .Params.categories -}}
<span>
{{- range . }}
{{- $category := urlize . }} ·
<a href='{{ absLangURL (printf "categories/%s" $category) }}' title="{{ . }}" class="button button_translucent">
{{- . }}
</a>
{{- end }}
</span>
{{- end }}
{{- with .Params.tags -}}
(...)
Modification de excerpt.html pour afficher les miniatures prises dans les ressources de l’article : En priorité l’image nommée cover.*, puis en second choix la première image du doc
mkdir -p ./layouts/partials
cp ./themes/hugo-clarity/layouts/partials/excerpt.html ./layouts/partials/
J’ai remplacé toute la section thumbnails par l’algorithme suivant :
- Si il existe des ressources “image” du billet :
- On prend la première image nommée cover.* et on l’affiche telle-quelle ;
- Sinon on prend la première image trouvée, on la redimensionne en 300x300 et on l’affiche ;
- Sinon on n’affiche rien.
(...)
{{- with .Resources.ByType "image" }}
<div class="excerpt_footer partition">
<div class="excerpt_thumbnail">
{{ with .GetMatch "{cover.*}" }}
<img src="{{ .Permalink }}" alt="{{ $.Title }}"/>
{{ else}}
{{ with .GetMatch "{cover.*,*.jpg,*.png,*.jpeg}" }}
{{ $cover := .Fit "300x300" }}
{{ with $cover }}
<img src="{{ .Permalink }}" alt="{{ $.Title }}"/>
{{ end }}
{{ end }}
{{ end }}
</div>
{{ else }}
<div class="excerpt_footer">
{{- end }}
(...)
Mises à jour
- 10/05/2021 : Modification du template single.html.
- 14/05/2021 : Depuis la rédaction de ce document, je suis passé au thème hugo-future-imperfect qui présente quelques fonctions supplémentaires et que je trouve plus élégant.
- 15/05/2021 : Déplacement de la gestion des icônes dans une page dédiée : Fabrication des favicons en masse avec Imagemagick.