![]() Un générateur de site statique qui casse des briques. VenC est tellement rapide qu'il enfreint le principe de causalité et produit de l'énergie surunitaire ! |
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 ... -->
GetBlogLanguage
: ce pattern permet de récupérer le langage du blog que vous
avez défini dans votre fichier de configuration principal.
Ça n'est pas obligatoire, mais les moteurs de recherche apprécient l'effort.GetBlogName
: ce pattern permet de récupérer le nom de votre blog. Typiquement à utiliser entre les balises title
. Le nom de votre site est défini dans votre fichier de configuration principal.GetThreadName
: vous pourriez vouloir afficher dans le titre de l'onglet ou de la fenêtre active plus que le titre du blog. Par exemple, le nom du fil de catégories courant ou le titre de la publication courante. C'est ce que permet de faire ce motif.GetStyleSheets
: ce motif n'est pas obligatoire. Vous en aurez cependant besoin si vous prévoyez d'utiliser la coloration syntaxique dans vos publications.GetRelativeRoot
: comme votre feuille de style est copiée à la racine du site, mais que celle-ci peut être référencée depuis des sous-répertoires, vous pourriez avoir besoin de construire un chemin relatif permettant d'y accéder. C'est ce que permet GetRelativeRoot
.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 !
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.
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 :
ul
pour avoir une liste HTML. L'identifiant de la balise ouvrante vous permettra plus tard d'en définir le style CSS.li
dans le premier argument de ForBlogArchives
. On a également assigné à cette balise une classe, qui vous permettra plus tard d'en définir le style CSS.li
, on a ajouté une balise a
pour pouvoir construire notre lien, porté par la variable path
. On remarque également que l'attribut title
affichera entre parenthèses le nombre de publications dans l'archive. Ça n'est pas obligatoire, mais c'est tout de même plus sympa, non ?a
on retrouve bien la variable value
, qui porte le nom de l'archive formatée comme indiqué plus haut.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 !
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) :
display_categories_as_tree
display_categories_as_list
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 !
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` --> :. :.
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 :