Konk_Gwin

Hugo 4 - Personnaliser sa page d'accueil

Étiquettes:
Citation finale de:
Logiciels évoqués:

Je souhaite depuis longtemps améliorer ma page d’accueil. Ce billet montre comment n’y afficher que les chapôs (summary) des derniers billets, créer de nouveaux types d’indexation des billet et, enfin, lister les catégories et autres indexations en page d’accueil.

1- Comment modifier sa page d’accueil

1.1 La page d’accueil a minima

Par défaut, sous ZEN, la page d’accueil se présente comme une suite de l’ensemble des billets du site. Voici l’extrait du fichier themes/zen/layouts/index.html correspondant

      {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}

Cette liste est paginée.

      {{ $paginator := .Paginate $pages -}}  
      {{ range $paginator.Pages -}}

N’y apparaissent que les chapôs des billets.

      {{ .Render "summary"}}

1.2 Comment mettre du contenu dans sa page d’accueil

1.2.1 Créer le billet _index.md

Pour mettre du contenu dans la page d’accueil, il faut créer un billet au niveau du répertoire content du site. La commande est la suivante:

  hugo server new _index.md

On crée du contenu dans _index.md comme dans tout autre billet du site.

1.2.2 Utiliser le gabarit themes/zen/layouts/index.html

Ce contenu va apparaître selon les directives du fichier themes/zen/layouts/index.html avec les instructions suivantes

     <article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
        <div class="content">
           {{ .Content }}
        </div>
      </article>

Ce contenu sera suivi de la liste des billets du site, comme on l’a vu plus haut. Le tout (c’est–à-dire le fichier themes/zen/layouts/index.html) se présente comme suit

