Éditorial (HTML5UP)

Squelette SPIP pour intégrer le modèle Editorial de HTML5UP
https://html5up.net/editorial

Configuration

La page de configuration permet quelques réglages. On y défini la couleur principale du site, des informations de contact et le contenu de la page d’accueil et de la colonne gauche.

Sur la page d’accueil, le premier article est le "héro", le second est le "majeur".

  • L’article héro : le titre, un résumé, le logo + un bouton "Lire la suite"
  • L’article majeur : le titre + l’introduction (ou le champ "Descriptif" s’il est activé dans la partie "Configuration > Contenu du site").

En colonne gauche, un article "héro" est aussi désigné pour afficher son introduction (#INTRODUCTION), son logo et un lien vers la page de l’article.

Rédaction

Il est préférable d’activer les champs "Chapeau" et "Post-scriptum" pour bénéficier de plusieurs mises en formes : le champ "Chapeau" d’un article s’affiche en public en une colonne pleine largeur, le champ "Texte" s’affiche lui sur deux colonnes, et le champ "Post-scriptum" se déroule sur 3 colonnes.


L’article "majeur"

Pour rédiger le texte de l’article "majeur" (le second sur la page d’accueil), un modèle permet d’afficher comme dans le thème de départ une icône de FontAwesome avec un texte en bloc, deux blocs par ligne. C’est le modèle <iconebloc> qui prend quelques paramètres :

  • |icone=fa-rocket (ou tout autre icone de FontAwesome https://fontawesome.com/v4.7.0/icons/)
  • |iconetitre=le titre
  • |iconetexte=le texte
  • |left ou |right (positionner le modèle à gauche ou à droite)

<iconebloc|icone=fa-rocket|left|iconetitre=mon titre|iconetexte=tout le texte ici avec mise en {{forme}} et lien [hypertexte->#]>

On utilise sur la page d’accueil la balise #INTRODUCTION de l’article, et cette balise se décrit comme ceci : https://www.spip.net/fr_article902.html#INTRODUCTION
Elle va donc chercher d’abord le descriptif de l’article s’il existe, sans le couper, ce qui est très utile si on veut inclure des modèles. Il faut donc aller dans « Configuration > Contenu du site » pour activer le champ descriptif des articles, et faire l’inclusion des modèles à cet endroit pour qu’ils s’affichent sur la page d’accueil correctement.


L’article "héro" de la colonne gauche

Dans l’article "héro" de la colonne gauche, si on utilise le champ "Descriptif" des articles, on pourra rédiger le texte qui apparaît dans cette colonne gauche, qui pourra être différent des champs visibles sur la page de l’article lui-même.
Le modèle <articleXX|resume> rendra le logo, le titre et un résumé de l’article XX, avec les options suivantes :

  • |affichertitre=non
  • |afficherlien=non

Inclure des icônes dans les textes

Un dernier modèle permet d’insérer n’importe quelle icône de FontAwesome dans le flux d’un texte. Utilisez <icone> avec ces paramètres :

<icone|icone=fa-rocket|taille=50px>

Les icônes de réseaux sociaux

En utilisant le plugin "Liens vers les réseaux sociaux" (sociaux), vous aurez les icônes des réseaux que vous aurez choisis.

Formulaire de contact

En utilisant le plugin "Formulaire de contact" (contact), le formulaire sera présent en colonne gauche, automatiquement.
NB : À noter que l’activation des pièces jointes au formulaire cause un problème d’affichage dans la colonne trop étroite pour ce champ.

Conseils

Utiliser Court-Circuit pour éviter la page rubrique s’il n’y a qu’un seul article dans une rubrique.
Avec le plugin Pages, si un article désigné "héro", "majeur" ou "héro en colonne gauche" devient une "page unique", il n’apparaîtra plus dans le menu.

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP.
La liste par ici...

Dernière modification de cette page le 13 février 2019

Discussion

40 discussions

  • Bonjour,
    J’aime vraiment beaucoup ce squelette.
    Je souhaiterais pouvoir reproduire la même mise en forme que pour l’article Major sur un autre article du site mais je n’y parviens pas sur deux colonnes. ça ne marche que sur une colonne.
    Y-a-t-il un moyen d’obtenir l’effet souhaité ? Merci de vos idées...

    Répondre à ce message

  • 2

    Bonjour,
    Merci pour ce plugin. Je souhaite le personnaliser et je ne trouve pas comment faire pour :
    1) sur la home du site et les pages sommaire des rubriques, enlever les bords ronds des images et des boutons « lire la suite ».
    2) sur la home du site et les pages sommaire des rubriques, enlever le terme « Articles ».
    3) sur la pagination des sommaires des rubriques, je n’arrive pas afficher les 220 articles d’une rubrique, la pagination en place présente juste 6 articles sur 6 pages.
    Merci

    • Bonjour,
      pour les petites modifications visuelles, le plus simple est d’utiliser des règles css dans une feuille de style squelettes/css/perso.css
      Sinon les squelettes du site peuvent être personnalisés, on peut les modifier en les enregistrant dans le dossier squelettes à la racine de son site : https://www.spip.net/fr_article3347.html#Votre-dossier-squelettes

      Ça nécessite d’avoir déjà quelques connaissances ou bien d’apprendre quelques petites choses sur le fonctionnement d’un site web...

      Pour Éditorial, le squelette est comme ceci : https://zone.spip.net/trac/spip-zone/browser/_squelettes_/html5up_editorial
      Vous pouvez copier l’un de ces fichiers pour l’enregistrer dans votre dossier squelettes à la racine du site, en respectant l’arborescence des sous-dossiers, et les modifications seront prises en compte dans votre site...

    • Bonjour,
      Merci pour cette réponse. j’ai un site Spip depuis 2004, https://www.gualeni.com/, je ne suis pas développeur mais j’ai passé des nuits à bidouiller des feuilles de style d’au moins 4 « squelettes » pour changer une couleur, une largeur ou une hauteur, retirer des élément dont je n’avais pas besoin, en ajouter un autre. Chaque plugin est traité de façon différente et les noms des fichier à modifier ne sont pas toujours évidents. Ici par exemple, pour modifier le « footer » il faut aller dans footer/dist.html alors qu’il existe un fichier footer.html, bref quand on sait sur quel fichier intervenir c’est 100 fois plus rapide. Avant de poster cette demande, j’ai lu toutes les questions et réponses de ce forum. J’ai bien sur, dans « Squelettes » un perso.css, un spip.css, dans inclure un sidebar.html un sidemenu.html.
      J’ai mis dans perso.css
      .image img
      border-radius : 0.0em ;
      display : block ;

      Pour avoir des images avec des angles droits et
      .button border-radius : 0.0em ;
      background-color : #42977d ;
      color : #ffff !important ;

      Pour avoir des boutons à ma couleur avec une écriture blanche. Car en modifiant ces paramètres à partir de firefox avec « examiner l’élément », j’obtenais le résultat voulu. Mais visiblement cette syntaxe ou son emplacement n’est pas la bonne car cela n’a aucun effet sur les images et sur les boutons.
      Question 2 ) quels sont les fichiers à modifier pour la pagination des pages sommaires des rubriques car le comportement de la pagination de la home qui se règle en Bo n’est pas le même.
      question 3 ) quelle syntaxe dans quel fichier je dois supprimer pour ne plus faire apparaitre « Articles » en haut de la home et en haut de chaque rubrique sous le nom de la rubrique.
      Merci

    Répondre à ce message

  • 2

    Bonjour,

    Je souhaite effectuer quelques modifications de présentation mais après quelques essais infructueux (rien ne change), je fais appel à votre aide.

    Quels fichiers faut-il modifier pour :

    -  sur la home page supprimer les « Lire la suite » et le mot « Article » ?
    -  sur la page rubrique : idem que la question précédente + réduire le nom de la rubrique voir le supprimer car c’est redondant avec le fil d’ariane ?
    -  changer le footer ?
    -  sur la page article, faire apparaître le nom de l’auteur et la date ?

    Je vous remercie pour votre aide.

    Dan

    • Je me réponds... c’est bon j’ai trouvé :)

    • Bonsoir,
      Je suis intéressé pour savoir comment retirer le terme « Articles » sur la home et dans la pages rubriques.
      Merci

    Répondre à ce message

  • 2

    Bonjour,

    J’utilise ce squelette pour mon site personnel. Merci pour tout ce travail qui m’a évité bien de la peine.
    j’ai activé les forums pour permettre les commentaires sur les articles mais rien ne s’affiche dans la page article.
    Le code d’inclusion est bien présent dans le squelette de la page article, j’ai vidé le cache, recalculé les css mais rien n’y fait.

    Est-ce que j’aurai oublié une manip quelque part ?
    je ne connais pas bien le fonctionnement des plugins mais je pensais que squelette-dist prenais le relais pour les fonctionnalités manquantes et appelés par le squelette ?

    olivierk
    https://www.olivierwebgarden.fr

    • Bonjour,
      s’il ne reste pas de fichier indésirés dans le dossier squelettes, question bête, avez-vous choisi un type de forum pour l’article en question ? Voir dans la page de l’article côté administration + colonne gauche...

    • Bonjour,

      Oui, c’est bien cela. J’ai oublié d’activer le forum sur un article :)
      Je l’ai fait sur l’article héro et cela fonctionne.

      Merci beaucoup.

    Répondre à ce message

  • 1

    Comment on fait pour désigner un article comme héro ?

    Répondre à ce message

  • 1

    Bonjour,
    J’essaye d’adapter un ancien site spip avec ce thème et si presque l’ensemble du site fonctionne, bien que je doive faire des ajustements, j’ai un message d’erreur, notamment sur la page d’accueil et celle des résultats de recherches. Je pense qu’il s’agit du même problème.
    Pour le visiteur cela se traduit par une erreur 404.
    Site www.maximaphiles-francais.org
    Spip 3.2.1
    Version plugin 1.1.8
    En fichier joint les messages d’erreur
    Merci pour votre aide.

    • OOOps
      Désolé ! Le problème est résolu.
      J’avais pas activé le plugin API de VERIFICATION
      Vous pouvez supprimer mon post qui fait un peu bazar.

    Répondre à ce message

  • 7

    Bonjour,

    avec SPIP (3.2.1) et le plugin Html5up Editorial (1.1.8 - stable), mon besoin est d’afficher une vidéo youtube à travers la section Chapeau de l’article Héro du site.
    Cependant le code html ci-dessous (qui s’affiche correctement s’il est placé dans la section Texte de l’article Héro) n’est pas pris en compte lorsqu’il est placé dans la section Chapeau

    1. <iframe width="560" height="315" src="https://www.youtube.com/embed/wGQTkGGRTsM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    Que dois-je faire pour permettre cela ?

    Librement

    • Bonjour,
      je ne sais pas pourquoi ça ne marche pas dans le chapeau si ça marche dans le texte... est-ce que vous pouvez tester avec le plugin oembed qui prend en charge l’affichage des vidéos dans un lecteur lorsqu’on ne met que l’url de la vidéo ?
      https://plugins.spip.net/oembed

    • Merci pour votre réponse,
      avec oembed, tout va bien dans le texte de l’article, par contre dans le chapeau, c’est uniquement les textes de descriptions qui s’affichent et pas la vidéo

    • Je ne vois pas ce qui pourrait causer ça, je viens de tester les deux solutions, qui fonctionnent bien en local : intégration iframe ou lien avec oembed (bien sauter une ligne après le lien, sinon pas de lecteur...)
      Est-ce identique avec ou sans Editorial ?
      Le site est en local ou en ligne ?

    • Bonjour,

      Le problème ne se reproduit pas lorsque le plugin Html5up Editorial est désactivé. Le site est en ligne.

      Pour le contenu SPIP suivant :

      aa
       
      <https://youtu.be/W0cCUOyYs8s>
       
      bb

      Dans la partie Chapeau de l’article, aucune trace des balises figure et figcaption qui semblent avoir été supprimé pendant les traitements sur le contenu Chapeau. Le code html est le suivant :

      <p>aa  	 	 			 Lecture 			 	 	   Titre  by Auteur https://youtu.be/W0cCUOyYs8s    
       
      bb</p>

      Alors que dans la partie Texte de l’article, le code html (correcte) est de la forme suivante :

      <p>aa</p>
      <figure class='spip_documents spip_documents_center ressource oembed oembed_video oembed_youtube'>
      ...
      <figcaption>
      ...
      </figcaption>
      </figure>
      <p>bb</p>
    • Bonjour,

      j’ai pu trouvé un contournement au problème. Il s’agit du filtre |couper qui s’applique au contenu Chapeau. Ce filtre « nettoie le texte de toutes ses balises html ».

      Dans le squelette /plugins/auto/html5up_editorial/v1.1.8/inclure/article-hero.html , il suffit donc de remplacer :

      1.     [<p>(#INTRODUCTION|couper{300})</p>]

      par

      1.     [<p>(#INTRODUCTION)</p>]

      Pour une correction pérenne, il faudrait un filtre qui réduise la portion de texte à afficher sans pour autant nettoyer le texte de toutes ses balises html...

    • ah oui, c’est clair, |couper n’affiche pas les modèles, img non plus... je n’avais pas bien saisi sur quelle page les tests étaient fait, parce que dans la page article l’affichage est correct, avec ou sans le squelette Editorial...
      Donc c’est résolu ?

    • Oui pour le contournement,
      mais il reste à mettre en place une solution pérenne, qui va limiter la quantité de texte « visible », et gérer correctement le code html du contenu.

      Librement,

    Répondre à ce message

  • 3
    Jean Paul Aubel

    Bonjour

    j ’étais sous sarka spip et j avais un secteur dédié aux sites référencés
    comment puis je introduire cela dans ce nouveau pugin
    merci

    Répondre à ce message

  • 5
    metaldark

    Bonjour,
    J’ai une erreur 404 (cad la page 404 qui s’affiche) lorsque je clique sur le logo du site ou dans la barre d’outil à gauche sur accueil.
    Je pense qu’il manque un fichier dans le plugin comme par exemple sommaire.html.
    Ou bien alors j’ai mal configuré ce qui peut être le cas.
    Merci d’avance pour aide.
    Je suis en spip 3.2

    Répondre à ce message

  • Jean Paul Aubel

    vraiment TB ce plugin bravo bien trouvé

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom