Guide de l’usage de Hugo

Cette documentation est un site statique généré avec Hugo.

Consulter la documentation officiel d’Hugo si vous n’êtes pas familier avec.

Pour enrichir le contenu, nous utilisons des composants réutilisables appelés “shortcodes”. Cette page sert de guide de style officiel pour leur utilisation. Merci de vous y référer pour toute contribution afin de maintenir une documentation claire et cohérente.

Shortcodes

Chaque shortcode est présenté avec un exemple fonctionnel, suivi du code source à copier/coller.

Vous pouvez créer des shortcodes mais pensez à les documenter !

Code

Pour insérer un bloc de code avec un nom de fichier et une étiquette de langage.

<p>input code here</p>

{{< code "custom" "étiquette" >}}

/*```html

<p>input code here</p>

```*/

{{< /code >}}

Notices

Pour afficher des blocs d’information stylisés afin d’attirer l’attention. Les types valides sont note, tip, conseil, info, warning, attention, prerequis.

{{< notice "note" >}}
Ceci est une note.
{{< /notice >}}

Accordéon

Pour créer des sections de contenu dépliables, idéal pour les FAQ.

{{< accordion-wrapper >}}
{{< accordion title="Qu'est-ce que Pristy ?" >}}
Pristy est une suite logicielle collaborative open source qui vous permet de gérer vos documents et processus métier en toute sécurité.
{{< /accordion >}}
{{< accordion title="Comment puis-je contribuer ?" >}}
Vous pouvez contribuer au code, à la documentation, à la traduction, ou en remontant des bugs. Consultez la section Communauté pour plus de détails !
{{< /accordion >}}
{{< /accordion-wrapper >}}

Badge

Pour ajouter de petites étiquettes colorées directement dans une ligne de texte.

Exemple concret

Utilisez des badges pour indiquer le statut d’une fonctionnalité ou un concept.

{{< badge "added" "Ajouté" >}}

Carte

card et card-wrapper

Pour présenter des liens ou des fonctionnalités de manière visuelle. Le shortcode card doit être imbriqué dans un card-wrapper.

{{< card-wrapper >}}

    {{< card
    title="Installation Facile"
    icon="fa-solid fa-download"
    description="Suivez notre guide pas à pas pour installer Pristy sur votre serveur."
    link="/admin-manual/exploitation/"
    label="Voir le guide">}}
    
    {{< card
    title="Interface Intuitive"
    icon="fa-solid fa-display"
    description="Découvrez une interface utilisateur claire et moderne."
    link="/user-manual/interfaces/"
    label="Explorer l'interface">}}
    
{{< /card-wrapper >}}

Card d’appel à l’action

card-cta et card-cta-wrapper

Une variante plus grande et plus visuelle de la carte, avec une image. Il faut utiliser 2 shortcodes imbriqués cart-cta & card-cta-wrapper.

Apprenez les bases en créant un site simple

Essayer le tutoriel

Commencez à utiliser Docbox sur votre site

Démarrage Rapide

{{< card-cta-wrapper >}}

    {{< card-cta
    title="Apprenez les bases en créant un site simple"
    image="/images/illustrations/illustration-2.png"
    label="Essayer le tutoriel"
    link="/community/getting-started/requirments/#docbox-installation">}}
    
    {{< card-cta
    title="Commencez à utiliser Docbox sur votre site"
    image="/images/illustrations/illustration-1.png"
    label="Démarrage Rapide"
    link="/community/getting-started/requirments/#welcome-to-docbox-router">}}

{{< /card-cta-wrapper >}}

Lien d’appel à l’action

cta-link

Un simple lien stylisé pour guider l’utilisateur vers une page clé.

{{< cta-link href="/community/documenting-the-doc/" text="Apprendre à documenter" >}}

Lister les pages enfant

Arborescence complète

Liste toutes les pages et sous-sections enfants de la page actuelle. Idéal pour un sommaire de section complet.

Si vous placez ce shortcode dans le fichier content/user-manual/_index.md, il affichera une liste de toutes les pages contenues dans la section “user-manual”, en respectant leur hiérarchie.

{{< lister-enfants-recursif >}}

Liste simple

Liste uniquement les pages directes (sans les sous-sections). Parfait pour une liste simple des articles d’une catégorie.

Si vous placez ce shortcode dans le fichier content/guides/_index.md, il affichera une liste des pages comme guides/guide-1.md et guides/guide-2.md, mais ignorera les pages d’un sous-dossier comme guides/avances/sujet-complexe.md.

{{< lister-pages-section >}}

Tableau à onglets

{{< tabs "nom-unique-du-groupe" >}}
{{< tab "Premier Onglet" >}}
Contenu du premier onglet.
{{< /tab >}}
{{< tab "Second Onglet" >}}
Contenu du second onglet.
{{< /tab >}}
{{< /tabs >}}

Image

{{< image src="/images/img-1.jpg" zoomable="true" >}}

Youtube video

{{< youtube 8cdO5mJnPws >}}