É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

41 discussions

  • Philippe Robin

    bonjour

    pour info, l’appel des icones https://fontawesome.com/v4.7.0/icons/ est perturbé par l’activation du plugin article PDF

    voili voilou ...

    Répondre à ce message

  • 2

    Bonjour,

    Tout d’abord, merci pour ce thème très bien fait. Il me permet de monter un site web simple et épuré.

    Je souhaite modifier le menu pour exclure l’affichage et donc les liens vers certaines rubriques.

    Pour le faire facilement j’aurais bien utilisé le plugin menus1 mais cela ne fonctionne pas ou je ne sais pas comment m’y prendre :).
    J’ai bien compris que pour mon besoin, tout se passe dans le fichier « sidemenu.html » du dossier inclure.
    Pouvez vous m’aider, cela fait 2 jours que j’essaie sans trouver de solution, certainement un manque de connaissances.

    • Bonsoir,
      Dans une booucle de rubriques, on peut exclure certains résultats en ajoutant {id_rubrique !IN 1,2,3} par exemple pour exclure les rubriques 1,2 et 3...

    • Parfait ! Excellent ! Un GRAND Merci ! :D

    Répondre à ce message

  • 1

    Pour faire des sous-rubriques en espace public j’ai mis [(#FORMULAIRE_EDITER_RUBRIQUE{oui, #ID_RUBRIQUE, [(#SELF|parametre_url{id_rubrique, #ID_RUBRIQUE})]})] et pour faire afficher la sous-rubrique j’ai mis <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent}{tout} {par num titre}{!par date}> jusque la tout va bien.
    Maintenant si je clique sur le lien de la nouvelle rubrique que je viens de créer, j’obtiens une erreur 404 puisqu’il n’y a pas encore d’articles de créer. Pour palier à cela j’ai mis dans head/rubriques <BOUCLE_rubrique_head(RUBRIQUES) {id_rubrique}{tout}> mais cela ne fonctionne pas. Il y a toujours une erreur 404. Que puis-je faire ?

    • Bonjour,
      je vous conseille de poster cette question sur la liste SPIP, vous aurez beaucoup plus de chance d’avoir une réponse, ou même plusieurs...
      Mais donc c’est possible, à condition de changer l’action du formulaire, pour faire en sorte de donner un statut « publie » à la rubrique dès sa création. Cela se passera dans la fonction traiter du formulaire. Pour ne pas polluer la création générique des rubriques, il faudra certainement dupliquer le formulaire, les deux fichiers html et php, pour le renommer par exemple editer_rubrique_publique, et renommer à l’intérieur les fonctions aussi.... on peut continuer la discussion sur la liste SPIP si vous voulez : https://listes.rezo.net/mailman/listinfo/spip

    Répondre à ce message

  • 3

    Bonjour,
    Ce squelette utilise le filtre adaptive_image. Est-il donc nécessaire d’installer le plugin adaptive_image ? Je pose la question parce que pour ma part je préfèrerai utiliser « insertion avancée d’images » qui offre des effets très sympas.... est-ce qu’il y a une incompatibilité ?
    Merci de votre réponse

    • Bonjour,
      je ne sais vraiment pas si les deux plugins Adaptive Images et Insertion avancée d’images sont incompatibles, il faut essayer pour voir... mais le premier n’est pas obligatoire, donc il n’y a pas de raison...

    • Bonjour !
      Je reviens faire un petit point sur l’utilisation d’insertion avancées d’images. En gros ça fonctionne, Il ne semble pas y avoir d’incompatibilité majeure. L’alignement d’images et le diaporama qui sont deux fonctionnalités très intéressantes malheureusement ne donnent pas le résultat espéré. Je pense que c’est lié au plugin « insertion avancées d’images » lui-même.
      Par contre, j’ai un message d’erreur « filtre adaptive_image non défini » qui surgit dans mes pages comportant des images. Pour le désactiver j’ai dû retirer le filtre adaptive_image des squelettes article.html et rubrique.html, ce qui n’est pas normal. Je ne comprends pas d’où vient le problème.
      Si quelqu’un a une piste... cela m’ennuie de trafiquer les squelettes de base du plugin.

    • Bonsoir, dans z-core le filtre adaptive_image est présent sans servir à grand chose sinon rendre le plugin adaptive_image efficace dès son activation, sans avoir besoin de modifier les squelettes. Dans Editorial on déclare le plugin z-core nécessaire, on peut donc utiliser le filtre, qui ne devrait pas causer d’erreur.
      C’est juste que si on active adaptive_image (le plugin), alors on bénéficie de ses avantages sans avoir à toucher au code, puisque le filtre est déjà dans le squelette.
      On devrait avoir intérêt à laisser tel que.

      Est-ce que tous les plugins sont bien à jour ?

    Répondre à ce message

  • 5

    merci de ce squelette qui m’a permis de faire rapidement un site simple et beau..

    mais je voudrais afficher une page « rubrique » et bizarrement, elle n’affiche que le dernier article de la rubrique... qui en contient pourtant 2...

    et essayant de comprendre le squlette, je butte sur html5up_editorial/v1.1.8/breadcrumb/dist.html dont je ne comprends pas le code...

    [(#ENV{id_rubrique}|oui)#SET{objet,rubrique}#SET{id_objet,#ENV{id_rubrique}}]
    [(#ENV{id_syndic}|oui)#SET{objet,site}#SET{id_objet,#ENV{id_syndic}}]
    [(#ENV{id_breve}|oui)#SET{objet,breve}#SET{id_objet,#ENV{id_breve}}]
    [(#ENV{id_article}|oui)#SET{objet,article}#SET{id_objet,#ENV{id_article}}]
    [(#ENV{id_objet}|oui)#SET{objet,#ENV{objet}}#SET{id_objet,#ENV{id_objet}}]

    je me dis que si j’ai une rubrique et un article dans #ENV, je me retrouve toujours avec l’article comme id_objet... ce qui explique ce que je constate...

    a quoi peut bien servir cette succession de test qui finiront toujours pas mettre un article dans id_objet ???

    et pour en revenir au besoin, existe-t-il une page html5editorial prévue pour afficher une rubrique, sous forme de liste article comme dans la page sommaire...

    merci d’avance...
    pam

    • Bonjour,
      tous ces tests servent à inclure un fichier avec les bons paramètres pour chaque situation. Mais au final c’est un seul fichier qu’on peut modifier pour modifier toutes les situations, où il est donc utilisé avec des paramètres différents.

      Le squelette qui s’occupe du contenu de la page rubrique est bien prévu : https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/rubrique.html?order=name
      C’est surtout parce qu’on peut y accéder par le fil d’ariane ou par le plan du site, mais le modèle de site n’est pas vraiment prévu pour y passer. Il vaut mieux utiliser le plugin court-circuit en complément pour ne pas passer du tout par la page rubrique, et rediriger sur le premier article directement.
      Sinon il faut modifier un peu le menu pour que la rubrique soit la page obligée, en supprimant l’effet d’ouverture/fermeture de la liste des articles.

      à choisir ...

    • merci de ta réponse,
      donc, s’il y a dans #ENV un article identifié, alors on ressort toujours avec l’affichage d’un article. L’ordre d’écriture des tests à son importance, car si par exemple, on a à la fois une rubrique et une brève dans #ENV, compte tenu que le test sur la brève est après, c’est lui qui va initialiser l’objet et donc faire appel à breadcrumb/inc-objet avec comme paramètre la brève... ai-je bien compris ?

      Ensuite, je n’utilise pas court-circuit mais mon souhait n’est pas d’afficher le premier article, mais au contraire de montrer un ensemble d’article comme dans content/sommaire.html après l’article hero, ou on voit un certain nombre d’article (nombre paramétré dans la config).. il me semble que la page rubrique devrait faire à peu près ça ?

      Enfin ta remarque sur l’effet d’ouverture/fermeture concerne le sidemenu... mais je ne vois pas le lien entre le choix dans le side menu et l’affichage dans la partie principale... Est-il possible quand on clique sur une rubrique ouverte du sidemenu, que son contenu liste d’articles et éventuellement de rubriques soit affiché dans la partie principale..?

      pam

    • Bonjour Pam,

      As tu trouvé une solution ?
      Ca m’intéresse également pour le faire.

      J’aimerai afficher les sous-rubrique puis les articles lorsque l’on clique sur n’importe quelle rubrique

      Merci

      Le site en construction : http://www.libairterre.fr

    • désolé, mais pas vraiment
      et comme mon site avait un but défini et limité dans le temps... je n’ai pas cherché plus

      http://manifestecommuniste2018.fr

      pam

    • Bonsoir,
      en relisant la question, il me semble que la réponse est dans ce fil, pour arriver à modifier un peu le menu pour ne pas afficher les articles et passer par la page rubrique : https://contrib.spip.net/Editorial-HTML5UP-4947#comment499693-498579

    Répondre à ce message

  • 2

    Bonjour,
    J’ai un gros problème avec le menu que je n’arrive pas à adapter. J’ai bien lu qu’il fallait modifier sidemenu.html et sidemenu-rubrique.html mais je ne m’en sors pas.
    Il s’agit du site www.maximaphiles francais.org
    Je souhaite que les articles n’apparaissent pas dans le menu. En effet, j’ai une rubrique blog avec plein d’articles et cela fait un peu fouillis tous ces articles dans le menu.
    Par ailleurs, si je clique sur une rubrique principale (par exemple BLOG) j’aimerai avoir ma page principale qui s’affiche comme lorsque je clique sur une sous-rubrique.
    Y a-t-il une personne pour me montrer les modifs à faire pour adapter ce menu ?
    Merci beaucoup.

    • Bonjour,
      Je cherche à faire la même chose.
      J’ai pu enlever les articles.
      Me reste à rendre le clic actif sur les rubriques pour afficher les articles de la rubrique

    • Bonjour,
      je vous propose de modifier le menu en excluant la rubrique que vous voulez du déroulement normal.
      Elle contient des articles mais on veut aller à la page rubrique qui présente les articles, et ne pas avoir les articles dans la colonne du menu. Il faut surcharger le fichier inclure/sidemenu.html et ajouter à la ligne 22 :
      [(#ID_RUBRIQUE|=={1}|oui)#SET{smenu#ID_RUBRIQUE,non}]
      Là il faut remplacer le 1 par l’identifiant de la rubrique en question.

    Répondre à ce message

  • 7

    Bonjour,
    Merci pour ce plugin. J’ai 2 questions pour lesquelles je n’ai pas trouvé de réponse.
    Est-il possible de ne pas faire apparaître le titre des articles dans le menu latéral gauche, mais uniquement les rubriques et sous-rubriques ?
    Où peut-on définir le nombre d’articles visibles sur la page d’accueil ?
    D’avance merci.

    • Bonjour,
      le menu se règle dans le fichier inclure/sidemenu.html
      https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_editorial/inclure/sidemenu.html
      Vous pouvez retirer ce qui concerne les articles et enregistrer le fichier modifié dans squelettes/inclure

      Le nombre d’articles visibles en page accueil se défini dans l’espace d’administration dans « Squelettes > Éditorial », sinon il faut modifier le fichier content/sommaire.html pour personnaliser
      https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_editorial/content/sommaire.html

    • Merci pour la réponse rapide !
      C’est OK pour le nombre d’articles visibles. Désolé je n’avais pas vu ce paramétrage.
      Par contre j’ai supprimé les lignes traitant des articles dans inclure/sidemenu.html (lignes 18, 19 et 29), mais mes articles apparaissent toujours dans le menu :
      http://www.circ-ien-saint-louis.ac-strasbourg.fr/explisite/

    • Il fallait pousser la recherche jusqu’à inclure/sidemenu-rubriques.html https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_editorial/inclure/sidemenu-rubriques.html pour trouver la même balise inclure concernant les articles...

    • Impeccable ! Merci beaucoup !

    • BARRET CHRISTIAN

      Hello, j’ai le même problème concernant le menu.
      Vous est il possible svp de me faire parvenir par mail les fichiers modifiés, a priori donc
      sidemenu.htlm et
      sidemenu-rubriques.html
      J’obtiens toujours une erreur de squelettes (balise EXPOSE en dehors de boucle)
      Merci d’avance

    • Pour side menu

      [(#REM)
              Barre de navigation, ouverte sur la hierarchie courante
      
              On fait un plan, et, quand on avance vers une rubrique,
              on l'affiche si son parent est expose ou est la racine du site. ]
      <B_rubriques>
      <nav id="menu">
              <header class="major">
              <center><em>Bienvenue sur le site du LibAirTerre</em></center></br>
              </header>
              
              <ul>
                      <li><a class="accueil" href="#URL_SITE_SPIP"><:accueil_site:></a></li>
              
                      <BOUCLE_rubriques(RUBRIQUES){par num titre, titre}{racine}>
                      [(#REM) si plus d'un article, la liste des articles, si au moins une sous-rubrique, la liste des sous-rubriques ]
                              #SET{smenu#ID_RUBRIQUE,non}
                              
                              <BOUCLE_test_rubriques(RUBRIQUES){id_parent}{0,1}>
                              </BOUCLE_test_rubriques>#SET{smenu#ID_RUBRIQUE,oui}</B_test_rubriques>
                              
                      <li>
                              [(#GET{smenu#ID_RUBRIQUE}|=={oui}|non)
                              <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero)]</a>]
                              [(#GET{smenu#ID_RUBRIQUE}|=={oui}|oui)
                              <span class="opener[ (#EXPOSE) active]">[(#TITRE|supprimer_numero)]</span>
                              <ul>
                              
                                      <INCLURE{fond=inclure/sidemenu-rubriques,env,id_rubrique,rubrique_on}{par num titre} />
                              </ul>]
                      </li>
                      </BOUCLE_rubriques>
              
              </ul>
              
      </nav>
      </B_rubriques>
    • Et sidemenu rubrique

      <BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
      <BOUCLE_srubriques(RUBRIQUES){id_parent}{par num titre, titre}>
      #SET{listearticles#ID_RUBRIQUE,non}
                      
              <li>
                      <a href="#URL_RUBRIQUE"[(#EXPOSE|ou{#ENV{rubrique_on}|=={#ID_RUBRIQUE}}|oui) class="on"]>[(#TITRE|supprimer_numero)]</a>
                      <ul>
                              [(#GET{listearticles#ID_RUBRIQUE}|=={oui}|oui)<INCLURE{fond=inclure/sidemenu-articles,env,id_rubrique,id_article}{par num titre} />]
                              <INCLURE{fond=inclure/sidemenu-rubriques,env,id_rubrique,rubrique_on}{par num titre} />
                      </ul>
              </li>
      </BOUCLE_srubriques>
      </BOUCLE_rubrique>

    Répondre à ce message

  • 1

    J’aimerais installer un .scss équivalent à perso. css
    et j’aimerais pouvoir changer couleur du site par couleur de l’auteur un peu partout
    J’ai besoin de conseils pour faire cela dans les règles. Merci

    • Soit vous agissez directement dans les squelettes, et il faut chercher du côte de la balise #SESSION qui vous permet de distinguer l’auteur qui est connecté.
      Soit vous passez par une feuille de style dynamique, où vous pourrez déclarer des styles différents pour chaque auteur.
      Si vous voulez faire vite, utilisez directement les squelettes, si vous voulez faire bien, utilisez la feuille de styles.... enfin ce n’est que mon avis :o)

    Répondre à ce message

  • 4

    Dans le squelette [(#MODELE{icone}{icone=fa-rocket})] fonctionne bien
    juste en dessous [(#MODELE{icone}{icone=fa-diaspora})] n’apparaît pas
    Il est pourtant bien dans la liste des icones lorsqu’on accède à font-awesome par le lien donné plus haut.
    Comment puis-je court-circuité le plugin pour y mettre <i class="fab fa-diaspora"></i> ?

    Répondre à ce message

  • 2

    Bonjour,
    J’ai un petit soucis avec Font Awsome moi aussi. J’ai récupéré des icones sur le site de font awsome mais elles n’apparaissent pas toutes. Pour certaines pas de problème et pour d’autre rien ! Qu’est-ce qui pourrait causer le problème et comment y remédier ?
    Merci de votre aide.

    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