mirror of
				https://github.com/Wonderfall/hugo-WonderMod.git
				synced 2025-10-31 03:45:24 +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." | 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" | ||||||
							
								
								
									
										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