Comment Créer Un Site Avec Hugo Partie 7 : ajouter des liens de contenus en relation

Créer un site avec Hugo partie 7 : ajouter des liens de contenus en relation

Vous aurez surement remarqué que la plupart des blogs intègrent une fonction qui permet de promouvoir d'autres articles en relation avec l'article en cours, et de manière carrément plus intelligente que ce qu'on peut connaître ailleurs..

Hugo propose cette fonctionnalité nativement : on va maintenant voir comment l'implémenter dans notre template fait main.

Comment ça fonctionne concrètement ???

Hugo va associer les articles qui ont une taxonomie commune : c'est donc au niveau du front matter de chaque article qu'il va falloir faire un travail de catégorisation.

La page dédiée à la documentation du contenu relatif se trouve ici : https://gohugo.io/content-management/related/

Comment configurer les pages liées ?

Quand on regarde la configuration par défaut de la fonction qui permet l'affichage des contenus liés, voici ce qui est affiché (en YAML) :

related:
  threshold: 80
  includeNewer: false
  toLower: false
  indices:
  - name: keywords
    weight: 100
  - name: date
    weight: 10

Voyons maintenant en détail, ligne par ligne, à quoi correspondent ces données de configuration.

Threshold : 80

Cette ligne indique un seuil de similarité à 80/100 (on va dire 80% pour simplifier) ; plus la valeur indiquée ici sera élevée, plus l'accent sera mis sur les contenus les plus similaires, quitte à ne rien afficher du tout si aucun article ne correspond assez.

A contrario, plus la valeur sera faible, et moins on sera “select” sur les contenus à afficher dans l'encart des articles en relation. En gros, en mettant 0, on affichera un article en relation même s'il ne colle pas avec la thématique de l'article sur lequel on se trouve.

includeNewer : false

En mettant “faux”, on indique qu'on ne veut pas que s'affichent des articles avec une date plus récente que l'article affiché. En mettant true, on autorise donc l'affichage d'articles plus récents.

toLower : false

En mettant “true”, on va demander à Hugo de mettre les mots-clés en minuscule pour éviter les éventuelles erreurs de frappe qui pourraient créer des doublons.

indices :

Ce qui suit ce terme fait tout le “sel” de la fonction “related” : on va pouvoir définir une sorte d'algorithme qui va trier automatiquement le contenu en fonction des critères qui nous semblent les plus pertinents.

Cela signifie que Hugo va d'abord chercher une liste de mots clés (“keywords”) dans le front matter de chaque page, et va lier entre elles les pages qui partagent le plus de mots-clés en commun. Il va également utiliser dans une moindre mesure le paramètre relatif à la date

Les “keywords” sont un paramètre du front matter que nous n'avons pas encore vu, mais il est possible de l'utiliser au même titre que “categories”.

En d'autres termes, l'algorithme tel qu'il est configuré par défaut va donner un poids de 100 (sur 100) aux mots-clés que les différents articles auront en commun, et un poids de 10 (toujours sur 100) à la date. On peut donc s'amuser à configurer le contenu relatif d'une manière un peu plus “intelligente” que ce qu'il est possible de faire avec des CMS classiques.

Je reviendrai un peu plus tard en détail sur cette fonction, qui devrait avoir une utilité certaine pour faire un peu d'optimisation SEO.

Customisons cette fonction

Pour customiser cette configuration par défaut, il suffit de se rendre dans config.tom et de faire quelques modifs (notez la différence de syntaxe, on passe du YAML au TOML ;-) ) :

[related]
    threshold = 80 
    includeNewer = true
    toLower = true

    [[related.indices]]
        name = "categories"
        weight = 100

    [[related.indices]]
        name = "date"
        weight = 10

