Jekyll - noelno/dovelei GitHub Wiki

Jekyll ?

Jekyll, pourquoi ?

Intérêt

Temps de chargement imbattable, simple pour un dev

Limites

  • peu de code tiers existant (thèmes et plugins)
  • pas en PHP donc :
    • mise en oeuvre plus complexe que de simplement acheter un mutualisé OVH
    • oblige à externaliser la plupart des fonctionnalités nécessitant la récupération de données utilisateur (formulaires : commentaires, formulaires de contact…) ce qui crée des dépendances à de multiples services

Jekyll, pour quoi ?

  • pour des sites avec beaucoup de contenu et peu de fonctionnalités
  • pour des sites e-commerce out-of-the-box

Installation

Pour MacOS

Pré-requis : Homebrew + Xcode developer

Installer ruby (utiliser la version ruby pré-installée affiche des erreurs de permission)

 $ brew install ruby

Redémarrer le Terminal, et installer Jekyll

 $ gem install jekyll

Pour Windows

  • Installer RubyInstaller (dernière version de Ruby+Devkit)
  • Lancer gem install jekyll bundler
  • Vérifier que l'installation a fonctionné : jekyll -v
  • Créer le dossier de travail et se rendre à son emplacement, et créer dedans un fichier appelé Gemfile (sans extension, juste Gemfile)
  • Écrire dans ce fichier :
source 'https://rubygems.org'

gem 'jekyll'
gem 'wdm', '~> 0.1.0'
  • Lancer le gemfile : bundle install pour installer wdm, nécessaire pour que jekyll serve fonctionne correctement.

Configuration

Serveur

Créer le dossier de travail et se rendre à son emplacement, puis lancer le serveur de Jekyll

 $ jekyll serve

Pages

Créer une page index.html commençant par deux fois trois tirets.

index.html :

---
---
<!DOCTYPE html>
…

Inclusion

Fonctionne comme en PHP natif

  • placer le(s) fichier(s) à inclure dans un nouveau sous-dossier _includes
  • les rattacher à la page courante avec la syntaxe {% include mon_fichier_a_inclure.html %}
  • ajouter un front matter en début du fichier qui inclut :
---
---

Templates

Pour ne pas avoir à utiliser include sur toutes les pages. Comme les templates files Wordpress.

  • placer le(s) template(s) dans un nouveau sous-dossier _layouts
  • spécifier {{ content }} dans la zone de contenu du template
  • les rattacher à la page courante avec le front matter :
---
layout: default
---

Un layout peut hériter d’un autre layout

_layouts/post.html :

---
layout: default
---
<h3>{{ page.title }}</h3>
<p>{{ page.date | date: '%B %d, %Y' }}</p>

{{ content }}

Le layout post s’imbrique dans le layout default.

Variables

Un peu comme sur AngularJS :

  • déclarer sa variable personnalisée dans le front matter :
---
layout: default
titre: Bonjour le monde !
---

Ces valeurs sont stockées par défaut dans la variable page.

  • l’afficher dans le corps de la page avec la syntaxe entre double parenthèses : {{ page.titre }}
  • pour les objets, ils sont déclarés sous forme de liste, avec un tiret pour chaque propriété de l’objet
testimonials:
  - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business.
    image: "/images/joice.jpeg"
    name: Joice Carmold
  - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.
    image: "/images/peter.jpeg"
    name: Peter Rottenburg
  - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all.
    image: "/images/gibblesto.jpeg"
    name: D. and G. Gibbleston

Structures

for : on peut itérer sur l’objet avec un for…in

  {% for testimonial in page.testimonials %}
    <blockquote class="testimonial">
      <p class="testimonial-message">{{ testimonial.message }}</p>
      <p class="testimonial-author">
        <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }}
      </p>
    </blockquote>
  {% endfor %} 

Posts

Pour publier un nouveau post, il faut :

  • l’écrire au format souhaité (par exemple markdown)
  • lui donner un titre au format AAAA-MM-JJ-mon-titre.md (si la date > aujourd’hui, le post ne s’affiche pas)
  • définir dans son front matter le layout associé, la catégorie et toutes les métadonnées utiles
  • le mettre dans le sous-répertoire _posts

Tous les posts sont automatiquement mémorisés dans la variable globale site.posts. Il est possible d’itérer dessus pour afficher la liste des posts :

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

Collections

Comme les custom posts type de Wordpress

Créer le fichier _config.yml à la racine du site, et y ajouter la config suivante :

collections:
  staff_members:
    output: false

(staff_members étant à remplacer par le nom de la collection) Interrompre jekyll serve (ctrl + c) et le relancer pour que le fichier _config.yml soit pris en compte.

Source

https://www.smashingmagazine.com/2017/04/jekyll-wordpress-developers/

⚠️ **GitHub.com Fallback** ⚠️