{{ define "title" }}{{ .Site.Title }}{{ end }}
{{ define "main" -}}
  <main class="main layout__main">
     <article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
        <div class="content">
           {{ .Content }}
        </div>
      </article>
      {{ $pages&nbsp;:= where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
          {{ $paginator&nbsp;:= .Paginate $pages -}}  
          {{ range $paginator.Pages -}}
          {{ .Render "summary"}}
     {{ end -}}
 {{ partial "pagination.html" . }}
  </main>
 {{ end }}

1.3 Comment n’afficher que le châpo de mes quatre derniers billets

1.3.1 Disposer de son propre layouts/index.html

Pour afficher mes quatre dernier billets (et non tous les billets), il me faut tout d’abord copier themes/zen/layouts/index.html dans le répertoire layouts de mon site.
Je peux ensuite modifier à loisir mon layouts/index.html.

1.3.2 Enlever la partie listant le chapô de l’ensemble des billets

Pour ne plus avoir la liste complète des billets j’enlève la partie correspondante, à savoir

      {{ $pages&nbsp;:= where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
          {{ $paginator&nbsp;:= .Paginate $pages -}}  
          {{ range $paginator.Pages -}}
          {{ .Render "summary"}}
     {{ end -}}

Je ne souhaite pas de pagination, j’enlève aussi cette instruction

 {{ partial "pagination.html" . }}

1.3.3 Afficher le chapô des quatre derniers billets

Je veux maintenant trier les quatre derniers billets parus (range first 4 .Site.RegularPages) et en afficher le châpo (.Render "summary").
Le tout sera précédé par un titre de niveau 1, ce qui nous donne :

<div>
    <h1> Les quatre derniers billets parus </h1>
    {{ range first 4 .Site.RegularPages }} {{ .Render "summary"}} {{ end }}
</div>

Mon fichier a maintenant l’allure suivante :

{{ define "title" }}{{ .Site.Title }}{{ end }}
{{ define "main" -}}
  <main class="main layout__main">
     <article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
        <div class="content">
           {{ .Content }}
        </div>
      </article>
      <div>
        <h1> Les quatre derniers billets parus </h1>
        {{ range first 4 .Site.RegularPages }} {{ .Render "summary"}} {{ end }}
      </div>
  </main>
{{ end }}

Ma page d’accueil est dorénavant constituée :

  • du contenu du billet index.md
  • suivi de la liste des quatre derniers billets parus.

Bingo !

2- Mettre en place la clé « citations »

Comme évoqué dans l’à propos de ce site, je mets en fin de billet, systématiquement, un citation d’oeuvre (littéraire, poétique ou autre).
Je veux créer une indexation avec le nom d’auteur cité.

Hormis la modification du fichier config.yaml, la procédure est semblable à ce qu’on a déjà fait pour les catégories dans le troisième billet sur HUGO.

  1. Je modifie le fichier config.yaml pour ajouter la partie taxinomie

    taxonomies:
   category:  "categories"      # par défaut
   tag: "tags"                  # par défaut
   citation: "citations"        # un index spécifique à mon site

  2. Je crée un fichier layouts/partials/citations.html à l’image de categories.html. Soit

    <div class="tags">
  {{ i18n "taxo_citations" }}:
  <ul>
    {{ range (.GetTerms "citations") }}
        <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
    {{ end }}
  </ul>
</div>

  3. Je modifie mon dossier i18n (seulement dans fr.toml dans un premier temps)

    [taxo_citations]
    other = “Auteur.e cité.e”

  4. Je rajoute, dans layouts/_default/single.html l’instruction

    {{ if .Params.citations }}{{ partial “citations.html” . }}{{ end -}}

  5. Je modifie mon fichier archetypes/defaut.md en ajoutant

    citations: []

  6. Et, bien sûr, dans mes billets déjà existant, j’ajoute si nécessaire dans les métadonnées

    citations: [“mon auteur cité en fin de billet”]

Et voilà !

3- Comment lister les clés d’indexation dans la page d’accueil

3.1 Réutiliser un exemple de la documentation HUGO

Pour afficher les clés d’indexation d’un site (voir « Render a Site’s Taxonomies »), la documentation HUGO fournit un exemple concernant les étiquettes (tags) que je reproduis ici

 <ul>
     {{ range .Site.Taxonomies.tags }}
             <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}</li>
     {{ end }}
 </ul>

Cette portion de code permet d’obtenir une liste à points (bullet points) des étiquettes (tags).

En mettant ce code dans layouts/index.html (puisque je veux que cette liste s’affiche sur ma page d’accueil), voici ce que ça donnerait pour ce site

Les étiquettes en liste à bullet points

3.2 Obtenir une liste en ligne plutôt qu’à points

3.2.1 Une première modification de layouts/index.html

Ce n’est pas ce que je souhaite. Je voudrais que la liste des étiquettes se présente en ligne, avec, pour chaque étiquette, le nombre de billets concernés entre parenthèse. Soit quelque chose comme ça

 étiquette1 (nombre), étiquette2 (nombre), étiquette3 (nombre), etc.

Il faut déjà enlever les balises html (<ul> <li> </li> </ul>) qui permettent de générer la liste à points.

 {{ range .Site.Taxonomies.tags }}
      <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}
 {{ end }}

Cela nous donne

Les étiquettes en ligne

3.2.2 Comprendre les instructions utilisées

Décortiquons rapidement cet ensemble d’instructions. Tout d’abord {{ range }}

 {{ range .Site.Taxonomies.tags }}
      instructions
 {{ end }}

va générer une boucle qui va balayer tout les tags du site (variable .Site.Taxonomies.tags) et, pour chaque tag, exécuter les instructions comprises entre {{ range }} et {{ end }}.

L’instruction comprise entre {{ range }} et {{ end }} va, pour un tag donné, fournir un hyperlien qui pointe vers les billets utilisant ce tag, et afficher ce tag. Pour cela on utilise du html

  <a href="mon_hyperlien">texte à afficher pour l'hyperlien</a>

Enfin, il suffit de mettre entre parenthèse la variable HUGO {{ .Count }}. La ligne d’instruction devient alors

      <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> ({{ .Count }})

Et voilà.

Je n’ai pas pris la peine d’écrire un partial que j’aurais mis dans layouts/partials. J’ai directement mis les instructions dans layouts/index.html.

3.3 Généraliser à l’ensemble des indexations voulues

De plus, j’ai réalisé la même chose pour les catégories et les citations. Voici la portion concernée de mon fichier layouts/index.html

    <div>
    <h1> Atteindre les billets par mot-clé</h1>
      <div> 
        <h2> Par catégorie</h2>
        {{ range .Site.Taxonomies.categories }}
           <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> ({{ .Count }})
        {{ end }}
      </div>
      <div> 
        <h2> Par étiquette</h2>
        {{ range .Site.Taxonomies.tags }}
           <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> ({{ .Count }})
        {{ end }}
      </div>
      <div> 
        <h2> Par auteur cité</h2>
        {{ range .Site.Taxonomies.citations }}
           <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> ({{ .Count }})
        {{ end }}
      </div>
    </div>

Je sais, je sais. J’aurais pu alimenter une variable et créer un partial afin de ne pas répéter la même séquence d’instructions. Mais au vu du nombre de lignes impliquées, je ne l’ai pas fait.

Voici une partie de ce que cela donne : Les clés d&rsquo;indexation sur le site

C’est tout pour aujourd’hui!

———- La citation :

Plus tu aspires au repos,
Et plus terrible, terrible est la vie,
La brume humide glisse des champs,
Rampe sur le velours de la nuit,
S’insinue dans la poitrine…

Oublie ce que fut ta vie,
Oublie ce qu’elle sera…
Dans les champs glissent les ténèbres…
Ô seulement –
Pouvoir dormir…
Mais à quoi bon –
Quelqu’un me réveillera.

Alexandre Blok « Châtiment » (extrait) du recueil Le Monde terrible traduit et présenté par Pierre Léon (Gallimard)

Dernière modification: 10 septembre 2020
Établi: 29 août 2020

Menu