Hugo - Shortcode pour les parties d'échecs de Lichess

Mis à jour le 09/10/2022

Code source du shortcode

Le fichier source HTML du shortcode layouts/shortcodes/lichess.html contient :

{{- $s := .Get "src" -}}
{{- $w := .Get "width" -}}
{{- $h := .Get "height" -}}
{{- $t := .Get "title" -}}

<div class="lichess">
  <iframe src="{{- $s -}}"
    {{- with $t -}}title="{{ . }}"{{- end -}}
    {{- with $w -}}width="{{ . }}"{{- end -}}
    {{- with $h -}}height="{{ . }}"{{- end -}}>
  </iframe>
</div>

Avec pour les styles associés :

.lichess {
  text-align: center;
}
.lichess > iframe {
  border: 4px solid black;
}

Et au format SASS :

.lichess
  text-align: center
  iframe
    border: 4px solid black

Utilisation du shortcode

Par exemple, avec :

{{< lichess src="https://lichess.org/study/embed/T2uBqZJH/vGAj5Ztx" >}}

On obtient la fameuse partie du siècle entre Donald Byrne et Bobby Fischer disputée à New York le 17 octobre 1956 :

Noter que cliquer sur l'icône au coin en bas à droite permet d'ouvrir la partie dans une nouvelle fenêtre.

Paramètres pour l'échiquier

Le style de l'échiquier peut être modifié avec les paramètres suivants (ces valeurs sont reprises de la page Webmasters • lichess.org :

• theme : blue, blue2, blue3, blue-marble, canvas, wood, wood2, wood3, wood4, maple, maple2, brown, leather, green, marble, green-plastic, grey, metal, olive, newspaper, purple, purple-diag, pink, ic, horsey
• pieceSet : cburnett, merida, alpha, pirouetti, chessnut, chess7, reillycraig, companion, riohacha, kosal, leipzig, fantasy, spatial, california, pixel, maestro, fresca, cardinal, gioco, tatiana, staunty, governor, dubrovny, icpieces, shapes, letter, horsey, anarcandy
• bg : light, dark

Par exemple :

{{< lichess src="https://lichess.org/study/embed/T2uBqZJH/vGAj5Ztx"
    width="80%" height="400px"
    params="theme=green&bg=light&pieceSet=staunty" >}}

Donne :