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/ avant la v1.3 de Editorial, ensuite c’est la version de Fontwesome 5 Free dans les catégories Solid/Regular/Brands -> precisions)
- |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=fa-rocket (ou tout autre icône de FontAwesome https://fontawesome.com/v4.7.0/icons/)
- |taille=60px
<icone|icone=fa-rocket|taille=50px>
Fontawesome 5 Free
Avec la version 1.3 de Editorial, Fontawesome 5 est utilisé : https://fontawesome.com/icons?d=gallery&p=2&s=brands,regular,solid&m=free
Les icônes s’appellent dès lors dans les modèles en ajoutant la valeur regular (ou rien), solid ou brands au paramètre icone, de cette manière :
<iconebloc|icone=fa-rocket|left|iconetitre=mon titre|iconetexte=tout le texte ici avec mise en {{forme}} et lien [hypertexte->#]>
ou
<icone|icone=fa-rocket solid|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.
Nota Bene avant mise à jour
Pour suivre la mise à jour du plugin SCSSPHP, il a fallu mettre à jour le thème Éditorial, qui utilise une autre version de la librairie d’icônes Fontawesome.
v1.3.4 : La librairie Fontawesome passe en version 5, ce qui nécessite certainement de renommer les appels, cf les précisions.
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...
Discussions par date d’activité
102 discussions
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
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...
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’à !!!
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
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 ?
Bonjour,
en effet, j’ai corrigé avec la version 1.1.2 : https://zone.spip.org/trac/spip-zone/changeset/107861
Merci du signalement....
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |