Ajouter des langues à un site Hugo

Publié le 16 mars 2023 par Andrew Owen (4 minutes)

Je suis un fervent défenseur de la localisation, mais ce site est monolingue depuis plus d’un an. Il est grand temps que je suive mon adéquat conseil. Le week-end dernier, je me suis donc enfin attelé à la localisation du site en français.

Comme pour la plupart des tâches de localisation, je l’adapte à un projet existant. Heureusement, j’ai choisi Hugo comme générateur de site statique et il se débarrasse d’un support d’internationalisation intégré en utilisant go-i18n. En revanche, j’ai choisi un thème qui ne prend pas totalement en charge la localisation, ce qui implique un certain travail. Mais pas autant que je m’y attendais. Laissez-moi donc vous expliquer les étapes à suivre.

Tout d’abord, j’ai mis à jour mon fichier config.toml pour indiquer à Hugo que mon site est maintenant multilingue:

defaultContentLanguageInSubdir = false
DefaultContentLanguage = "en-us"
[languages]
  [languages.en-us]
    title = "Andrew Owen | Writer | Designer"
    languageName = "English"
    weight = 1
  [languages.fr]
    title = "Andrew Owen | Écrivain | Concepteur"
    languageName = "Français"
    weight = 2

La définition de defaultContentLanguageInSubdir laisse la langue hors de l’URL pour la langue par défaut, dans mon cas l’anglais américain. Tous les paramètres que vous omettez dans les définitions de langue reviendront à la valeur par défaut.

Ma page 404.md est déjà stockée dans un dossier appelé en. Ainsi, l’ajout d’une version française consistait simplement à créer un nouveau dossier appelé fr, à copier le fichier et à modifier le texte.

L’étape suivante consistait à mettre en place un ensemble d’expression traduisibles pour le contenu généré. C’est aussi simple que de créer un dossier i18n à la racine du référentiel Hugo et d’ajouter un fichier YAML ou TOML pour chaque langue. Dans mon cas, en-us.yaml et fr.yaml. Cette expression est incluses en utilisant le shortcode {{T "phrase" | formatage}}. Si vous souhaitez inclure du code HTML tel que des balises <br>, utilisez alors safeHTML pour la valeur formatting. Chaque valeur doit avoir un ID et une définition dans chaque fichier de langue. Par exemple:

- id: January
  translation: "janvier"

À plusieurs endroits du site, les titres étaient dérivés de données contenues dans des fichiers YAML. Dans chacun de ces cas, j’ai remplacé la version dérivée des données par un shortcode vers la version traduite. J’ai également dû modifier certains liens pour qu’ils renvoient au bon endroit lorsque le site est affiché en français. Dans la plupart des cas, il s’agissait simplement d’utiliser la valeur .Site.Language.Lang .

Comme je ne supporte que deux langues, je voulais avoir un simple basculement. La barre de navigation commençait à se remplir, j’ai donc supprimé le lien Home, car le logo vous y emmène déjà. J’ai dû modifier le lien RSS pour qu’il fonctionne en français, et je l’ai donc remplacé par l’icône. Je me suis dit que tous ceux qui s’intéressent encore au RSS devraient le reconnaître:

<li class="nav-item">
  {{ if eq .Site.Language.Lang "en-us" }}
  <a class="nav-link" href="/blog/index.xml"><i class='fa fa-rss'></i></a>
  {{ else }}
  <a class="nav-link" href="/fr/blog/index.xml"><i class='fa fa-rss'></i></a>
  {{ end }}
</li>

La dernière chose à faire était de traduire les articles individuels. Hugo vous donne deux façons de le faire. Vous pouvez créer un dossier pour chaque langue, et si vous avez trois langues ou plus, vous devriez le faire. Mais par défaut, Hugo traitera tout ce qui se termine par .md comme la langue par défaut et vous pouvez ajouter d’autres langues en ajoutant le code de la langue à l’extension, par exemple: .fr.md. Si vous utilisez des dossiers, ajoutez les détails du dossier aux définitions de la langue dans votre fichier TOML. Par exemple: .fr.md:

[languages]
  [languages.fr]
    contentDir = "content/francais"

Pendant que je modifiais le site dans VScode, j’en ai profité pour réorganiser les images. Il devenait un peu difficile de naviguer avec TinaCMS, j’ai donc déplacé les images du blog dans des dossiers par an. J’ai également fait un peu de ménage dans la barre de navigation supérieure. La dernière chose à faire était de changer la chaîne de date de l’article de {{ .PublishDate.Format "2 January 2006" }} en {{.Date.Day}} {{i18n .Date.Month}} {{.Date.Year}} après avoir mis en place un ensemble de chaînes de dates traduisibles dans les fichiers YAML du dossier i18n.

Bien entendu, alors que je pensais avoir tout compris, j’ai remarqué que les liens vers les balises étaient rompus. J’ai corrigé ce problème en rendant l’URL relative de manière à ce qu’elle prenne en compte la langue actuelle. Je suis heureux de dire que je n’ai rien eu à faire pour localiser la recherche.

La partie technique étant terminée, il ne se reposer plus que la traduction à effectuer. Il existe des moyens d’automatiser le processus, mais rien ne remplace un réviseur humain. J’utilise une combinaison de DeepL, LanguageTool et de mes modestes compétences linguistiques. Pour commencer, je ne traduis que le contenu principal. Mais à terme, j’ai l’intention d’avoir un site entièrement traduit. Si vous êtes de langue maternelle française et que vous repérez des erreurs flagrantes, n’hésitez pas à m’envoyer un courriel.