Memento

Table des matières

Commandes essentielles

Créer un nouvel article :

$ hugo new post/nouveau.md

Générer le serveur :

$ hugo server --buildDrafts

Ajouter un thème :

$ cd themes
$ git clone https://github.com/dim0627/hugo_theme_robust.git
$ cd ..
$ hugo server --theme=hugo_theme_robust --buildDrafts 

Rsync permet en une commande de mettre son site à jour.

$ hugo && rsync -r -v -rz --checksum --delete --exclude="/mp3/***" --exclude="/videos/***" --exclude="/images/***" --exclude="/fichiers/***" --exclude="/pages_html/***" public/* govez@ftp.tuxfamily.org:/home/debiandoc/pingouindoc.tuxfamily.org-web/htdocs/

La typographie Markdown

Aller à la ligne : 4 espaces

Écrire en gras : encadrer le mot par deux *
Écrire en italique : encadrer le mot par une *
Barrer un texte : encadrer le texte par deux ~

une ligne horizontale : écrire - - - entre les paragraphes

Les citations

Pour afficher un bloc de citation, commencez le paragraphe par un chevron fermant.

Les cons, ça ose tout ! C’est même à ça qu’on les reconnaît.
Lino Ventura, Les tontons flingueurs (1963)

>Les cons, ça ose tout ! C'est même à ça qu'on les reconnaît.
>Lino Ventura, Les tontons flingueurs (1963)

Les listes

liste non-ordonnée : mettre *, + ou - au début de chaque élément

  • premier
  • deuxième
  • troisième

liste ordonnée : mettre un nombre au début de chaque élément

  1. Premier
  2. Deuxième
  3. Troisième

liste avec sous-élément : (décaler d’un espace le sous-élément)

  • Premier
  • Deuxième
    • Sous élément
    • Sous élément
  • Troisième élément
  • Quatrième élément
    • Sous élément
    • Sous élément
  • Cinquième élément

Les textes longs

Séparer les deux parties de texte par < !- - more - -> la première partie sera affichée mais il faudra cliquer sur Lire la suite pour avoir le texte entier.

Les liens

Cliquez ici pour aller sur Google
Syntaxe :

[Cliquez ici pour aller sur Google](http://www.google.fr "Le site Google")    

Lien vers une autre page de mon site

[Lien vers une autre page de mon site](../about/index.html)  

Pour que les liens s’affichent dans un autre onglet, vous devez écrire dans le fichier de configuration (config.tombl) :

[blackfriday]
  hrefTargetBlank = true

Les tableaux

Année CA TVA TTC
2010 3 200 19,6 % 3 827,20
2011 6 500 19,6 % 7 774,00
2012 14 500 20,6 % 17 487,00

Syntaxe

Année | CA | TVA | TTC
| :--- | :---: | :---: | ---: |
2010 | 3 200 | 19,6 % | 3 827,20
2011 | 6 500 | 19,6 % | 7 774,00
2012 | 14 500 | 20,6 % | 17 487,00

C’est la seconde ligne du tableau Markdown qui va gérer les alignements des cellules.
En n’oubliant pas les pipes | pour marquer et séparer les cellules ainsi que les infos d’alignement :

  • Centré :- - -:
  • À droite - - -:
  • À gauche :- - -

Les images

On peut les insérer très simplement en utilisant du code Markdown : home

![home](/images/home.png "image en local")

Avec l’argument [img] l’image ne dépassera pas le cadre :

img

![img](/images/cupsong.jpg)  

Les vidéos

Syntaxe

<video width="largeur" poster="url_image" controls="controls">
<source src="url_video"  type="video/mp4"  />
Choisissez un navigateur plus récent compatible html5
</video>    
<em>titre</em>

Explications :

  • poster : est l’image d’accueil de la vidéo
  • width : correspond à la taille de la vidéo : je la mets en %
  • type : la vidéo peut être en mp4, webm ou ogg

Youtube

Repérer l’ID de la vidéo (sur Youtube par exemple) pour afficher la vidéo.
Syntaxe : {{% youtube w7Ft2ymGmfc %}}

 

Les iframes

Si vous souhaitez utiliser toute la largeur de la page, choisissez width=“100%”.

<iframe  src="url_iframe" width="largeur" height="hauteur"  allowfullscreen></iframe>

Une iframe « responsive »

Encadrer les balises <iframe> par <div class=“conteneur”> … </div>
Les propriétés width et height seront déterminées par le conteneur parent.

Le css

<style>
.conteneur {
	position: relative;
}
.conteneur iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

Les animations flash

Syntaxe

<embed src="url_swf">

Vous pouvez ajouter les options :

  • taille : width=“largeur” height=“hauteur”
  • couleur du fond : bgcolor=“#******” (code hexadécimal avec 6 caractères)
  • plein écran : allowfullscreen=“true” ou “false”
  • bordure : border=“1” en pixel

Insérer du code

Solution 1 : Faire une tabulation sur tout le bloc de code

Solution 2 : Encadrer le bloc de code par ~~~ nom_du_langage et ~~~

Exemples

Du HTML :

<section id="main">
  <div>
    <h1 id="title">{{ .Title }}</h1>
    {{ range .Data.Pages }}
      {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

Du CSS

a:visited {
   color: #265778;
   }

Du Ruby

print "Hello, World!\n"

Les émoticônes

Il faut ajouter dans votre fichier de configuration enableEmoji = true puis lancer (en enlevant les espaces) :

I : heart : Hugo 

Résultat : I ❤️ Hugo. Vous trouverez votre bonheur sur la liste des émoticônes. 😉