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é
101 discussions
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
Bonjour,
il faudrait compléter le fichier rubrique.html pour qu’il prenne en compte les sites référencés : https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/rubrique.html
C’est quelque chose qui reste à faire....
merci j aimerai bien tenter le coup mais je m’y connais pas assez pour écrire des lignes spip
peut etre pouvez vous m’indiquer un site pour apprendre cela merci
Bonjour,
déjà il y a des bases ici : https://www.spip.net/fr_rubrique135.html
Ensuite il faut bien regarder comment est fait le plugin, pour les pages existantes :
- https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial
(ou le dossier que vous avez téléchargé sur votre ordinateur)
Le contenu d’une page se trouve dans le dossier « content » :
- https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content
dans l’idée, il faudrait que la page « site.html » soit créée sur le modèle des autres, en changeant la boucle et le contenu de la boucle (voir comment cette page est faite dans le squelette-dist/site.html)
Il y a aussi la liste ou les forums pour trouver de l’aide :
- http://listes.rezo.net/mailman/listinfo/spip/
- https://forum.spip.net/fr_rubrique193.html
Sinon revenez par ici poser une question, ou montrer un bout de code pour qu’on termine...
Bon SPIP !
:o)
Répondre à ce message
vraiment TB ce plugin bravo bien trouvé
Répondre à ce message
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
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
Bonjour,
a priori il faudrait intégrer une seule ligne dans le squelettes content/article.html
https://zone.spip.org/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_editorial/content/article.html#L15
Ajouter juste ceci :
[(#PETITION|oui)<INCLURE{fond=inclure/petition,id_article,env,ajax} />]
Et ensuite l’enregistrer dans /squelettes/content/article.html
Mais pour le design, je ne sais pas trop ce que ça va donner...
Répondre à ce message
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
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; }
Bon. J’ai agrandi les images et mis davantage de texte... Et ça va mieux. Merci
Répondre à ce message
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
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...
Super ! Merci
Répondre à ce message
Bonjour,
Comment réduire l’espace en haut du titre d’un article ou d’une rubrique...
Je me perds sur les css
Merci
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 :
Répondre à ce message
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
Bonjour,
il y a 2 « ? » dans la première url, il faut remplacer le second par un « & » et ça devrait mieux aller...
En effet... C’est logique
Merci ça marche beaucoup mieux
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
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
C’est réglé : Problème de CSS...
Merci quand même
Répondre à ce message
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
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 : |