SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 80 visiteurs en ce moment

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

Éditorial (HTML5UP)

27 novembre 2017 – par chankalan – commentaires

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

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->#]>

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

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>

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 13 décembre 2017

Retour en haut de la page

Vos commentaires

  • Le 5 décembre à 09:55, par AlainF En réponse à : Éditorial (HTML5UP)

    Bonjour,
    je serais heureux de faire ce travail pour la version Zerofour.
    Quelles sont les directions à suivre et les choses à éviter ?
    Encore merci pour ce travail !
    Alain

    • Le 5 décembre à 10:40, par chankalan En réponse à : Éditorial (HTML5UP)

      Bonjour,
      il y a deux ou trois choses en réflexion, rien d’obligatoire de toute façon, mais il est possible d’échanger des paramétrages entre les différents squelettes html5. Par exemple si chaque squelette utilise un formulaire de configuration nommé configurer_html5up.html, alors chaque paramètre identique sera repris en changeant de squelette
      https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_editorial/formulaires/configurer_html5up.html
      Si une couleur principale est définie de la même manière, ou bien des informations de contact, elles seront identiques d’un squelette à l’autre.

      Du coup il y a aussi les langues, pour les chaînes de ce formulaire ou pour d’autres nécessaires au squelette, qui peuvent être mutualisées :
      https://zone.spip.org/trac/spip-zone/browser/_squelettes_/html5up_editorial/lang/html5up_fr.php

      Sinon il faut faire en fonction des besoins de chaque squelette, qui ne sont forcément pas les mêmes.
      Et puis en fonction de ce qu’on veut dès le départ, si le site est bilingue, de quelle manière l’est-il (un secteur par langue ou avec des balises multi ?), ou alors on reporte cette idée à plus tard...

      En tout cas c’est une bonne idée, zerofour à l’air pas mal...

    • Le 5 décembre à 14:57, par AlainF En réponse à : Éditorial (HTML5UP)

      C’est vrai que je suis sur un site vitrine simple que je veux moderniser et donc une seule langue.
      Les couleurs de mon logo : rouge
      Le formulaire se limite à la page de l’auteur principal...

      J’hésite entre Zerofour et Halcyonic.
      Si des éléments commun peuvent être trouvés c’est un plus.

      Je vais faire des tests , mais j’ai déjà des idées de sites qui seraient mis en valeur par ce choix sur html5up.net...
      Il n’y a plus qu’à !!!

    • Le 5 décembre à 15:47, par AlainF En réponse à : Éditorial (HTML5UP)

      C’est avant tout pour mettre au gout du jour mon site et surtout le passer en responsive.
      Une seule langue, une couleur principale : celle du logo (rouge)
      Le formulaire est celui de la page « auteur » du webmestre...

      J’hésite encore entre Zerofour et Halcyonic.
      Pourquoi pas en faire profiter d’autres ?

      Il n’y a plus qu’à !!!

    Répondre à ce message

  • Le 2 décembre à 09:27, par Valéry En réponse à : Éditorial (HTML5UP)

    J’ai le message

    SCSS : Echec compilation fichier plugins/auto/html5up_editorial/css/main.scss
    expecting color : line : 158 »

    Je suis pourtant en php 5.6. Peut-être un problème lié à la configuration de la couleur ?

    N’est il pas possible de disposer d’une version compilée des css plutôt que d’utiliser un préprocesseur en production ?

    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

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2294 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • SPIP 3, Agenda et FullCalendar

    6 août 2012 – 318 commentaires

    Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda. (...)

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 28 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Bloc 1 : Zone d’entête Nom du site Slogan si plugin bandeau présent Zone (...)

  • Lecteur pdf javascript pdf.js

    20 février 2012 – 162 commentaires

    Ce plugin est basé sur le projet pdf.js qui permet une lecture en ligne des pdfs depuis le navigateur. Ce plugin est expérimental et les contributions sur la zone sont les bienvenues. Avantages Open source Ne requiert pas flash et donc (...)

  • GIS 4

    11 août 2012 – 1420 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 (...)