Composants Include¶

Le thème Zer0-Mistakes inclut plus de 70 composants réutilisables organisés par catégorie.

Aperçu¶

_includes/
├── analytics/     # Analytics integrations
├── components/    # UI components
├── content/       # Content rendering
├── core/          # Core layout elements
├── docs/          # Documentation specific
├── landing/       # Landing page components
├── navigation/    # Navigation elements
└── stats/         # Statistics dashboard

Utilisation des includes¶

Utilisation de base¶

{% raw %}{% include navigation/navbar.html %}{% endraw %}

Avec des paramètres¶

{% raw %}{% include components/post-card.html post=post %}{% endraw %}

Include conditionnel¶

{% raw %}{% if page.toc %}
  {% include content/toc.html %}
{% endif %}{% endraw %}

Includes d'analytique¶

Include	Objet
`analytics/google-analytics.html`	Google Analytics 4
`analytics/google-tag-manager-head.html`	Script GTM head
`analytics/google-tag-manager-body.html`	GTM body noscript
`analytics/posthog.html`	Analytique PostHog

Utilisation¶

{% raw %}{% include analytics/posthog.html %}{% endraw %}

Includes de composants¶

Include	Objet
`components/author-card.html`	Carte d'informations sur l'auteur
`components/cookie-consent.html`	Bannière de cookies RGPD
`components/mermaid.html`	Chargeur de diagrammes Mermaid
`components/post-card.html`	Carte d'article de blog
`components/preview-image.html`	Gestionnaire d'image de prévisualisation
`components/search-modal.html`	Fenêtre modale de recherche
`components/searchbar.html`	Stub de recherche de style Algolia obsolète (utilisez `search-modal.html`)
`components/theme-info.html`	Fenêtre modale de version du thème

Exemple de carte d'article¶

{% raw %}{% for post in site.posts limit: 3 %}
  {% include components/post-card.html post=post %}
{% endfor %}{% endraw %}

Carte d'auteur¶

{% raw %}{% include components/author-card.html
   name=page.author
   avatar="/assets/images/avatar.png"
%}{% endraw %}

Includes de contenu¶

Include	Objet
`content/giscus.html`	Commentaires GitHub Discussions
`content/intro.html`	Introduction de page
`content/seo.html`	Balises meta SEO
`content/sitemap.html`	Entrée du sitemap
`content/toc.html`	Table des matières

Include TOC¶

{% raw %}{% if page.toc != false %}
  {% include content/toc.html %}
{% endif %}{% endraw %}

Include de commentaires¶

{% raw %}{% if page.comments != false and site.giscus.enabled %}
  {% include content/giscus.html %}
{% endif %}{% endraw %}

Includes principaux¶

Include	Objet
`core/branding.html`	Logo et titre du site
`core/footer.html`	Pied de page
`core/head.html`	Section head HTML
`core/header.html`	En-tête/barre de navigation de page

Utilisation de la mise en page¶

{% raw %}<!DOCTYPE html>
<html>
  <head>
    {% include core/head.html %}
  </head>
  <body>
    {% include core/header.html %}
    {{ content }}
    {% include core/footer.html %}
  </body>
</html>{% endraw %}

Include	Objet
`navigation/breadcrumbs.html`	Fil d'Ariane
`navigation/nav_list.html`	Liste de navigation
`navigation/nav-tree.html`	Navigation en arborescence
`navigation/navbar.html`	Barre de navigation principale
`navigation/sidebar-config.html`	Résout le mode/titre/icône effectif de la barre latérale (page → collection → site)
`navigation/sidebar-nav.html`	Affiche le mode de barre latérale résolu
`navigation/sidebar-categories.html`	Barre latérale des catégories/étiquettes (articles par terme de taxonomie)
`navigation/sidebar-folders.html`	Barre latérale de collection (arborescence de dossiers repliable)
`navigation/sidebar-left.html`	Panneau de barre latérale gauche
`navigation/sidebar-right.html`	Barre latérale droite (TOC)

