Voici mon nouveau thème : Jane. Je l’ai récupéré sur https://themes.gohugo.io/ puis modifié.
Il est beaucoup plus simple et clair que le précédent. Voici quelques explications pour mieux l’utiliser. Comment afficher une image, une galerie, la coloration syntaxique, etc.

Les images

Une image simple

![Pour une image placée dans `static/images`](../../images/example.jpg)

Alphago

Une image avec un titre

{{< figure src="../../images/example.jpg" title="image avec un titre" >}}

François Béranger

Une image avec légende

{{< figure src="../../images/example.jpg" caption="image avec légende" >}}

Feh, un visualisateur d'images

Feh, un visualisateur d'images

Utilisation su shortcode {{< figure >}}

Spécification du fichier image :

  • {{< figure src="thumb.jpg" link="image.jpg" >}} utilise thumb.jpg comme vignette
  • {{< figure src="image.jpg" >}} utilise image.jpg pour la vignette et la lightbox

Paramètres optionnels :

  • Toutes les options du shortcode figure intégré dans Hugo fonctionnent normalement (src, link, title, caption, etc.)
  • size (e.g. size="1024x768") prédéfinit la taille de l’image pour PhotoSwipe.
  • class vous permet de définir les classes personnalisées de votre choix sur la balise <figure>.

Une galerie simple

{{< figure title="titre">}}
{{< gallery dir="/images/le répertoire d'images/" >}}
{{< /figure >}}

Les images sont automatiquement sous-titrées avec le nom du fichier.

Paramètres optionnels :

  • caption-position - détermine la position des légendes sur l’image. Options :
    • bottom (défaut)
    • center
    • none masque les légendes sur la page (elles ne s’afficheront que dans PhotoSwipe)
  • caption-effect - détermine si / comment les légendes apparaissent en survol. Options:
    • slide (défaut)
    • fade
    • none (légende toujours visible)
  • hover-effect - determines if/how images change upon hover. Options :
    • zoom (default)
    • grow
    • shrink
    • slideup
    • slidedown
    • none
  • hover-transition - détermine si / comment les images changent en survol. Options :
    • not set - smooth transition (défaut)
    • none - hard transition

Exemple

Enki Bilal

La coloration syntaxique

Le plus simplement

1
2
3
4
5
~~~
<?php
  echo 'Hello, World!';
?>
~~~

Résultat :

<?php
  echo 'Hello, World!';
?>

Utiliser le shortcode highlight

{{< highlight php "linenos=table" >}}
<?php
  echo 'Hello, World!';
?>
{{< /highlight >}}

Résultat : le langage utilisé est affiché (PHP), les lignes de code sont numérotées (linenos=table).

1
2
3
<?php
  echo 'Hello, World!';
?>

Les langages

De nombreux langages peuvent être utilisés : Syntax Highlighting | Hugo

Les citations

{{< blockquote >}}
 Une petite citation.
{{< /blockquote >}}

Résultat : Une citation simple

Une petite citation.

{{< blockquote author="Govez" link="https://www.google.com" title="Google" >}}
Citation de Govez et liens vers https://www.google.com avec le titre “Google.
{{< /blockquote >}}

Résultat : Une citation avec un nom d’auteur et un lien.

Citation de Govez et liens vers https://www.google.com avec le titre “Google.

Texte extensible

Le shortcode Expand affiche une section de texte extensible / réductible sur votre page. Voici un exemple :

{{< expand "Est-ce que ce tutoriel est utile ?" >}}
Oui !
{{< /expand >}}

Résultat : cliquez sur le cadre pour obtenir la réponse.

Est-ce que ce tutoriel est utile ? Oui !

Notes & avertissements

{{% notice note %}}
Une note
{{% /notice %}}
note

Une note

{{% notice warning %}}
Attention !
{{% /notice %}}
warning

Attention !

Notes de bas de page

[^footnote] permet de créer une note de bas de page.

[^footnote]: ici le *texte* de la **footnote****.

Résultat : Une note de bas de page 1.

Passez la souris sur l’indice de la note de bas de page pour voir le contenu de la note.

Diaporama

Exemple

bo.jpg buster.png buzz.jpg etch.jpg ham.jpg jessie.jpg lenny.jpg potato.jpg rex.jpg sarge.jpg sid.jpg slink.jpg squeeze.png stretch.jpg wheezy.jpg woody.jpg
Les personnages de Toystory

Explications

Placer dans le répertoire /layouts/shortcodes de votre thème le fichier slide.html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{{ $fadein := 2 }}
{{ $visible := 4 }}
{{ $param := .Get 0 }}
{{ $localFolder := printf "/static%s/" $param }}

{{ $files := sort (readDir $localFolder) }}
{{ $numberOfFiles := len $files }}
{{ $animationDuration := mul (add $fadein $visible) $numberOfFiles }}

<div class="slider">
    {{ range $index, $value := $files }}
    {{ $src := strings.TrimPrefix "/static" (add $localFolder $value.Name) }}
    <img src="{{ $src | relURL }}" id="image_{{ $index }}" alt="{{ $value.Name }}" />
    {{ end }}
</div>

 <style>
    .slider {
        padding-bottom: 70%;
        width: 100%;
        height: 0;
        position: relative;
    }    
    .slider img {
        max-width: 80%;
        height: auto;
        position: absolute;
        opacity: 0;
        animation: slide infinite {{$animationDuration}}s;
    }

    {{ $x := div 100.0 $animationDuration }}
    {{ $p0 := 0 }}
    {{ $p1 := mul $x $fadein }}
    {{ $p2 := mul $x (add $fadein $visible) }}
    {{ $p3 := mul $x (add (add $fadein $visible) $fadein) }}

    @keyframes slide {
        {{ $p0 }}% { opacity: 0; }
        {{ $p1 }}% { opacity: 1; }
        {{ $p2 }}% { opacity: 1; }
        {{ $p3 }}% { opacity: 0; }
    }

    {{ range $index, $value := $files }}
    {{ $delay := mul (add $fadein $visible) $index }}
    .slider img:nth-child({{add $index 1}}){animation-delay:{{$delay}}s;}
    {{ end }}
</style>

Choisir le répertoire où sont placées les images puis lancer :

{{< slide "/images/répertoire/" >}}

Pour spécifier la taille et la position du diaporama, il faudra «jouer» avec le CSS.
Dans l’exemple ci-dessus :

1
2
3
4
5
.slider{
  margin: 0 28% 0 auto;
  width:37%;
  padding-bottom: 32%;
 }

  1. Voici le texte de la note de bas de page. [return]