3.5.2 Créer l'entête HTML

L'entête HTML de VenC est défini dans le fichier header.html du répertoire chunks de votre thème. Ce fichier est réutilisé à chaque fois que VenC génère une page HTML. Les motifs VenC permettent de mettre en contexte cette portion du code pour l'adapter au contexte dans lequel il se trouve.

La structure de ce fichier ressemble à ça :

<!DOCTYPE HTML>
<html lang=".:GetBlogLanguage:.">
    <head>
        <meta charset="utf-8">
        <title>.:GetBlogName:. .:GetThreadName::| {value}:.</title>
        .:GetStyleSheets:.
        <link rel="stylesheet" href=".:GetRelativeRoot:./style.css" type="text/css">
        <meta name="description" content=".:GetBlogDescription:.">
    </head>
    <body>
    <!-- TOP LEVEL MENU, BANNER, ETC ... --> 

Enfin on remarque également que le contenu de ce fichier s'arrête à peu près à l'ouverture de la balise body. Nous pouvons insérer à ce niveau le code pour un menu latéral, avec l'index des catégories ou des chapitres de votre site. Ou bien il pourrait y avoir un nuage de mots-clés, ou la liste des périodes archivées. À vous de voir !

3.5.2.1 Créer un menu

Maintenant que nous avons vu comment se goupille l'entête, nous pouvons le compléter selon nos besoins.

Pour commencer, à la fin de notre fichier header.html nous allons rajouter la paire de balise suivante :

<header>
</header>

Nous y mettrons ici les éléments qui composent un menu générique :

Utiliser les deux premiers points peut être redondant dans la mesure ou VenC utilise la même source de données pour construire ces listes. En général, c'est soit l'un soit l'autre, mais nous verrons évidemment les deux cas de figure.

Concernant la liste d'archives, il faut noter qu'il s'agit d'une liste simple : il n'est pas possible pour le moment de la rendre hiérarchisée.

Enfin, et dans tous les cas, il faut rappeler que même si vous utilisez les motifs VenC correspondant à ces fonctionnalités, elles ne seront pas actives si vous ne dites pas explicitement à VenC de le faire.

En effet, ces listes sont dans la pratique un moyen de naviguer sur votre site et ceci implique donc que VenC a généré le contenu organisé correspondant. En l'occurrence, il faut s'assurer que dans votre fichier de configuration les options suivantes soient configurées à false pour activer, respectivement, les archives et les catégories :

VenC fonctionne de cette manière parce que la responsabilité de ce qui doit être généré relève de l'utilisateur final. C'est au thème de s'adapter et d'anticiper que l'utilisateur final veut ou ne veut pas générer tel ou tel contenu organisé. Si vous prévoyez de créer un thème et de le distribuer sur les Internets, il faudra donc en tenir compte.

3.5.2.2 Créer une liste d'archives

Avant toute chose, comme nous l'avons vu précédemment, il faut que dans votre fichier de configuration l'option disable_archives soit configurée correctement.

Entre les balises header que nous avons ajoutées à la fin du fichier header.html, nous allons ajouter le code suivant en utilisant le motif ForBlogArchives :

.:ForBlogArchives::{value}:: :. 

L'idée ici est d'itérer à travers la liste des archives de VenC, afin de récupérer la valeur de chaque élément de cette liste. Ici, la valeur correspond au nom de l'archive courante. Ce nom est défini par le format de date que vous avez indiqué dans votre fichier de configuration principale avec l'option archives_directory_name.

Mais évidemment le code ci-dessus ne suffit pas, puisque ce que nous voulons c'est une liste HTML de liens vers les archives. Du coup, faisons plutôt quelque chose comme ça :

<ul id="blogarchives">
  .:ForBlogArchives::
  <li class="blogarchivesitem">
    <a href="{path}" title="{value} ({count})">{value}</a>
  </li>
  ::
  :. 
</ul>

Ça n'a plus la même tête, hein ? En effet :