Le mode de barre latérale provient de la clé de front matter sidebar.nav (ou d'une valeur par défaut de collection/site), et non d'un paramètre d'include :

sidebar:
  nav: docs   # auto | collection | categories | tags | <_data/navigation file>

{% raw %}{% include navigation/sidebar-left.html %}{% endraw %}

Consultez Navigation par barre latérale pour la référence complète des modes et options.

Includes de page d'accueil¶

Include	Objet
`landing/landing-install-cards.html`	Options d'installation
`landing/landing-quick-links.html`	Liens d'action rapide

Utilisation¶

{% raw %}{% include landing/landing-install-cards.html %}{% endraw %}

Includes de statistiques¶

Include	Objectif
`stats/stats-categories.html`	Statistiques par catégorie
`stats/stats-header.html`	En-tête de la page de statistiques
`stats/stats-metrics.html`	Affichage des métriques
`stats/stats-no-data.html`	État vide
`stats/stats-overview.html`	Cartes de vue d'ensemble
`stats/stats-tags.html`	Nuage de tags

Créer des includes personnalisés¶

Include de base¶

<!-- _includes/components/custom.html -->
<div class="custom-component">
  <h3>{{ include.title }}</h3>
  <p>{{ include.content }}</p>
</div>

Avec paramètres¶

{% raw %}{% include components/custom.html
   title="My Title"
   content="My content"
%}{% endraw %}

Avec valeurs par défaut¶

{% raw %}{% assign title = include.title | default: "Default Title" %}
<h3>{{ title }}</h3>{% endraw %}

Contenu conditionnel¶

{% raw %}{% if include.show_icon %}
  <i class="bi bi-{{ include.icon }}"></i>
{% endif %}{% endraw %}

Bonnes pratiques¶

Documentation des paramètres¶

Ajoutez des commentaires en haut des includes :

{% raw %}<!--
  Include: post-card.html
  Parameters:
    - post (required): Post object
    - show_excerpt (optional): Show excerpt, default true
    - show_date (optional): Show date, default true
-->{% endraw %}

Gestion des erreurs¶

{% raw %}{% if include.post %}
  <!-- render post card -->
{% else %}
  <!-- error: post required -->
{% endif %}{% endraw %}

Performances¶

Évitez les boucles imbriquées dans les includes
Utilisez des captures pour la logique complexe
Mettez en cache les opérations coûteuses

Remplacer les includes du thème¶

Copier et modifier¶

Copiez l'include du thème vers votre _includes/
Modifiez selon vos besoins
Jekyll utilise votre version

Vérifier l'emplacement du thème¶

bundle show jekyll-theme-zer0
# Copy includes from gem location

Dépannage¶

Include introuvable¶

Vérifiez que le chemin du fichier est correct
Vérifiez que le fichier existe
Recherchez des fautes de frappe dans le nom du fichier

Paramètre ne fonctionne pas¶

Vérifiez que le nom du paramètre correspond
Vérifiez les paramètres obligatoires
Déboguez avec ⟦44⟧

Boucle infinie¶

Recherchez les includes circulaires
Ajoutez des garde-fous pour la récursion
Utilisez une limitation de profondeur

Voir aussi¶

Référence technique¶

Pour les détails de niveau contributeur (référence de l'API des composants, paramètres des includes, extension de la bibliothèque de composants) :

Composants → docs/ui/components.md

Voir aussi¶

[[Customization]]
[[Layouts]]
[[Bootstrap Integration]]

Composants Include¶

Aperçu¶

Utilisation des includes¶

Utilisation de base¶

Avec des paramètres¶

Include conditionnel¶

Includes d'analytique¶

Utilisation¶

Includes de composants¶

Exemple de carte d'article¶

Carte d'auteur¶

Includes de contenu¶

Include TOC¶

Include de commentaires¶

Includes principaux¶

Utilisation de la mise en page¶

Includes de navigation¶

Barre latérale avec navigation¶

Includes de page d'accueil¶

Utilisation¶

Includes de statistiques¶

Créer des includes personnalisés¶

Include de base¶

Avec paramètres¶

Avec valeurs par défaut¶

Contenu conditionnel¶

Bonnes pratiques¶

Documentation des paramètres¶

Gestion des erreurs¶

Performances¶

Remplacer les includes du thème¶

Copier et modifier¶

Vérifier l'emplacement du thème¶

Dépannage¶

Include introuvable¶

Paramètre ne fonctionne pas¶

Boucle infinie¶

Voir aussi¶

Référence technique¶

Voir aussi¶