Vous ne le savez peut-être pas, mais ce blog est construit avec Jekyll, un générateur de site statique. Jekyll est un excellent outil pour créer des sites web et des blogs simples. Il se base sur la syntaxe de templating Liquid. Cela permet d’inclure du contenu dynamique dans des fichiers HTML statiques. C’est une fonctionnalité très puissante et je me demandais si je pouvais m’en servir en dehors de Jekyll.

Créer des templates avec Liquid

Le réponse est oui ! Vous pouvez tout à fait utiliser le templating Liquid dans vos fichiers HTML statiques. Voici les étapes à suivre:

  1. Installer LiquidJS:

    npm install -g liquidjs

  2. Créez un fichier que vous souhaitez inclure dans plusieurs pages. Par exemple head.liquid qui contient l’en-tête de toutes vos pages HTML:

    <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Beaucoup de métadonnées -->

  <title>{{ title }}</title>
  <link rel="stylesheet" href="styles.css">
</head>

  3. Ensuite, créez un fichier de template index.liquid:

    <!DOCTYPE html>
<html lang="fr">
{% include 'head.liquid', title: 'Titre de la Page' %}
<body>
  Contenu de la Page
</body>
</html>

    Remarquez comment la variable title est passée au template head.liquid. Cela vous permet de définir un titre différent pour chacune de vos pages.

  4. Enfin, exécutez le CLI LiquidJS pour générer le HTML:

     npx liquidjs -t @index.liquid -o index.html

    Ce qui générera le fichier index.html suivant:

     <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!-- Beaucoup de métadonnées -->

   <title>Titre de la Page</title>
   <link rel="stylesheet" href="styles.css">
 </head>

 <body>
   Contenu de la Page
 </body>
 </html>

Et voilà ! Lorsque vous créerez votre prochaine page, vous pourrez réutiliser le fichier de template head.liquid et passer le titre de la page. C’est un exemple très simple mais vous pouvez bien sûr faire beaucoup plus avec le templating Liquid.

Utiliser LiquidJS dans votre application web

Pour inclure cet outil dans mon application web, j’ai en fait créé un Makefile pour automatiser le processus. La structure de ce projet est la suivante:

  • _includes/: Templates Liquid réutilisables (header, footer, etc…).
  • _layouts/: Structures des pages.
  • _pages/: Chaque page de l’application et leur contenu.
  • _static/: Fichiers statiques (images, styles, scripts, etc…).
  • www/: Répertoire de sortie pour les fichiers HTML compilés.

Dans l’exemple ci-dessus, les fichiers head.liquid et index.liquid iraient respectivement dans les répertoires _includes et _pages. Il n’y a pas de layouts dans cet exemple mais vous pouvez en ajouter dans le répertoire _layouts. Ils simplifient encore plus vos pages et vous permettent de n’avoir que du contenu dans vos fichiers de page.

# Dossiers du projet
SRC_DIR := .
INCLUDES_DIR := $(SRC_DIR)/_includes
LAYOUTS_DIR := $(SRC_DIR)/_layouts
STATIC_DIR := $(SRC_DIR)/_static
PAGES_DIR := $(SRC_DIR)/_pages
OUT_DIR := www

# Commande de compilation
CC := npx liquidjs --partials $(INCLUDES_DIR) --layouts $(LAYOUTS_DIR)

# Trouver tous les fichiers statiques pour les copier dans OUT_DIR
STATIC_FILES := $(shell find $(STATIC_DIR) -type f -not -name '.*')
OUTPUT_STATIC := $(STATIC_FILES:$(STATIC_DIR)/%=$(OUT_DIR)/%)

# Trouver tous les fichiers .liquid dans PAGES_DIR pour les compiler en .html
PAGE_TEMPLATES := $(shell find $(PAGES_DIR) -name '*.liquid')
OUTPUT_PAGES := $(PAGE_TEMPLATES:$(PAGES_DIR)/%.liquid=$(OUT_DIR)/%.html)

# Règle pour tout compiler
all: $(OUT_DIR) $(OUTPUT_STATIC) $(OUTPUT_PAGES)

# Règle pour créer le répertoire de sortie
$(OUT_DIR):
	mkdir -p $(OUT_DIR)

# Règle pour copier les fichiers statiques
$(OUT_DIR)/%: $(STATIC_DIR)/%
	@mkdir -p $(dir $@)
	cp -r $< $@

# Règle pour compiler les fichiers .liquid en .html
$(OUT_DIR)/%.html: $(PAGES_DIR)/%.liquid $(INCLUDES_DIR)/* $(LAYOUTS_DIR)/*
	@mkdir -p $(dir $@) # Créer le répertoire de sortie si nécessaire
	$(CC) -t @$< -o $@

# Nettoyer les fichiers compilés
clean:
	rm -rf $(OUT_DIR)

re: clean all

.PHONY: all clean

Lancez simplement la commande make et ce Makefile compilera tous les fichiers .liquid dans _pages et produira les fichiers .html résultants dans le répertoire www. Vous pouvez ensuite servir www avec votre serveur web préféré.

Conclusion

Cette technique permet de réutiliser facilement de l’HTML sur votre site web sans avoir recours au copier-coller, au JavaScript ou à une forme de SSR comme le PHP ou les SSI.