SPIP-Contrib

SPIP-Contrib

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

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

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

Éditorial (HTML5UP)

27 novembre 2017 – par chankalan – 86 commentaires

15 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 26 janvier 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • 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

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

    Je n’ arrive pas...

    Lorsque j’essaie de voir la structure d’une page avec ?var_mode=inclure je n’obtiens rien...

    Exemple : http://actes-de-lecture.org/spip.php?article4?var_mode=inclure

    Mais cela fonctionne sur http://actes-de-lecture.org/?var_mode=inclure

    Ce que je cherche à faire : supprimer la partie « laisser un commentaire » dans la page article...

    Merci de votre aide

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

      Bonjour,
      il y a 2 «  ? » dans la première url, il faut remplacer le second par un « & » et ça devrait mieux aller...

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

      En effet... C’est logique

      Merci ça marche beaucoup mieux

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

      Vous pouvez retirer les forums dans les squelettes, mais vous devriez commencer par ne pas activer les forum sur les articles, sur la page « configuration > forums » par exemple pour le faire sur tous les articles existants... sinon modifier l’option sur chaque page de chaque article.

    Répondre à ce message

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

    Bonjour,

    Bravo, bravo.

    J’essaie de prendre en main ce squelette.
    Un souci que je ne comprends pas : le menu gauche n’est visible qu’en partie. Voir : http://actes-de-lecture.org/spip.php?article2

    Comment faire pour qu’il s’affiche normalement ?

    Un grand merci pour votre réponse !

    Robert

    Répondre à ce message

  • Le 27 mars à 09:56, par Philippe ROCA En réponse à : Éditorial (HTML5UP)

    Bonjour

    Super squelette, très propre, très clair ; Merci beaucoup ;

    J’ai constaté, que la classe « 4u 12u$(small) » n’avait pas d’effet pour élargir la colonne pour l’affichage sur téléphone.

    Pour résoudre le problème, j’ai modifié la lige 257 du fichier css/libs/_skel.scss
    Il faut passer « $x : ’\ \28’ + $breakpointName + ’\ \29’ ; »
    en « $x : ’\28’ + $breakpointName + ’\29’ ; »
    La compilation en main.css génère 2 \ qui bloquent l’effet voulu.
    Un idée pour la prochaine mise à jour.

    Bonne journée et encore merci
    Philippe

    Répondre à ce message

  • Le 21 mars à 17:50, par P. HOUPLON En réponse à : Éditorial (HTML5UP)

    Merci pour ce squelette, particulièrement bien adapté à nos besoins associatifs.
    J’ai effectué quelques modifications, basiques, permettant d’intégrer les derniers commentaires et le classement des articles sur la colonne de gauche. J’ai également ajouté des informations pour chaque article : auteur, date, lecteurs.
    C’est à voir ici : http://www.aube-durable.fr/

    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

  • Acces Restreint 3.0

    11 décembre 2008 – 836 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Champs Extras 3

    16 janvier 2012 – 646 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Export Spip vers Wordpress

    11 mai 2013 – 35 commentaires

    Problématique On souhaite migrer un site spip vers un site wordpress. Si seul le contenu des articles nous intéresse, on peut très bien utiliser un des plugins de Wordpress permettant d’importer un flux rss, ce flux rss étant créé par Spip. Cette (...)

  • LIM : alléger l’espace privé

    20 avril 2015 – 47 commentaires

    Ce plugin permet de désactiver l’affichage de blocs ou de boutons, présents par défaut dans SPIP mais qui peuvent devenir inutiles dans le cadre de votre projet. Il allège du coup l’interface d’édition et supprime d’éventuels risques de confusion dans (...)

  • Partageur

    29 janvier 2011 – 52 commentaires

    Permet de recopier facilement des articles d’un site SPIP partageur à l’autre. Présentation Ce plugin est né d’un besoin de partager des articles entre sites SPIP. Contrairement aux plugins SPIP2SPIP, Flux RSS en articles le principe d’import (...)

Ça spipe par là