Composants d’inclusion

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

Vue d’ensemble

_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 inclusions

Utilisation de base

{% include navigation/navbar.html %}

Avec des paramètres

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

Inclusion conditionnelle

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

Inclusions d’analyse

Utilisation

{% include analytics/posthog.html %}

Inclusions de composants

Exemple de carte d’article

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

Carte d’auteur

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

Inclusions de contenu

Inclusion de la table des matières

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

Inclusion des commentaires

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

Inclusions principales

Utilisation de la mise en page

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

Inclusions de navigation

Barre latérale avec navigation

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’inclusion :

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

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

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

Inclusions de page d’accueil

Utilisation

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

Includes de statistiques

Créer des includes personnalisés

Include de base

<!-- _includes/components/custom.html -->
<div class="custom-component">
  <h3></h3>
  <p></p>
</div>

Avec des paramètres

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

Avec des valeurs par défaut

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

Contenu conditionnel

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

Bonnes pratiques

Documentation des paramètres

Ajoutez des commentaires en haut des includes :

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

Gestion des erreurs

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

Performance

• É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

1. Copiez l’include du thème vers votre _includes/
2. Modifiez selon vos besoins
3. 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

1. Vérifiez que le chemin du fichier est correct
2. Vérifiez que le fichier existe
3. Recherchez les fautes de frappe dans le nom du fichier

Paramètre qui ne fonctionne pas

1. Vérifiez que le nom du paramètre correspond
2. Vérifiez les paramètres requis
3. Déboguez avec nil

Boucle infinie

1. Recherchez les includes circulaires
2. Ajoutez des garde-fous pour la récursion
3. Utilisez une limite de profondeur

Ressources associées

• Layouts
• Liquid de Jekyll
• Intégration Bootstrap

Référence technique

Pour les détails destinés aux contributeurs (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 5 Integration in Zer0-Mistakes

  Bootstrap 5 Integration]]