Jekyll - noelno/dovelei GitHub Wiki
Temps de chargement imbattable, simple pour un dev
- 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
- pour des sites avec beaucoup de contenu et peu de fonctionnalités
- pour des sites e-commerce out-of-the-box
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
- 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 quejekyll serve
fonctionne correctement.
Créer le dossier de travail et se rendre à son emplacement, puis lancer le serveur de Jekyll
$ jekyll serve
Créer une page index.html
commençant par deux fois trois tirets.
index.html
:
---
---
<!DOCTYPE html>
…
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 :
---
---
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.
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
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 %}
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>
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.
https://www.smashingmagazine.com/2017/04/jekyll-wordpress-developers/