Avec ça, VenC va nous générer ce que nous voulons.

Cependant comme nous l'avons dit dans le chapitre 3.5.2.1, la bonne pratique est de faire en sorte que le thème, si l'on veut le distribuer, s'adapte à la configuration du blog. En effet, si jamais les archives sont désactivées, alors ForBlogArchives ne produira rien et on se retrouvera avec une paire de balises ul vide. Ça n'est pas très propre. C'est d'autant plus problématique quand la liste est décorée avec un titre ou est contenue dans une boîte.

Pour pallier ces problèmes, VenC permet de tester la configuration du projet afin d'adapter le thème à la situation avec le motif IfBlogMetadataIsTrue.

 
.:IfBlogMetadataIsTrue::disable_archives::
    <!-- Bloc HTML à conserver si la variable vaut `true` -->
    ::
    <!-- Bloc HTML à conserver si la variable vaut `false` -->
:.
 

Ici, ce qu'on teste c'est l'option disable_archives avec IfBlogMetadataIsTrue. Si elle vaut true, alors on ne fait rien. Sinon, on met le bloc de code que nous avons écrit tout à l'heure, ce qui nous donne au final :

 
.:IfBlogMetadataIsTrue::disable_archives::
    <!-- Pas de liste d'archives à afficher -->
::
    <ul id="blogarchives">
    .:ForBlogArchives::
          <li class="blogarchivesitem">
            <a href="{path}" title="{value} ({count})">{value}</a>
          </li>:
          ::
    :.
    </ul>
:.
 

Avec ça, on est vraiment bon et le thème que vous construisez sera modulable et capable de s'adapter à vos besoins, mais aussi à la configuration de ceux qui utiliseront votre thème !

3.5.2.3 Afficher les catégories

De façon similaire aux archives, il faut que dans votre fichier de configuration l'option disable_categories soit configurée correctement.

Il y a plusieurs façons d'afficher les catégories de votre blog :

Nous verrons les deux cas.

Pour commencer, nous allons préparer le terrain pour que le thème soit modulable par les utilisateurs finaux.

Entre les balises header que vous avez ajoutées dans le chapitre 3.5.2.1, ajoutez maintenant le code suivant :

.:IfBlogMetadataIsTrue::disable_categories::
    <!-- Bloc HTML à conserver si la variable vaut `true` -->
    ::
    <!-- Bloc HTML à conserver si la variable vaut `false` -->
:.

À l'aide du motif IfBlogMetadataIsTrue, on teste si les pages des catégories doivent être créées par VenC. On peut aller plus loin, en demandant à VenC de conserver ou non des blocs de codes de façon plus précise, de la façon suivante :

.:IfBlogMetadataIsTrue::disable_categories::
    <!-- Bloc HTML à conserver si la variable vaut `true` -->
    ::
        .:IfBlogMetadataIsTrue::display_categories_as_list::
            <!-- Bloc HTML à conserver si la variable vaut `true` -->
        :.
        
        .:IfBlogMetadataIsTrue::display_categories_as_tree::
            <!-- Bloc HTML à conserver si la variable vaut `true` -->
        :.
:.

On utilise à nouveau IfBlogMetadataIsTrue pour tester les variables suivantes (à noter que ce ne sont pas des options réservées par VenC, vous pouvez donc définir les vôtres si vous le souhaitez) :

Ce faisant, vous pourrez contrôler depuis votre fichier de configuration quels types d'affichage vous souhaitez pour vos catégories ! Malin !

On arrive maintenant au gros morceau : l'affichage de la liste des catégories !

Affichage des catégories en nuage

C'est le cas le plus simple. Nous allons pour ce faire utiliser GetFlattenedBlogCategories.

Par exemple :

<ul id="blogcategorieslist">

.:GetFlattenedBlogCategories::
  <li class="blogcategoriesitem">
    <a href="{path}" title="{value} ({count})">{value}</a>
  </li>
  ::
  :. 
