cybermonde.org

Aller au contenu | Aller au menu | Aller à la recherche

Tag - jekyll

Fil des billets

samedi 26 mars 2016

Ajouter une favicon à Jekyll

  • Copier le fichier favicon.ico à la racine du projet.
  • Modifier le fichier _includes/head.html comme suit (avant le </head>) :

<link rel="icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}">


vendredi 18 mars 2016

Jekyll et JSON

Comment exploiter le contenu d'un fichier JSON pour générer une page ?
  1. créer le répertoire _data
  2. y stocker le fichier de données colors.json :

    {
        "colorsArray":[{
                "colorName":"red",
                "hexValue":"#f00"
            },
            {
                "colorName":"green",
                "hexValue":"#0f0"
            },
            {
                "colorName":"blue",
                "hexValue":"#00f"
            },
            {
                "colorName":"cyan",
                "hexValue":"#0ff"
            },
            {
                "colorName":"magenta",
                "hexValue":"#f0f"
            },
            {
                "colorName":"yellow",
                "hexValue":"#ff0"
            },
            {
                "colorName":"black",
                "hexValue":"#000"
            }
        ]
    }

  3. créer le fichier colors.md à la racine :

    ---
    layout: page
    title: Colors
    permalink: /colors/
    ---
    <ul>
    {% for color in site.data.colors.colorsArray %}
      <li style="color:{{ color.hexValue }};">
          {{ color.colorName }}
      </li>
    {% endfor %}
    </ul>

    site.data.colors.colorsArray se décompose comme suit :

    • site.data : pour appeler des données
    • colors : nom du fichier de données
    • colorsArray : élément racine

    Documentation : https://jekyllrb.com/docs/datafiles/

mardi 15 mars 2016

Premiers pas avec Jekyll

Avant d'entamer la lecture de ce carnet de notes sur mes expériences avec Jekyll, je vous recommande la lecture de La mouvance statique et 7 Reasons to Use a Static Site Generator.

Article mis à jour le 17/03/2016

Lire la suite...