Mon petit côté SEO me dit qu'il vaut mieux ne rien afficher en relation si les thématiques ne sont pas similaires, c'est pourquoi je laisserai 80 à la valeur de seuil de similarité acceptable (c'est comme ça que je traduis “Threshold”)

Par contre, j'aimerais bien que le script affiche les contenus les plus récents quand même, ça serait dommage de rester figé juste sur les articles les plus anciens. D'autant que si ça peut filer un coup de pouce à l'indexation des nouveaux articles, ce n'est pas de refus !

J'aurais tendance à mettre “toLower” pour éviter les doublons ; à voir si c'est pertinent, je ne suis encore qu'en phase de test !

Pour ce qui est des indices, j'ai remplacé le “keywords” par “categories”, pour ne créer des relations qu'entre pages de la même catégories (histoire de rester dans une logique de silos, je n'aimerais pas que mes articles aillent taper dans d'autres catégories). L'indice keywords peut être à mon avis très utile si bien utilisé (un peu comme les tags dans WordPress), mais pour l'instant restons simples et évitons le plat de spaghettis.

L'implémentation du contenu relatif dans le thème du site

Passons aux choses sérieuses : l'intégration des articles dans le template des pages.

Pour créer un template de contenu relatif, on va s'appuyer sur les widget et créer le fichier partial suivant :

layouts/partials/widgets/post-card-small.html 

Voici son contenu :

{{ $permalink := .Permalink }}
<div class="card">
    <div class="card-image">
        <figure class="image is-3by2">
            {{ with .Params.images }}
            <a href="{{ $permalink }}"><img src="{{ index . 0 }}" alt=""></a>
            {{ end }}
        </figure>
    </div>
    <div class="card-content">
        <a class="title is-5" href="{{ .Permalink }}">{{ .Title }}</a>
        <span class="heading"><time>{{ .PublishDate.Format "January 2, 2006"}}</time></span>
    </div>
</div>

Ensuite, on va l'intégrer dans le template layouts/blog/single.html juste avant la fin du template marquée par la déclaration {{end}}

<section class="section">
    <div class="columns is-centered">
        <div class="column max-800px">
            <div class="content">
                <h2>Vous devriez également aimer ce qui suit...</h2>
            </div>
            <div class="columns">
                {{ $related := (where (.Site.RegularPages.Related .) "Type" "blog") | first 3 }}
                {{ range $related }}
                <div class="column is-one-third">
                    {{ partial "widgets/post-card-small.html" . }}
                </div>
                {{ end }}
            </div>
        </div>
    </div>
</section>

Je ne vais une fois de plus pas m'attarder sur l'apparence et la gestion du html avec Bulma ; par contre, ici c'est la boucle

{{ $related := (where (.Site.RegularPages.Related .) "Type" "blog") | first 3 }}

qui retient notre attention.

Qu'est-ce qu'elle nous dit précisément ?

.Site.RegularPages.Related appelle toutes les pages relatives à la page en cours

A cela, on ajoute quelques conditions :

where ( … ) “Type” “blog”

Si on traduit, c'est assez clair à comprendre : “où le type correspond à blog”

En gros, on veut afficher les articles relatifs à l'article en cours mais seulement ceux qui font partie du type de page “blog” (pour éviter de retrouver les pages “à propos” ou “nous contacter” par exemple)

{{ $related := ( … ) | first 3 }}

Signifie tout simplement qu'on va affecter à la variable $related les 3 premiers éléments qui correspondent donc aux 3 derniers articles les plus pertinents.

La petite touche finale…

Pour faire en sorte que les différents encarts aient la même hauteur, vous pouvez simplement ajouter ceci à la feuille de styles :

.card {
    height: 100%;
}

Et voilà, on y est : vous avez intégré une fonctionnalité qui permet d'afficher des articles en relation !

Bon, pour être honnête, je ne maîtrise pas encore à 100% cette partie de Hugo : je vais attendre de faire un test à plus grande échelle pour comprendre ça dans le détail, mais je suis persuadé que c'est une très bonne fonctionnalité pour s'amuser à créer des silos thématiques d'une façon plus intelligente que ce qu'on peut connaître sur d'autres systèmes !