HTML5UP Éditorial

27 November 2017 – by chankalan – 218 commentaires

1
2
3
4
5
26 Votes

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

Table of contents

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...

updated on 7 December 2019

Discussion

5 ans 1 an 3 mois Sans limite
Last published
Filtrer

62 discussions

  • 5
    rcaron

    Bonjour,

    Bravo pour ce squelette...

    Sur le site actes-de-lecture.org, j’ai un problème que je n’arrive pas à résoudre. Il s’agit du menu de gauche.
    Les revues apparaissent par année inverse (ça c’est bon)
    Mais dans la rubrique “Thèmes”, l’ordre alphabétique est là aussi inverse. Or je la voudrais normal.
    Quel fichier modifier et comment ?

    Un grand merci

    Robert

    • JLuc

      Pour savoir quel fichier modifier, ajoute ?var_mode=inclure ou &var_mode=inclure à l’url de la page

    • chankalan

      Bonjour,
      j’imagine que c’est la même boucle qui va trier en sens inverse, par date ou par titre de la même manière.
      Quelle sont les critères de cette boucle ? Celle d’origine ou vous l’avez déjà modifiée ?

    • rcaron

      Merci,

      sidemenu.html :

      [(#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">
                <h2>Menu</h2>
        </header>
        
        <ul>
                <li><a class="accueil" href="#URL_SITE_SPIP"><:accueil_site:></a></li>


                <BOUCLE_rubriques(RUBRIQUES){par titre}{inverse}{racine}{id_rubrique!=1}>
                [(#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){par titre}{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</a>]
                        [(#GET{smenu#ID_RUBRIQUE}|=={oui}|oui)
                        <span class="opener[ (#EXPOSE) active]">#TITRE</span>
                        <ul>

                                <INCLURE{fond=inclure/sidemenu-rubriques,env,id_rubrique,rubrique_on} />
                        </ul>]
                </li>
                </BOUCLE_rubriques>
        
        </ul>
        
</nav>
</B_rubriques>

      et side-rubriques.html :

      <BOUCLE_rubrique(RUBRIQUES){id_rubrique}>
<BOUCLE_srubriques(RUBRIQUES){id_parent}{par titre}{inverse}>


        <li>
                <a href="#URL_RUBRIQUE"[(#EXPOSE|ou{#ENV{rubrique_on}|=={#ID_RUBRIQUE}}|oui) class="on"]>#TITRE</a>
                <ul>

                        <INCLURE{fond=inclure/sidemenu-rubriques,env,id_rubrique,rubrique_on} />
                </ul>
        </li>
</BOUCLE_srubriques>
</BOUCLE_rubrique>

      Je ne sais pas comment faire...

    • chankalan

      Bonsoir,
      c’est bien la même boucle qui sert aux deux cas, et le plus simple est peut-être de mettre un numéro dans le titre des rubriques que vous voulez trier dans le sens inverse.
      Il y a le plugin Numérotation rapide qui peut vous aider : https://plugins.spip.net/numero.html?compatible_spip=3.2
      Comme le tri est en sens inverse, le dernier numéro sera en premier dans la liste...

    • rcaron

      Oui, merci. Réglé avec numérotation.

      Merci

      Robert

    Reply to this message

  • 4
    Frédérique

    Bonjour,

    depuis aujourd’hui , derrière l’icône “bars” appelant le sidemenu, le terme “toggle” apparaît sous chrome (pas les autres navigateurs...) Je ne vois pas quoi faire. Auriez vous une idée?

    cette erreur apparaît aussi sur d’autres sites que le mien aviron-melun.com utilisant ce squelette.

    Merci de votre éclairage!

    • Frédérique

      Je me réponds, Je viens de trouver, j’ai modifié le js. En espérant que ça tienne la route. Merci!

    • rcaron

      Et comment avez-vous fait ?

      Merci

      Robert

    • Frédérique

      dans le plugin
      plugins/auto/html5up_editorial/v1.1.14/javascript/main.js

      j’ai remplacé la ligne 107 par :

      1. $('<a href="#sidebar" class="toggle"></a>')
    • rcaron

      Ben, chez moi, ça ne marche pas... (actes-de-lecture.org)

      Robert

    Reply to this message

  • 7
    Michel Gofman

    Bonjour
    Je suis en train d’installer le gabarit Editorial par migration d’un site “classique”.
    J’ai des soucis d’affichage d’images notamment d’icônes d’articles pour le moment.
    Je relie çà avec le plugin Medias, qui apparemment refuse de s’activer. Idem pour Archiviste qui semble nécessaire.
    A chaque essai j’ai un message du genre “la désactivation n’a pas marché; l’activation a marché” mais les plugins sont toujours classés Inactifs.
    Y aurait il des incompatibilités avec d’autres plugins
    Un peu d’aide svp.
    Merci d’avance
    MG
    site :mgdevelop.eu

    • Michel Gofman

      Bip ? Pas de réponse ?

    • guilaind

      En tant qu’utilisateur Spip depuis des années, je règle un problème d’activation de plugin en supprimant les plugins récalcitrants par l’interface de gestion des plugins sinon en ftp, puis en les téléchargeant/activant à nouveau.

      Si ça ne marche pas, je désactive tous les plugins et réactive un par un jusqu’à ce que je trouve l’incompatibilité. D’où l’intérêt d’un environnement de test différent de la version en cours.

    • Michel Gofman

      Merci Guilaind pour la méthode très pragmatique.
      J’avais espéré que qqn avait eu le pb avant moi. Comme plugins je n’avais avant de charger Edition est les plugins nécessaires (en dernière version) que Couteau suisse er Crayons. La désactivation de Couteau n’a rien changé. J’ai aussi Mediabox, mais la désactivation n’a rien fait non plus.
      Je suis en SPIP 327 avec php 72. tous les plugins sont à jour.
      Je n’ai pas été fouiller dans les logs.
      A vot’ bon cœur. Bonne année
      Michel

    • Michel Gofman

      Bonjour
      En m’inspirant du conseil de Guilaind, j’ai réussi à activer tous les plugins en particulier Archiviste et Medias. Voici comment.
      J’ai désactivé Editorial, puis j’ai été en FTP dans l’arborescence à plugins-dist/, et j’ai supprimé les répertoires Medias et Archiviste. Puis j’ai activé les trois plugins et avec quelques messages çà a marché.
      Je suis maintenant en train de terminer la mise en place de mon site et j’ai plus d’images qui s’affichent. Mais ce que fait le plugin Medias reste un mystère pour moi..
      Merci
      Michel

    • chankalan

      Bonjour,
      il faut peut-être vérifier la version de PHP qui est utilisée sur l’hébergement : ouvrez la page /ecrire/?page=info pour le savoir.
      Sinon vous ne devriez pas supprimer des plugins du dossier plugins-dist sans savoir ce que vous faites... Médias gère tous les documents, c’est la médiathèque de votre site, et Archiviste gère les fichier zip et autres compressions, il est utilisé par d’autres plugins...

    • Michel Gofman

      Merci Chankalan pour ces conseils.

      Le site est hébergé chez OVH et c’est du PHP 7.2 (7.3 pour les nouveaux hébergements).

      Sabrer à la sauvage en ftp dans les plugins n’est pas effectivement une préconisation de base pour débutant. J’ai mis pas mal de temps à m’y résoudre et encore avec précaution. Çà a marché ... Je suppose que, quand la première installation a raté, pour les fois suivantes il y a un souci de droits sur les répertoires. Pourtant les messages étaient bons.

      Bon çà marche à 90%. http://www.michelgofman.fr et c’est très beau sur tous les terminaux! Merci.

      Il me reste cependant 2 questions ;
      1. concernant Fontawesome : ils m’ont fait m’inscrire, créer un kit et donné un script à mettre .... quelque part. Pourtant çà marche. Que dois-je faire? Ignorer?
      2. pour l’article “hero de gauche” j’ai presque ce que je veux. Mais la balise “<articleXXX”, après le logo me fabrique un texte .... avec le titre répété, alors que la suite du descriptif s’affiche. Il n’y a pas de champ “resume”. Y a t’il quelque-part une documentation de référence sur ces balises ?

      Salutations à tous, bonne année 2020.
      Michel

    • guilaind

      Euh.... je n’ai pas la sensation d’avoir suggéré de désactiver des plugins en dist !!!

      Certes je n’ai pas apporté la précision, néanmoins elle est présente partout dans les docs : on ne peut “jouer” qu’avec les plugins personnalisés, pas avec les plugins de base du PMS.

    Reply to this message

  • Ludovic

    Bonjour,

    J’aime beaucoup la version SPIP de ce modèle Editorial.
    Je n’avais pas fait de mise à jour depuis 1 an et je viens enfin de passer à la dernière version (1.1.16).
    Depuis, la lecture des articles sur mon PC (pas sur smartphone) manque de “netteté” : comme si la police de caractères était un peu compressée en largeur. Ce n’était pas le cas avant cette mise à jour.
    Avez-vous une piste pour revenir à un bon affichage ?

    Merci,
    Ludovic

    Reply to this message

  • Nebelman

    Bonjour,
    Lorsque la fenêtre est suffisamment large pour que la colonne de menu à gauche soit affichée par défaut, et pas suffisamment haute pour afficher la totalité des deux parties (menu gauche et partie principale), il n’y a alors pas d’ascenseur pour pouvoir remonter dans la colonne du menu sans toucher à l’autre partie. Je ne sais pas si c’est volontaire mais comme cet ascenseur existe lorsque la colonne de gauche est affichée volontairement dans un contexte étroit (où elle est masquée par défaut), et qu’il s’affiche alors uniquement lorsque la fenêtre n’est pas assez haute pour le contenu, ce qui est parfait, il me plairait d’avoir le même comportement en contexte plus large.
    D’où ma question : comment faire pour obtenir un ascenseur dédié à la colonne de gauche en contexte large (quand elle est affichée par défaut) dès que la hauteur de la fenêtre ne permet pas d’en afficher toute la hauteur ?

    Reply to this message

  • lucTech

    Dans ma lancée... j’ai rendu le nombre de colonnes d’affichage d’un article configurable. Je préfère 1). 2 reste le défaut. V1.1.16.

    Reply to this message

  • lucTech

    Bonjour,
    Je viens de commiter (V 1.1.15) la prise en compte des mots clés. Avec possibilité de configuration de la navigation du menu gauche sur les mots à la place des rubriques.
    Ca vous va comme cela ?
    Luc

    Reply to this message

  • rcaron

    Bonjour,

    Encore moi !

    Sur le site actes-de-lecture.org je mets en ligne une revue pédagogique.

    J’ai une rubrique “Par numéro” et une autre, que j’aimerais faire “Par thème”.

    J’utilise le plugin “Polyhierarchie” mais je n’arrive pas à afficher les articles classés dans les thèmes. Quel fichier modifier ?

    Merci de votre aide.

    Robert

    Reply to this message

  • 3
    rcaron

    Problème !

    http://actes-de-lecture.org/spip.php?article140

    Le menu de gauche se replie. En descendant dans l’article à la hauteur de l’image, il y a une superposition de l’article et du menu.

    D’où ça vient ? Que faire ?

    Merci, merci

    Robert

    • chankalan

      Bonjour,
      il y a des caractères qui apparaissent tout en haut de la page, est-ce qu’il peut y avoir une surcharge avec une erreur ? un caractère manquant ou en trop ?

    • DD

      Bonsoir, je crois que c’est du à \n qui est inséré en trop dans le head de bigfoot ou bien éditorial, je ne sais plus. Est-ce que tes plugins sont à jour ?

    • rcaron

      Désactivé plugin HTML5 et du coup le \n disparaît.

      Pour le reste des balises couteau-suisse mal fermées. Apparemment tout est rentré dans l’ordre.

      Merci à vous

    Reply to this message

  • 1
    rcaron

    J’ai essayé de définir dans la configuration du squelette un “article majeur”... Pour voir.

    Mais je n’arrive pas à vider ou annuler ce choix; Comment faire ?

    Merci

    Robert

    • chankalan

      Bonjour,
      oui, c’est pas très très ergonomique mais c’est signalé et ce sera prochainement amélioré, et donc pour retirer un article il faut en choisir un à nouveau pour voir la petite croix rouge qui permet de le retirer de la sélection...

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom