SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 128 visiteurs en ce moment

Accueil > Squelettes > Squelettes spéciaux > ÉDITORIAL (HTML5UP) > Éditorial (HTML5UP)

Éditorial (HTML5UP)

27 novembre 2017 – par chankalan – 98 commentaires

21 votes

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 http://fontawesome.io/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.

Voir en ligne : https://plugins.spip.net/html5up_ed...

Dernière modification de cette page le 5 septembre 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 26 août à 09:07, par Jean Paul Aubel En réponse à : Éditorial (HTML5UP)

    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

  • Le 24 juillet à 20:56, par metaldark En réponse à : Éditorial (HTML5UP)

    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

    • Le 24 juillet à 21:01, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      il faut peut-être vérifier que le plugin est entier et correctement téléchargé ?
      https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/sommaire.html
      Sinon, est-ce identique avec et sans plugins ?

    • Le 26 juillet à 10:13, par metaldark En réponse à : Éditorial (HTML5UP)

      Bonjour,
      Merci pour votre réponse.
      J’ai réinstaller mon spip de test, et tout est rentré dans l’ordre.
      Ce plugin est très intéressant, et j’aimerai le personnalisé pour l’adapter à nos besoins.
      Je souhaiterais par exemple agrandir l’affichage du logo spip et ajouter après le nom du site une image pour faire une bannière.
      Dans quelle partie du squelette, je dois procéder à ces modifications.
      Merci d’avance.

    • Le 26 juillet à 11:16, par chankalan En réponse à : Éditorial (HTML5UP)

      ce devrait être par là :
      https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/header/dist.html
      à surcharger dans le dossier squelettes du site...

    • Le 31 juillet à 00:15, par Metaldark En réponse à : Éditorial (HTML5UP)

      Bonjour,
      merci pour toutes ces informations, j’avance dans ma personnalisation.
      Il me manque une information : dans quel fichier est géré la taille du logo de mon site ? Il est toujours réduit par rapport à l’original. Je souhaiterais pouvoir personnaliser cette réduction de taille.
      merci pour votre aide.

    • Le 3 septembre à 17:40, par Fred En réponse à : Éditorial (HTML5UP)

      Bonjour, l’affichage du logo du site est dans le header_dist.html

      Il faut modifier les infos de la ligne 2 en jouant sur les chiffres

      Quelqu’un a t’il réussi à intégrer un agenda dans ce plug-in ?

    Répondre à ce message

  • Le 25 août à 09:59, par Jean Paul Aubel En réponse à : Éditorial (HTML5UP)

    vraiment TB ce plugin bravo bien trouvé

    Répondre à ce message

  • Le 3 août à 11:12, par Fred En réponse à : Éditorial (HTML5UP)

    Bonjour, le thème est très sympa et très intéressant.

    Je voudrai savoir comment intégrer un plan type Google map ainsi qu’un calendrier permettant d’afficher toute sorte d’événements.

    Bravo pour le travail

    Répondre à ce message

  • Le 7 juillet à 12:06, par pamillet En réponse à : Éditorial (HTML5UP)

    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

    • Le 7 juillet à 20:20, par chankalan En réponse à : Éditorial (HTML5UP)

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

    • Le 9 juillet à 22:12, par pamillet En réponse à : Éditorial (HTML5UP)

      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

    Répondre à ce message

  • Le 27 juin à 08:43, par pamillet En réponse à : Éditorial (HTML5UP)

    bonjour

    utilisateur ancien de sarkaspip, j’ai choisi ce squelette pour un nouveau site qui ne devrait pas avoir trop d’articles, mais pour lequel j’ai besoin de la gestion des pétitions... Or elles ne sont pas incluses dans les squelettes... j’essaie de le faire pas à pas en m’inspirant de sarkaspip, mais c’est un peu lourd....

    merci de tout conseil pour le faire de manière simple....

    et bien sûr, si c’était prévu dans une prochaine version, ce serait super... !!

    pam

    Répondre à ce message

  • Le 1er mai à 10:07, par rcaron En réponse à : Éditorial (HTML5UP)

    J’avance, j’avance... Grâce à votre aide...

    Nouveau petit souci : Dans la page http://actes-de-lecture.org/spip.php?article8 par exemple, je renvoie à des fichiers pdf par des liens du type page X

    ça marche mais les pdf apparaissent à la fin de l’article dans la partie « Documents joints »
    Comment supprimer cet affichage qui fait doublon ?

    Un grand merci

    Robert

    • Le 3 mai à 10:06, par rcaron En réponse à : Éditorial (HTML5UP)

      Pas de solution à mon problème ?

      Merci

      Robert

    • Le 23 juin à 15:57, par pamillet En réponse à : Éditorial (HTML5UP)

      sauf erreur, en spip3 c’est un paramètre du plugin... article_pdf
      « Enregistrer et lier le pdf en tant que document »
      pam

    • Le 24 juin à 08:02, par rcaron En réponse à : Éditorial (HTML5UP)

      Merci pour votre réponse...

      Mais je ne vois pas où et quoi modifier.

      Vous pouvez m’en dire plus ?

      Merci

      Robert

    • Le 27 juin à 08:38, par pamillet En réponse à : Éditorial (HTML5UP)

      si vous avez bien le plugin « article-pdf », il faut aller dans la configuration/gestion des plugins, trouver la ligne article_pdf, cliquer sur l’cione des outils sur la droite, et il y a une seule ligne de configuration, qui doit être cochée chez vous et qu’il faut décocher...
      « Enregistrer et lier le pdf en tant que document »

      pam

    • Le 27 juin à 09:56, par rcaron En réponse à : Éditorial (HTML5UP)

      Merci, merci...
      Cela ne règle pas mon problème. Je n’ai pas le plugin article_pdf installé.
      Mes pdf apparaissent en fin d’article alors qu’ils sont en lien dans l’article lui-même. Et je ne vois pas comment éviter ce doublon.

      Robert

    • Le 28 juin à 07:45, par pamillet En réponse à : Éditorial (HTML5UP)

      donc en fait, c’est simplement ton squelette qui affiche (comme beaucoup de squelettes) les documents associés à un article en fin d’article... il faut donc le modifier... en gros, dans le fichier article.html de ton squelette, il doit y avoir une boucle « DOCUMENTS » à la fin...

      par exemple dans un squelette spipr blog, il y a dans article.html

      <aside>
                      [(#REM) Gestion du portfolio et des documents ]
                      [(#INCLURE{fond=inclure/documents,id_article})]
              ...

      si tu enlèves ces deux lignes, les documents ne s’affichent plus... (dans aucun article !)

      pam

    • Le 28 juin à 08:48, par chankalan En réponse à : Éditorial (HTML5UP)

      Ou il faut peut-être vérifier si inclure/documents.html a été modifié auparavant. Le squelette par défaut n’affiche pas les documents en double, celui de la dist comme celui de Éditorial...

    Répondre à ce message

  • Le 29 avril à 09:20, par rcaron En réponse à : Éditorial (HTML5UP)

    Petit souci...

    Page exemple : http://actes-de-lecture.org/spip.php?article5

    Le sous-titre « Articles » ne se colle pas complètement à gauche...

    Une idée pour corriger ?

    Merci

    Robert

    • Le 1er mai à 02:31, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      C’est dû à la rédaction et à l’image flottante à gauche, et au fait qu’il y ait peu de texte après l’image. Vous pourriez empêcher les intertitres de suivre le flottement, mais ça ne conviendra peut-être pas à tous les coups non plus...
      En CSS h3 { clear:both; }

    • Le 1er mai à 10:04, par rcaron En réponse à : Éditorial (HTML5UP)

      Bon. J’ai agrandi les images et mis davantage de texte... Et ça va mieux. Merci

    Répondre à ce message

  • Le 26 avril à 11:06, par rcaron En réponse à : Éditorial (HTML5UP)

    Bonjour,

    Comment supprimer les choix d’articles hero et majeur ?

    J’avais choisi des articles mais je ne souhaite plus utiliser ces deux fonctions et donc ne plus faire appel à des articles.

    Merci

    Robert

    • Le 26 avril à 11:29, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      c’est peut-être un point à améliorer dans SPIP, mais dans l’immédiat, il faut re-sélectionner un article pour pouvoir cliquer sur une petite croix rouge qui annule et vide la sélection...

    • Le 26 avril à 11:41, par rcaron En réponse à : Éditorial (HTML5UP)

      Super ! Merci

    Répondre à ce message

  • Le 23 avril à 10:44, par rcaron En réponse à : Éditorial (HTML5UP)

    Bonjour,

    Comment réduire l’espace en haut du titre d’un article ou d’une rubrique...

    Je me perds sur les css

    Merci

    • Le 23 avril à 10:53, par chankalan En réponse à : Éditorial (HTML5UP)

      Je suis pas sûr d’avoir bien saisi, mais dans un nouveau fichier /squelettes/css/perso.css vous pouvez tenter de modifier les valeurs de cette règle :

      #main > .inner > section {
         padding: 5em 0 3em 0;
      }

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • CKeditor 3.0

    4 octobre 2009 – 1232 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • PHANTOM (HTML5UP)

    18 juillet – 25 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Site multilingue facile

    3 mai 2012 – 103 commentaires

    Site multilingue facile permet de mettre en place facilement un site multilingue avec une langue par secteur. Introduction Même si le multilinguisme est nativement intégré dans spip, réaliser un site multilingue n’est pas toujours évident. Ce (...)

  • Fulltext

    14 mars 2009 – 217 commentaires

    Ce plugin permet d’une part d’exploiter le mode de recherche FULLTEXT de MySQL et d’améliorer ainsi énormément les recherches par rapport au fonctionnement natif de SPIP, et d’autre part d’indexer le contenu de certains (...)

  • GIS 4

    11 août 2012 – 1494 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)