Added french posts translation for testing internationalization (i18n) (#11)
This commit is contained in:
Rémy Jacquin
digitalcraftsman
parent
4e47e94a69
commit
93a7b4c297
11
config.toml
11
config.toml
|
|
@ -4,4 +4,15 @@ author = "Steve Francia"
|
||||||
copyright = "Copyright © 2008–2018, Steve Francia and the Hugo Authors; all rights reserved."
|
copyright = "Copyright © 2008–2018, Steve Francia and the Hugo Authors; all rights reserved."
|
||||||
canonifyurls = true
|
canonifyurls = true
|
||||||
paginate = 3
|
paginate = 3
|
||||||
|
languageCode = "en"
|
||||||
|
DefaultContentLanguage = "en"
|
||||||
|
|
||||||
|
[languages.en]
|
||||||
|
languageName = "English"
|
||||||
|
weight = 1
|
||||||
|
title = "Hugo Themes"
|
||||||
|
|
||||||
|
[languages.fr]
|
||||||
|
languageName = "Français"
|
||||||
|
weight = 2
|
||||||
|
title = "Thèmes Hugo"
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,352 @@
|
||||||
|
+++
|
||||||
|
author = "Auteur inconnu"
|
||||||
|
categories = ["Go"]
|
||||||
|
date = "2014-04-02"
|
||||||
|
description = ""
|
||||||
|
featured = "pic02.jpg"
|
||||||
|
featuredalt = ""
|
||||||
|
featuredpath = "date"
|
||||||
|
linktitle = ""
|
||||||
|
slug = "Introduction aux modeles Hugo"
|
||||||
|
title = "Introduction aux modèles (Hu)go"
|
||||||
|
type = "post"
|
||||||
|
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo utilise l'excellente librairie [go][] [html/template][gohtmltemplate] pour
|
||||||
|
son moteur de modèles. c'est un moteur extrêmement léger qui offre un très petit
|
||||||
|
nombre de fonctions logiques. À notre expérience, c'est juste ce qu'il faut pour
|
||||||
|
créer un bon site web statique. Si vous avez déjà utilisé d'autre moteurs de
|
||||||
|
modèles pour différents langages ou frameworks, vous allez retrouver beaucoup de
|
||||||
|
similitudes avec les modèles go.
|
||||||
|
|
||||||
|
Ce document est une introduction sur l'utilisation de Go templates. La
|
||||||
|
[documentation go][gohtmltemplate] fourni plus de détails.
|
||||||
|
|
||||||
|
## Introduction aux modèles Go
|
||||||
|
|
||||||
|
Go templates fournit un langage de modèles très simple. Il adhère à la
|
||||||
|
conviction que les modèles ou les vues doivent avoir une logique des plus
|
||||||
|
élémentaires. L'une des conséquences de cette simplicité est que les modèles
|
||||||
|
seront plus rapides a être analysés.
|
||||||
|
|
||||||
|
Une caractéristique unique de Go templates est qu'il est conscient du contenu.
|
||||||
|
Les variables et le contenu va être nettoyé suivant le contexte d'utilisation.
|
||||||
|
Plus de détails sont disponibles dans la [documentation go][gohtmltemplate].
|
||||||
|
|
||||||
|
## Syntaxe basique
|
||||||
|
|
||||||
|
Les modèles en langage Go sont des fichiers HTML avec l'ajout de variables et
|
||||||
|
fonctions.
|
||||||
|
|
||||||
|
**Les variables Go et les fonctions sont accessibles avec {{ }}**
|
||||||
|
|
||||||
|
|
||||||
|
Accès à une variable prédéfinie "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Les paramètres sont séparés par des espaces**
|
||||||
|
|
||||||
|
Appel de la fonction add avec 1 et 2 en argument**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Les méthodes et les champs sont accessibles par un point**
|
||||||
|
|
||||||
|
Accès au paramètre de la page "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Les parenthèses peuvent être utilisées pour grouper des éléments ensemble**
|
||||||
|
```
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Chaque modèle go a une structure (objet) mis à sa disposition. Avec Hugo, à
|
||||||
|
chaque modèle est passé soit une page, soit une structure de nœud, suivant quel
|
||||||
|
type de page vous rendez. Plus de détails sont disponibles sur la page des
|
||||||
|
[variables](/layout/variables).
|
||||||
|
|
||||||
|
Une variable est accessible par son nom.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Les variables peuvent également être définies et appelées.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go templace est livré avec quelques fonctions qui fournissent des
|
||||||
|
fonctionnalités basiques. Le système de Go template fourni également un
|
||||||
|
mécanisme permettant aux applications d'étendre les fonctions disponible. Les
|
||||||
|
[fonctions de modèle Hugo](/layout/functions) fourni quelques fonctionnalités
|
||||||
|
supplémentaires que nous espérons qu'elles seront utiles pour vos sites web.
|
||||||
|
Les functions sont appelées en utilisant leur nom suivi par les paramètres
|
||||||
|
requis séparés par des espaces. Des fonctions de modèles ne peuvent pas être
|
||||||
|
ajoutées sans recompiler Hugo.
|
||||||
|
|
||||||
|
**Exemple:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Inclusions
|
||||||
|
|
||||||
|
Lorsque vous incluez un autre modèle, vous devez y passer les données qu'il sera
|
||||||
|
en mesure d'accèder. Pour passer le contexte actuel, pensez à ajouter un point.
|
||||||
|
La localisation du modèle sera toujours à partir du répertoire /layout/ dans
|
||||||
|
Hugo.
|
||||||
|
|
||||||
|
**Exemple:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logique
|
||||||
|
|
||||||
|
Go templates fourni les itérations et la logique conditionnèle des plus basique.
|
||||||
|
|
||||||
|
### Itération
|
||||||
|
|
||||||
|
Comme en go, les modèles go utilisent fortement *range* pour itérer dans une
|
||||||
|
map, un array ou un slice. Les exemples suivant montre différentes façons
|
||||||
|
d'utiliser *range*
|
||||||
|
|
||||||
|
**Exemple 1: En utilisant le context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Exemple 2: En déclarant un nom de variable**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Exemple 2: En déclarant un nom de varialbe pour la clé et la valeur**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditions
|
||||||
|
|
||||||
|
*If*, *else*, *with*, *or*, *&*, *and* fournissent la base pour la logique
|
||||||
|
conditionnelle avec Go templates. Comme *range*, chaque déclaration est fermé
|
||||||
|
avec `end`.
|
||||||
|
|
||||||
|
Go templates considère les valeurs suivante comme *false* :
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* tout array, slice, map ou chaine d'une longueur de zéro
|
||||||
|
|
||||||
|
**Exemple 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Exemple 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Exemple 3: And & Or**
|
||||||
|
```
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption"))
|
||||||
|
(isset .Params "attr")}}
|
||||||
|
```
|
||||||
|
**Exemple 4: With**
|
||||||
|
|
||||||
|
Une manière alternative d'écrire un "if" et de référencer cette même valeur est
|
||||||
|
d'utiliser "with". Cela permet de remplacer le contexte `.` par cet valeur et
|
||||||
|
saute le bloc si la variable est absente.
|
||||||
|
|
||||||
|
Le premier exemple peut être simplifié à ceci :
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Exemple 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## *Pipes*
|
||||||
|
|
||||||
|
L'un des composants le plus puissant de Go templates est la capacité d'empiler
|
||||||
|
les action l'une après l'autre. Cela est fait en utilisant les *pipes*.
|
||||||
|
Empruntés aux *pipes* unix, le concept est simple. Chaque sortie de *pipeline*
|
||||||
|
devient l'entrée du *pipe* suivant.
|
||||||
|
|
||||||
|
À cause de la syntaxe très simple de Go templates, le *pipe* est essentiel pour
|
||||||
|
être capable d'enchainer les appels de fonctions. Une limitation des *pipes*
|
||||||
|
est qu'il ne peuvent fonctionner seulement avec une seule valeur et cette valeur
|
||||||
|
devient le dernier paramètre du prochain *pipeline*.
|
||||||
|
|
||||||
|
Quelques exemples simple devrait vous aider à comprendre comment utiliser les
|
||||||
|
*pipes*.
|
||||||
|
|
||||||
|
**Exemple 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
est identique à
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
Il semble étrange de placer le *if* à la fin, mais il fournit une bonne
|
||||||
|
illustration de la façon d'utiliser les tuyaux.
|
||||||
|
|
||||||
|
**Exemple 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Accès au paramètre de page nommé "disqus_url" et échappement du HTML
|
||||||
|
|
||||||
|
**Exemple 3 :**
|
||||||
|
```
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption"))
|
||||||
|
(isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
```
|
||||||
|
Peut être réécrit en
|
||||||
|
|
||||||
|
```
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" |
|
||||||
|
or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contexte (alias. le point)
|
||||||
|
|
||||||
|
Le concept le plus facilement négligé pour comprendre les modèles go est que
|
||||||
|
{{ . }} fait toujours référence au contexte actuel. Dans le plus haut niveau de
|
||||||
|
votre modèle, ce sera l'ensemble des données mis à votre disposition. Dans une
|
||||||
|
itération, ce sera la valeur de l'élément actuel. Enfin, dans une boucle, le
|
||||||
|
contexte change. . ne fera plus référence aux données disponibles dans la page
|
||||||
|
entière. Si vous avez besoin y d'accèder depuis l'intérieur d'une boucle, il est
|
||||||
|
judicieux d'y définir comme variable au lieu de dépendre du contexte.
|
||||||
|
|
||||||
|
**Exemple:**
|
||||||
|
```
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">
|
||||||
|
{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
```
|
||||||
|
|
||||||
|
Notez que, une fois que nous sommes entrés dans la boucle, la valeur de
|
||||||
|
{{ . }} a changée. Nous avons défini une variable en dehors de la boucle, afin
|
||||||
|
d'y avoir accès dans la boucle.
|
||||||
|
|
||||||
|
# Les Paramètres d'Hugo
|
||||||
|
|
||||||
|
Hugo fournit l'option de passer des valeurs au modèle depuis la configuration du
|
||||||
|
site, ou depuis les métadonnées de chaque partie du contenu. Vous pouvez définir
|
||||||
|
n'importe quelle valeur de n'importe quel type (supporté par votre section
|
||||||
|
liminaire / format de configuration) et les utiliser comme vous le souhaitez
|
||||||
|
dans votre modèle.
|
||||||
|
|
||||||
|
## Utiliser les paramètres de contenu (page)
|
||||||
|
|
||||||
|
Dans chaque partie du contenu, vous pouvez fournir des variables pour être
|
||||||
|
utilisées par le modèle. Cela se passe dans la
|
||||||
|
[section liminaire](/content/front-matter).
|
||||||
|
|
||||||
|
Un exemple de cela est utilisé par ce site de documentation. La plupart des
|
||||||
|
pages bénéficient de la présentation de la table des matières. Quelques fois,
|
||||||
|
la table des matières n'a pas beaucoup de sens. Nous avons défini une variable
|
||||||
|
dans notre section liminaire de quelques pages pour désactiver la table des
|
||||||
|
matières.
|
||||||
|
|
||||||
|
Ceci est un exemple de section liminaire :
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Ceci est le code correspondant dans le modèle :
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Utiliser les paramètres de site (config)
|
||||||
|
|
||||||
|
Dans votre configuration de plus haut niveau (ex `config.yaml`), vous pouvez
|
||||||
|
définir des paramètres de site, dont les valeurs vous seront accessibles.
|
||||||
|
|
||||||
|
Pour les instances, vous pourriez délarer :
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Avec un pied de page, vous devriez déclarer un `<footer>` qui est affiché
|
||||||
|
seulement si le paramètre `CopyrightHTML` est déclaré, et si il l'est, vous
|
||||||
|
devriez le déclarer comme HTML-safe, afin d'éviter d'échapper les entités HTML.
|
||||||
|
Cela vous permettra de le modifier facilement dans votre configuration au lieu
|
||||||
|
de le chercher dans votre modèle.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
Une alternative au "if" et d'appeler la même valeur est d'utiliser "with". Cela
|
||||||
|
modifiera le contexte et passera le bloc si la variable est absente :
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Enfin, si vous souhaitez extraire des "constantes magiques" de vos mises en
|
||||||
|
page, vous pouvez le faire comme dans l'exemple suivant :
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: <http://golang.org/>
|
||||||
|
[gohtmltemplate]: <http://golang.org/pkg/html/template/>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
+++
|
||||||
|
author = "Auteur Hugo"
|
||||||
|
categories = ["Hugo"]
|
||||||
|
date = "2014-04-02"
|
||||||
|
description = ""
|
||||||
|
featured = "pic03.jpg"
|
||||||
|
featuredalt = "Pic 3"
|
||||||
|
featuredpath = "date"
|
||||||
|
linktitle = ""
|
||||||
|
slug = "Debuter avec Hugo"
|
||||||
|
title = "Débuter avec Hugo"
|
||||||
|
type = "post"
|
||||||
|
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Étape 1. Installer Hugo
|
||||||
|
|
||||||
|
Allez sur la page de téléchargements de
|
||||||
|
[hugo](https://github.com/spf13/hugo/releases) et téléchargez la version
|
||||||
|
appropriée à votre système d'exploitation et votre architecture.
|
||||||
|
|
||||||
|
Sauvegardez le fichier téléchargé à un endroit précis, afin de l'utiliser dans
|
||||||
|
l'étape suivante.
|
||||||
|
|
||||||
|
Des informations plus complètes sont disponibles sur la page
|
||||||
|
[installing hugo](/overview/installing/)
|
||||||
|
<!--more-->
|
||||||
|
|
||||||
|
## Étape 2. Compilez la documentation
|
||||||
|
|
||||||
|
Hugo possède son propre site d'exemple qui se trouve être également le site que
|
||||||
|
vous lisez actuellement.
|
||||||
|
|
||||||
|
Suivez les instructions suivante :
|
||||||
|
|
||||||
|
1. Clonez le [dépôt de hugo](http://github.com/spf13/hugo)
|
||||||
|
2. Allez dans ce dépôt
|
||||||
|
3. Lancez Hugo en mode serveur et compilez la documentation
|
||||||
|
4. Ouvrez votre navigateur sur http://localhost:1313
|
||||||
|
|
||||||
|
Voici les commandes génériques correspondantes :
|
||||||
|
|
||||||
|
git clone https://github.com/spf13/hugo
|
||||||
|
cd hugo
|
||||||
|
/chemin/ou/vous/avez/installe/hugo server --source=./docs
|
||||||
|
> 29 pages created
|
||||||
|
> 0 tags index created
|
||||||
|
> in 27 ms
|
||||||
|
> Web Server is available at http://localhost:1313
|
||||||
|
> Press ctrl+c to stop
|
||||||
|
|
||||||
|
Lorsque vous avez cela, continuez le reste de ce guide sur votre version locale.
|
||||||
|
|
||||||
|
## Étape 3. Changer le site de documentation
|
||||||
|
|
||||||
|
Arrêtez le processus de Hugo en pressant ctrl+c.
|
||||||
|
|
||||||
|
Maintenant, nous allons relancer hugo, mais cette fois avec Hugo en mode de
|
||||||
|
surveillance.
|
||||||
|
|
||||||
|
/chemin/vers/hugo/de/l-etape/1/hugo server --source=./docs --watch
|
||||||
|
> 29 pages created
|
||||||
|
> 0 tags index created
|
||||||
|
> in 27 ms
|
||||||
|
> Web Server is available at http://localhost:1313
|
||||||
|
> Watching for changes in /Users/spf13/Code/hugo/docs/content
|
||||||
|
> Press ctrl+c to stop
|
||||||
|
|
||||||
|
Ouvrez votre [éditeur favori](https://vim.spf13.com) et changer l'une des
|
||||||
|
sources des pages de contenu.
|
||||||
|
Open your [favorite editor](http://vim.spf13.com) and change one of the source
|
||||||
|
content pages. Que diriez-vous de modifier ce fichier pour *résoudre une faute
|
||||||
|
de typo*.
|
||||||
|
|
||||||
|
Les fichiers de contenu peuvent être trouvés dans `docs/content/`. Sauf
|
||||||
|
indication contraire, les fichiers sont situés au même emplacement relatif que
|
||||||
|
l'URL, dans notre cas `docs/content/overview/quickstart.md`.
|
||||||
|
|
||||||
|
Modifiez et sauvegardez ce fichier. Notez ce qu'il se passe dans le terminal.
|
||||||
|
|
||||||
|
> Change detected, rebuilding site
|
||||||
|
|
||||||
|
> 29 pages created
|
||||||
|
> 0 tags index created
|
||||||
|
> in 26 ms
|
||||||
|
|
||||||
|
Rechargez la page dans votre navigateur et voyez que le problème de typo est
|
||||||
|
maintenant résolu.
|
||||||
|
|
||||||
|
Notez à quel point cela a été rapide. Essayez de recharger le site avant qu'il
|
||||||
|
soit fini de compiler.
|
||||||
|
Notice how quick that was. Try to refresh the site before it's finished
|
||||||
|
building. Je paris que vous n'y arrivez pas.
|
||||||
|
Le fait d'avoir des réactions presque instantanées vous permet d'avoir votre
|
||||||
|
créativité fluide sans avoir à attendre de longues compilations.
|
||||||
|
|
||||||
|
## Step 4. Amusez-vous
|
||||||
|
|
||||||
|
Le meilleur moyen d'apprendre quelque chose est de s'amuser avec.
|
||||||
|
|
@ -0,0 +1,218 @@
|
||||||
|
+++
|
||||||
|
author = "Auteur de migration"
|
||||||
|
categories = ["Hugo", "Jekyll"]
|
||||||
|
date = "2014-03-10"
|
||||||
|
description = ""
|
||||||
|
featured = ""
|
||||||
|
featuredalt = ""
|
||||||
|
featuredpath = ""
|
||||||
|
linktitle = ""
|
||||||
|
slug = "Migrer vers Hugo depuis Jekyll"
|
||||||
|
title = "Migrer vers Hugo depuis Jekyll"
|
||||||
|
type = "post"
|
||||||
|
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Déplacez le contenu statique vers `static`
|
||||||
|
Jekyll a une règle comme quoi tout répertoire qui ne commence pas par `_` sera
|
||||||
|
copié tel-quel dans le répertoire `_site`. Hugo garde tout le contenu statique
|
||||||
|
dans le répertoire `static`. Vous devez donc déplacer tout ce type de contenu
|
||||||
|
là-dedans. Avec Jekylll, l'arborescence ressemblant à ceci :
|
||||||
|
|
||||||
|
▾ <root>/
|
||||||
|
▾ images/
|
||||||
|
logo.png
|
||||||
|
<!--more-->
|
||||||
|
doit devenir
|
||||||
|
|
||||||
|
▾ <root>/
|
||||||
|
▾ static/
|
||||||
|
▾ images/
|
||||||
|
logo.png
|
||||||
|
|
||||||
|
En outre, vous allez devoir déplacer tous les fichiers présents à la racine vers
|
||||||
|
le répertoire `static`.
|
||||||
|
|
||||||
|
## Créez votre configuration Hugo
|
||||||
|
Hugo peut lire votre fichier de configuration au format JSON, YAML et TOML. Hugo
|
||||||
|
supporte également les paramètres de configuration. Plus d'informations sur la
|
||||||
|
[documentation de configuration Hugo](/overview/configuration/)
|
||||||
|
|
||||||
|
## Définiez votre répertoire de publication sur `_site`
|
||||||
|
La valeur par défaut pour Jekyll est d'utiliser le répertoire `_site` pour
|
||||||
|
publier le contenu. Pour Hugo, le répertoire de publication est `public`. Si,
|
||||||
|
comme moi, vous avez [lié `_site` vers un sous-module git sur la branche
|
||||||
|
`gh-pages`](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.ht
|
||||||
|
ml), vous allez vouloir avoir quelques alternatives :
|
||||||
|
|
||||||
|
1. Changez votre lien du sous-module `gh-pages` pour pointer sur public au lieu
|
||||||
|
de `_site` (recommendé).
|
||||||
|
|
||||||
|
git submodule deinit _site
|
||||||
|
git rm _site
|
||||||
|
git submodule add -b gh-pages
|
||||||
|
git@github.com:your-username/your-repo.git public
|
||||||
|
|
||||||
|
2. Ou modifiez la configuration de Hugo pour utiliser le répertoire `_site` au
|
||||||
|
lieu de `public`.
|
||||||
|
|
||||||
|
{
|
||||||
|
..
|
||||||
|
"publishdir": "_site",
|
||||||
|
..
|
||||||
|
}
|
||||||
|
|
||||||
|
## Convertir un thème Jekyll pour Hugo
|
||||||
|
C'est la majeure partie du travail. La documentation est votre ami.
|
||||||
|
Vous devriez vous référer à [la documentation des thèmes de Jekyll]
|
||||||
|
(http://jekyllrb.com/docs/templates/) si vous devez vous rafraîchir la mémoire
|
||||||
|
sur la façon dont vous avez construit votre blog et [les thèmes de Hugo]
|
||||||
|
(/layout/templates/) pour apprendre la manière de faire sur Hugo.
|
||||||
|
|
||||||
|
Pour vous donner un point de référence, la conversion du thème pour
|
||||||
|
[heyitsalex.net](http://heyitsalex.net/) ne m'a pris que quelques heures.
|
||||||
|
|
||||||
|
## Convertir les extensions Jekyll vers des shortcodes Hugo
|
||||||
|
Jekyll support les [extensions](http://jekyllrb.com/docs/plugins/); Hugo lui a
|
||||||
|
les [shortcodes](/doc/shortcodes/). C'est assez banal les porter.
|
||||||
|
|
||||||
|
### Implémentation
|
||||||
|
Comme exemple, j'utilise une extension pour avoir un [`image_tag`](https://githu
|
||||||
|
b.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc
|
||||||
|
06908ec/_plugins/image_tag.rb) presonnalisé pour générer les images avec une
|
||||||
|
légende sur Jekyll. J'ai vu que Hugo implémente un shortcode qui fait exactement
|
||||||
|
la même chose.
|
||||||
|
|
||||||
|
Extension Jekyll :
|
||||||
|
```
|
||||||
|
module Jekyll
|
||||||
|
class ImageTag < Liquid::Tag
|
||||||
|
@url = nil
|
||||||
|
@caption = nil
|
||||||
|
@class = nil
|
||||||
|
@link = nil
|
||||||
|
// Patterns
|
||||||
|
IMAGE_URL_WITH_CLASS_AND_CAPTION =
|
||||||
|
IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK =
|
||||||
|
/(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->
|
||||||
|
((https?:\/\/|\/)(\S+))(\s*)/i
|
||||||
|
IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
|
||||||
|
IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
|
||||||
|
IMAGE_URL = /((https?:\/\/|\/)(\S+))/i
|
||||||
|
def initialize(tag_name, markup, tokens)
|
||||||
|
super
|
||||||
|
if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK
|
||||||
|
@class = $1
|
||||||
|
@url = $3
|
||||||
|
@caption = $7
|
||||||
|
@link = $9
|
||||||
|
elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
|
||||||
|
@class = $1
|
||||||
|
@url = $3
|
||||||
|
@caption = $7
|
||||||
|
elsif markup =~ IMAGE_URL_WITH_CAPTION
|
||||||
|
@url = $1
|
||||||
|
@caption = $5
|
||||||
|
elsif markup =~ IMAGE_URL_WITH_CLASS
|
||||||
|
@class = $1
|
||||||
|
@url = $3
|
||||||
|
elsif markup =~ IMAGE_URL
|
||||||
|
@url = $1
|
||||||
|
end
|
||||||
|
end
|
||||||
|
def render(context)
|
||||||
|
if @class
|
||||||
|
source = "<figure class='#{@class}'>"
|
||||||
|
else
|
||||||
|
source = "<figure>"
|
||||||
|
end
|
||||||
|
if @link
|
||||||
|
source += "<a href=\"#{@link}\">"
|
||||||
|
end
|
||||||
|
source += "<img src=\"#{@url}\">"
|
||||||
|
if @link
|
||||||
|
source += "</a>"
|
||||||
|
end
|
||||||
|
source += "<figcaption>#{@caption}</figcaption>" if @caption
|
||||||
|
source += "</figure>"
|
||||||
|
source
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
Liquid::Template.register_tag('image', Jekyll::ImageTag)
|
||||||
|
```
|
||||||
|
|
||||||
|
Écrite en tant que shortcode Hugo:
|
||||||
|
```
|
||||||
|
<!-- image -->
|
||||||
|
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
|
||||||
|
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
|
||||||
|
<img src="{{ .Get "src" }}"
|
||||||
|
{{ if or (.Get "alt") (.Get "caption") }}
|
||||||
|
alt="{{ with .Get "alt"}}
|
||||||
|
{{.}}
|
||||||
|
{{else}}
|
||||||
|
{{ .Get "caption" }}
|
||||||
|
{{ end }}"
|
||||||
|
{{ end }} />
|
||||||
|
{{ if .Get "link"}}</a>{{ end }}
|
||||||
|
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||||
|
<figcaption>{{ if isset .Params "title" }}
|
||||||
|
{{ .Get "title" }}{{ end }}
|
||||||
|
{{ if or (.Get "caption") (.Get "attr")}}<p>
|
||||||
|
{{ .Get "caption" }}
|
||||||
|
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
|
||||||
|
{{ .Get "attr" }}
|
||||||
|
{{ if .Get "attrlink"}}</a> {{ end }}
|
||||||
|
</p> {{ end }}
|
||||||
|
</figcaption>
|
||||||
|
{{ end }}
|
||||||
|
</figure>
|
||||||
|
<!-- image -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### Utilisation
|
||||||
|
J'ai simplement changé :
|
||||||
|
```
|
||||||
|
{% image
|
||||||
|
full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg
|
||||||
|
"One of my favorite touristy-type photos. I secretly waited for the
|
||||||
|
good light while we were "having fun" and took this. Only regret: a
|
||||||
|
stupid pole in the top-left corner of the frame I had to clumsily get
|
||||||
|
rid of at post-processing."
|
||||||
|
->http://www.flickr.com/photos/alexnormand/4829260124/in/
|
||||||
|
set-72157624547713078/ %}
|
||||||
|
```
|
||||||
|
|
||||||
|
pour cela (cet exemple utilise une version légèrement étendue nommée `fig`,
|
||||||
|
différente de la `figure` intégrée) :
|
||||||
|
|
||||||
|
```
|
||||||
|
{{%/* fig class="full"
|
||||||
|
src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg"
|
||||||
|
title="One of my favorite touristy-type photos. I secretly waited for the
|
||||||
|
good light while we were having fun and took this. Only regret: a stupid
|
||||||
|
pole in the top-left corner of the frame I had to clumsily get rid of at
|
||||||
|
post-processing."
|
||||||
|
link="http://www.flickr.com/photos/alexnormand/4829260124/in/
|
||||||
|
set-72157624547713078/" */%}}
|
||||||
|
```
|
||||||
|
Comme bonus, les paramètres nommés des shortcodes sont plus lisibles.
|
||||||
|
|
||||||
|
## Touches finales
|
||||||
|
### Corriger le contenu
|
||||||
|
Suivant le nombre de modifications que vous avez effectué sur chaque articles
|
||||||
|
avec Jekyll, cette étape requierra plus ou moins d'efforts. Il n'y a pas de
|
||||||
|
règles rigoureuses ici, si ce n'est que `hugo server --watch` est votre ami.
|
||||||
|
Testez vos modifications et corrigez les erreurs au besoin.
|
||||||
|
|
||||||
|
### Nettoyez le tout
|
||||||
|
Vous voudrez sûrement supprimer votre configuration Jekyll maintenant que tout
|
||||||
|
est fini. Exact, pensez à supprimer tout ce qui est inutilisé.
|
||||||
|
|
||||||
|
## Un exemple pratique
|
||||||
|
[Hey, it's Alex](http://heyitsalex.net/) a été migré de Jekyll vers Hugo en
|
||||||
|
moins de temps qu'une journée père enfant. Vous pouvez trouver toutes les
|
||||||
|
modification en regardant ce [diff](https://github.com/alexandre-normand/alexand
|
||||||
|
re-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b
|
||||||
|
81495423294208cc74d610).
|
||||||
Loading…
Reference in New Issue