mirror of
				https://github.com/Wonderfall/hugo-WonderMod.git
				synced 2025-10-31 11:45:26 +01:00 
			
		
		
		
	Added french posts translation for testing internationalization (i18n) (#11)
This commit is contained in:
		 Rémy Jacquin
					Rémy Jacquin
				
			
				
					committed by
					
						 digitalcraftsman
						digitalcraftsman
					
				
			
			
				
	
			
			
			 digitalcraftsman
						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." | ||||
| canonifyurls = true | ||||
| 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" | ||||
							
								
								
									
										1190
									
								
								content/post/creating-a-new-theme.fr.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1190
									
								
								content/post/creating-a-new-theme.fr.md
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										352
									
								
								content/post/goisforlovers.fr.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										352
									
								
								content/post/goisforlovers.fr.md
									
									
									
									
									
										Normal file
									
								
							| @@ -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/> | ||||
							
								
								
									
										99
									
								
								content/post/hugoisforlovers.fr.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										99
									
								
								content/post/hugoisforlovers.fr.md
									
									
									
									
									
										Normal file
									
								
							| @@ -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. | ||||
							
								
								
									
										218
									
								
								content/post/migrate-from-jekyll.fr.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										218
									
								
								content/post/migrate-from-jekyll.fr.md
									
									
									
									
									
										Normal file
									
								
							| @@ -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). | ||||
		Reference in New Issue
	
	Block a user