</ul>

Ici, on définit une liste avec la balise HTML ul. On y insère le motif VenC GetFlattenedBlogCategories. qui va générer itérativement les items de la liste. Nous y écrivons donc en premier argument dudit motif le couple de balise li, qui correspond à l'item courant de la liste.

Enfin, les variables du motif permettent de récupérer respectivement :

Il n'y a plus qu'à insérer tout ça dans le code que nous avons préparé dans la balise header :

.:IfBlogMetadataIsTrue::disable_categories::
    <!-- Bloc HTML à conserver si la variable vaut `true` -->
    ::
        .:IfBlogMetadataIsTrue::display_categories_as_list::
            <ul id="blogcategorieslist">
            .:GetFlattenedBlogCategories::
              <li class="blogcategoriesitem">
                <a href="{path}" title="{value} ({count})">{value}</a>
              </li>
              ::
            :.
            </ul>
        :.
        
        .:IfBlogMetadataIsTrue::display_categories_as_tree::
            <!-- Bloc HTML à conserver si la variable vaut `true` -->
        :.
:.

Affichage des catégories en arbre

Cet affichage est un peu plus complexe et ne se prête pas à toutes les mises en page, mais il a le mérite de rendre plus clair l'organisation de votre site.

L'idée de l'affichage en arbre de catégories, c'est de mettre en évidence le fait que plusieurs sous-catégories peuvent appartenir à une catégorie parente.

Par exemple, si votre blog parle de science et d'art, vous aurez donc deux catégories de base. Pour avoir plus de granularité sur l'organisation de vos publications, vous pouvez indiquer à VenC qu'une publication traite aussi de peinture ou de littérature. Deux sous-catégories de la catégorie "Art". Et bien sûr, il n'y a pas de limite dans l'imbrication de catégories, ce qui vous laisse beaucoup de latitude pour trier vos publications.

Pour savoir comment définir des catégories dans une publication, rendez-vous ici.

Pour afficher un arbre hiérarchique de catégories, on utilise le motif VenC GetBlogCategoriesTree. La documentation technique propose l'exemple suivant, qui convient tout à fait à la majorité des cas de figure :

.:GetBlogCategoriesTree::
    <ul>::
    <li><a href="{path}" title="{count} publications">{value}</a>::
    {childs}</li>::
    </ul>
:.

Ce motif fonctionne différemment de GetFlattenedBlogCategories. En effet, il faut indiquer à la fonction :

On remarque également que comme pour GetFlattenedBlogCategories, on peut utiliser les variables path, count et value.

Enfin, un autre élément est requis pour créer une structure récursive de catégories : c'est la variable childs, qui contient le nœud enfant. Si vous oubliez de placer cette variable dans les arguments 2 ou 3, le résultat de l'appel du motif ne sera pas celui attendu.

Avec ça on est bon et on peut maintenant placer notre code dans celui que nous avons préparé dans la balise header de notre entête HTML :

.:IfBlogMetadataIsTrue::disable_categories::
    <!-- Bloc HTML à conserver si la variable vaut `true` -->
    ::
        .:IfBlogMetadataIsTrue::display_categories_as_list::
            <ul id="blogcategorieslist">
            .:GetFlattenedBlogCategories::
              <li class="blogcategoriesitem">
                <a href="{path}" title="{value} ({count})">{value}</a>
              </li>
              ::
            :.
            </ul>
        :.
        
        .:IfBlogMetadataIsTrue::display_categories_as_tree::
            .:GetBlogCategoriesTree::
                <ul>::
                <li><a href="{path}" title="{count} publications">{value}</a>::
                {childs}</li>::
                </ul>
            :.
        :.
:.

Et voilà, c'est tout bon pour les catégories ! Si cependant vous voulez aller plus loin, avec un contrôle plus fin de l'affichage et utiliser les fonctions avancées de taxonomie vous pouvez également jeter un œil à ces fonctions :