3.5.4 Créer le pied de page HTML

Nous avons vu comment créer l'entête d'une page et nous avons vu comment structurer le corps de nos publications. Il reste maintenant à voir comment créer le pied de page de votre site.

En premier lieu, il convient de finir ce qui a été commencé dans le chapitre 3.5.2, à savoir fermer les balises HTML qui ont été ouvertes. Pour ça, créez un nouveau fichier footer.html dans le répertoire chunks de votre thème et éditez-le comme suit :

    </body>
</html>

On y ajoute maintenant une paire de balises footer, qui contiendra les éléments de notre pied de page :

        <footer>
        </footer>
    </body>
</html>

3.5.4.1 Animation de chargement

C'est purement cosmétique mais vous pouvez configurer une animation de chargement, comme expliqué dans le chapitre 4.6.2.2, lorsque vous utilisez le module JS de défilement infini.

On peut alors écrire, lignes 2 à 4, quelque chose comme :

1
2
3
4
5
6
7
        <footer>
              .:GetBlogMetadataIfExists::loading_image::
                  <img id="__VENC_LOADING__" src=".:GetRelativeRoot:./{value}" />
              :.
        </footer>
    </body>
</html>

Avec GetBlogMetadataIfExists, on teste ici si une image de chargement a bien été définie dans le fichier de configuration principal. Si tel est le cas, alors la balise img est ajoutée.

Notez que l'attribut id a pour valeur __VENC_LOADING__. Cela permet au module JS de retrouver l'élément à afficher ou à cacher, selon que la page est ou non en cours de chargement.

Enfin, remarquons à la ligne 3 :

src=".:GetRelativeRoot:./{value}"

Ici la variable value portera le nom de fichier contenu dans loading_image, si ce champ est défini dans votre fichier de configuration.

Enfin, comme souvent avec VenC quand on référence une ressource dans un fichier HTML, on utilise le motif GetRelativeRoot qui permet de construire le chemin relatif du fichier qu'on référence.

3.5.4.2 Ajouter du code HTML personnalisé

Une bonne pratique, si vous envisagez de diffuser votre thème est de permettre aux utilisateurs finaux de personnaliser l'entête ou le pied de page avec du code HTML.

Nous allons voir ici comment inclure du contenu HTML dans le pied de page, mais ce qui va suivre fonctionne évidemment aussi dans l'entête.

Dans l'exemple ci-dessous, ce sont les lignes 5, 6 et 7 qui nous intéressent :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
        <footer>
            .:GetBlogMetadataIfExists::loading_image::
                <img id="__VENC_LOADING__" src=".:GetRelativeRoot:./{value}" />
            :.
            .:IncludeFileIfExists::
                .:GetBlogMetadataIfNotNull::include_in_footer:.        
            :.
        </footer>
    </body>
</html>

IncludeFileIfExists permet d'inclure un fichier du type de votre choix. Généralement, il s'agira d'un fichier contenant du code HTML.

Ici le seul argument de la fonction est retourné par GetBlogMetadataIfNotNull, qui permet de récupérer le nom du fichier à inclure s'il est défini dans le fichier de configuration du blog.

Dans le cas où le nom de fichier n'est pas défini, la fonction renvoie une chaîne de caractères vide transférée à IncludeFileIfExists, qui sera ignorée en conséquence.

3.5.4.3 Ajouter des liens de navigation

Nous concluons le pied de page avec les liens de navigation. À noter que ce qui va suivre peut également être programmé dans l'entête de votre site.

Comme on s'en doute, votre blog n'affiche pas toutes les publications d'un fil sur une seule page. VenC utilise un système de pagination que vous pouvez configurer ici. En conséquence, il faut que le visiteur de votre site puisse naviguer entre ces différentes pages.

Pour cela on uitilise trois motifs différents :

En reprenant l'exemple du chapitre précédent, nous aurions alors aux lignes 8 à 14 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
        <footer>
            .:GetBlogMetadataIfExists::loading_image::
                <img id="__VENC_LOADING__" src=".:GetRelativeRoot:./{value}" />
            :.
            .:IncludeFileIfExists::
                .:GetBlogMetadataIfNotNull::include_in_footer:.        
            :.
            .:GetPreviousPage::<a id="previous_link" href="{path}">←</a>:.
            <ul id="navigation_pages_list">
                .:ForPages::5::<li class="page_list_item">
                    <a href="{path}">{page_number}</a>
                </li>:: . :.
            </ul>
            .:GetNextPage::<a id="next_link" href="{path}">→</a>:.
        </footer>
    </body>
</html>

À noter que si la page courante est la première ou la dernière page, alors respectivement les motifs GetPreviousPage et GetNextPage seront ignorés et ne retourneront rien.

Notons également que si vous venez de commencer votre blog, il n'y aura probablement pas beaucoup de publications au début. Ces publications pourraient ne requérir qu'une seule page pour être toutes affichées, et il n'y aurait donc pas de liste de pages à afficher non plus.

Du coup tout ça c'est pas mal. Mais on peut encore faire mieux.

Le code ci-dessous actualise ce qui a été déjà fait pour illustrer ces remarques :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
        <footer>
            .:GetBlogMetadataIfExists::loading_image::
                <img id="__VENC_LOADING__" src=".:GetRelativeRoot:./{value}" />
            :.
            .:IncludeFileIfExists::
                .:GetBlogMetadataIfNotNull::include_in_footer:.        
            :.
            .:GetPreviousPage::<a id="previous_link" href="{path}">.:IfInThread::←::{entry_title} ←:.</a>:.
            .:IfPages::
                <ul id="navigation_pages_list">
                    .:ForPages::5::<li class="page_list_item">
                        <a href="{path}">{page_number}</a>
                    </li>:: . :.
                </ul>
            :.
            .:GetNextPage::<a id="next_link" href="{path}">.:IfInThread::→::→ {entry_title}:.</a>:.
        </footer>
    </body>
</html>