Olivier Web Garden

Tout faire avec linux...

Accueil > Articles > Spip > Amélioration du squelette Html5UP Editorial

Amélioration du squelette Html5UP Editorial

dimanche 25 novembre 2018, par Olivier K.

Le squelette Html5UP Editorial me convient depuis son installation. Néanmoins, il manquait deux-trois trucs pour qu’il réponde encore mieux à mes attentes.

Article majeur

En relisant la documentation sur le squelette HTML5UP Editorial, je me suit rendu compte que j’utilisais mal la fonctionnalité de l’article majeur, le second article visible sur la page d’accueil. Notamment aucun lien pour aller sur l’article lui même, rendant par la même sa lecture malaisé.

Après une relecture rigoureuse, de la doc (cf lien sur cet article), c’est normal.
Il s’utilise comme un cartouche pour afficher différentes informations avec des icônes issues de la célèbre police font-awesome (lien dans la doc).
J’avoue que je n’ai pas trop envie d’avoir des trackers sur mon site pour la police de caractère font-awesome. Donc je ne les utiliserai pas.

J’ai pensé également faire un ensemble de liens vers d’autres sites que je visite régulièrement mais d’un point de vue communication, cela fait : "je vous présente mon article préféré, pour la suite allez voir là bas, c’est mieux qu’ici..."
Même si c’est vrai, cela ne se fait pas :)

J’ai deux trois idées mais je dois d’abord les tester en local. En attendant, je désactive l’article majeur jusqu’à lui avoir trouver une nouvelle utilisation...

Flux RSS

J’ai installé le plugin sociaux comme indiqué dans la documentation HTML5UP Editorialet renseigné le champ RSS par le rss de ce site : https://www.olivierwebgarden.fr/spip.php?page=backend

Cela fonctionne !

Une icône RSS apparaît désormais en haut et à droite de la page (article ou sommaire).

Pour pouvoir s’abonner au flux du site, il suffit de cliquer dessus.

Date de publication

Quand je cherche de l’information sur un site, j’aime avoir une info : la date de publication du document. En effet, en 2018, un article sur une application datant de 2004 n’a probablement pas le même intérêt qu’un autre article de 2016 pour la même application.

Cette fonctionnalité n’est pas prévue dans le squelette.

Voici comment j’ai procédé :

Il suffit d’éditer quatre fichiers du squelette contenu dans le plugin :
Dans le répertoire plugins/auto/html5uo_editorial/v1.1.8/

content/article.html

        <header class="main">
                [<p class="surtitre #EDIT{surtitre}">(#SURTITRE)</p>]
                [<h1 class="titre #EDIT{titre}">(#TITRE)</h1>]
                [<p class="soustitre #EDIT{soustitre}">(#SOUSTITRE)</p>]
                [<p>#LESAUTEURS, (#DATE|affdate)</p>]
        </header>

cette balise [<p>#LESAUTEURS, (#DATE|affdate)</p>] a été ajouté : elle permet d’afficher l’auteur et la date de publication.

inclure/article-hero.html

        <header>
                [<h1 class="#EDIT{titre}">(#TITRE)</h1>]
                [<p class="#EDIT{soustitre}">(#SOUSTITRE)</p>]
                [<p>(#DATE|affdate_mois_annee)</p>]
        </header>

Modification du header avec la balise [<p>(#DATE|affdate_mois_annee)</p>] pour avoir la date de publication sous forme mois année.

inclure/sidebar.html

Modification de la partie heroside :

        <B_heroside>
        <section>
                <BOUCLE_heroside(ARTICLES){id_article IN #CONFIG{html5up/heroside}|picker_selected{article}}>
                [<header class="major">
                        <h2[ class="(#EDIT{titre})"]>(#TITRE)</h2>
                </header>]
                [<p>(#DATE|affdate_mois_annee)</p>]
                [<div class="mini-posts texte #EDIT{intro}">
                        (#INTRODUCTION)
                </div>]
                <ul class="actions">
                        <li><a href="#URL_ARTICLE" class="button"><:zcore:lire_la_suite:></a></li>
                </ul>
                </BOUCLE_heroside>
        </section>
        </B_heroside>

Le code [<p>(#DATE|affdate_mois_annee)</p>] a été ajouté après le header pour ne pas casser le design.

inclure/resume/article.html

<BOUCLE_article(ARTICLES){id_article}{statut?}>
<article>
        <a href="#URL_ARTICLE" class="image">[(#LOGO_ARTICLE_RUBRIQUE|html5up_image_reduire{416,256})]</a>
        [<h3[(#ENV{affichertitre}|=={non}|oui) class="offscreen"]>(#TITRE)</h3>]
        [<p>(#DATE|affdate_mois_annee)</p>]
        [<p>(#INTRODUCTION|couper{#ENV{coupe,150}})</p>]
        <ul class="actions[(#ENV{afficherlien}|=={non}|oui) offscreen]">
                <li><a href="#URL_ARTICLE" class="button"><:zcore:lire_la_suite:></a></li>
        </ul>
</article>
</BOUCLE_article>

Même principe : ajout du code [<p>(#DATE|affdate_mois_annee)</p>] dans le squelette.

L’ensemble des modifications ont été faites et déployées avec des outils libres : l’éditeur web Bluefish et transféré via Filezilla

Où faire les modifications ?

J’ai pensé les faire ne premier dans une arborescence dans un répertoire squelettes comme c’est prévu pour toute modification d’un squelettes installé, mais je ne l’ai pas fait pour les raisons suivantes :

  • Quelle structure adopter dans le répertoire squelettes pour faire les modifs ? Pas d’explication dans la doc et mes premiers tests ont ajouté de l’instabilité.
  • En cas de changement de squelettes via un plugin, il ne faut pas oublier de supprimer les ajouts dans ce répertories sous peine de gérer des perturbations.

C’est pourquoi, j’ai effectué mes modifications directement dans le plugin avec une copie en local.

Récapitulatif des plugins installés

  • html5up_editorial (qui installe les dépendances : Z-core, SCSS PHP et Saisies pour formulaires)
  • Liens vers les réseaux sociaux : RSS
  • Court-circuits : pour éviter certains affichages de la page rubrique
  • Formulaire de contacts avancés : pour afficher un formulaire de contacts dans le volet qui contient le menu.

Voir en ligne : Doc HTML5UP Editorial