Il vient en « surcharge » des squelettes de la Distribution SPIP. Voir à ce sujet « Où placer les fichiers de squelettes ? »
Voir le site de démo. Le jeu de squelettes est tiré des travaux du développeur aj, visible sur le site html5up.net. Il est distribué sous licence Creative Commons. Il est fonctionnel (voir site Brindefolie.com).
Il est possible de télécharger les sources des fichiers du site de démo.
[Mise à Jour]
Ce plugin a été revisité en novembre 2020. il est garantie « produit pendant le second confinement ». Il est compatible avec la dernière version de SPIP. Il fonctionne actuellement avec la version Version 3.2.8 [24473].
Il nécessite pour afficher la galerie dans le squelette article le plugin Galleria : https://contrib.spip.net/Galleria.
Les modifications suivantes ont été apportées :
- affichage des icônes,
- affichage dans Contenu (situé dans partie haute) des dossiers et sous-dossiers
- fonctionnement des commentaires écriture/lecture autant pour les pages articles que brèves,
- affichage des photos avec le plug-in Galleria
Les modifications et réparations des squelettes, préparation du plug-in et versement de ce dernier dans la zone, a été assuré par Reda A.
Testez-le
Téléchargement
Installation et dépendances
Le squelette se présente sous la forme de plugin et s’installe donc comme tous les plugins.
Il nécessite les plugins suivants :
- nuage,
- dépublie,
- galleria.
Il utilise le plugin twitter.
Pour s’assurer le bon fonctionnement du jeu de squelette ainsi que des plugins, on pensera à vider le cache après installation.
Les squelettes et les inclusions
Le graphisme des squelettes ne reprend pas exactement l’interface graphique tel que proposé par le développeur aj. Ainsi dans la page sommaire.html
, la partie documentée sous l’appellation <!-- Banner -->
a été enlevée.
Il en est de même pour la page article.html tirée de la page d’origine no-sidebar.html
dont l’image en dessous du titre n’apparait pas. Les pages left-sidebar.html
et right-sidebar.html
, n’ont pas été intégrées dans le plugin.
De manière générale, les squelettes du premier niveau contiennent tous la commande <INCLURE>
vers des fichiers de deuxième et troisième niveau. Ainsi tous les squelettes du premier niveau contiennent une inclusion du squelette footer.html
, lui-même ayant une inclusion du squelette retour_haut.html
. Seul le fichier du deuxième niveau (partie_droite_sommaire_1.html) contient un include pour le fichier flash_infos.html
(Voir à ce sujet, le chapitre « Le fichier flash_info.html
et utilisation du plugin Dépublie »).
Pour une bonne compréhension, vous pouvez visualiser le contenu du plugin sur le dépôt de la zone.
Même si ce plugin est encore en développement, dans la mesure du possible Tous les squelettes sont documentés permettant de connaître chaque partie du code html. Ex : <!-- Partie haute du site -->
.
Trois feuilles de styles sont situées dans le dossier assets/css. Celles-ci n’ont pas été modifiées et ne sont pas documentées.
Modification des icônes
Il est possible de modifier les icônes suivant vos besoins en passant par le site http://fontawesome.io/icons/. Sélectionner l’un d’eux, cliquer dessus et copier l’information entre guillemets juste après le sélecteur CSS class
, soit utiliser le moteur de recherche du site. Coller l’information, donnant par exemple <h2 class="icon fa-file-text-o">
.
La partie haute des squelettes
La partie haute de toutes les pages du plugin fait appel au fichier partie_haute_site.html
. Il est appelé via <INCLURE{fond=inclure/partie_haute_site,self=#SELF} />
. Pour la barre de navigation dans les rubriques/sous-rubriques avec indication de son nom et de son url, il n’a pas été fait appel à un quelconque plugin comme peut le proposer Spip Contrib. Il s’agit donc d’inscrire « à la main » les informations permettant une navigation dans les rubriques/sous-rubriques.
Pour la modification des icônes voir le chapitre « Modification des icônes ».
Le fichier flash_info.html
et utilisation du plugin Dépublie
Afin de donner du « mouvement » aux informations, il nous a semblé nécessaire d’utiliser le plugin Dépublie conjointement avec le fichier flash_infos.html
.
Pour son utilisation, créer tout d’abord une rubrique à la racine. Relever son numéro et portez le dans la bouche suivante à id_secteur
en enlevant les deux x :
<BOUCLE_article(ARTICLES){id_secteur=xx}{id_rubrique}{par date}{inverse}{0,1}{doublons}>
du fichier flash_infos.html
. Pour plus d’informations voir l’article La boucle ARTICLES.
Il vous suffira ensuite de mettre en ligne un article contenu dans la rubrique crée. Concernant le fichier image il est extrait soit du #LOGO_ARTICLE
ou éventuellement du #LOGO_RUBRIQUE
. La taille de l’image n’est pas indiqué volontairement dans la boucle <a href="#URL_SITE">[(#LOGO_ARTICLE|sinon {#LOGO_RUBRIQUE})]</a>
, mais celle-ci ne doit pas dépasser 300 px. Lors de la rédaction de l’article, il faudra documenter l’URL_SITE si vous voulez un renvoi en cliquant sur le fichier image. Avec le plugin Dépublie, il ne vous reste plus qu’a indiquer une date de fin de mise en ligne.
Les fichiers brèves et articles
La structure générale de la page sommaire.html mettant en valeur principalement les articles, le texte introductif des brèves, dont l’affichage est ici au nombre de deux, est positionné sur la droite par le biais des fichiers partie_droite_sommaire_2.html
, partie_droite_rubrique_2.html
.
L’ordonnancement du fichier breve.html
comme du fichier article.html est identique. Seuls les boucles sont différentes avec en commun une partie haute, une partie centrale et une partie basse. Ce sont quant à présent, les deux seuls fichiers ne faisant pas appel à d’autres fichiers pour un affichage latéral.
Changement de l’image de la Quadrature du Net
Cet emplacement « publicitaire » pour le site de La Quadrature du Net, fait appel à un fichier via une url. Vous trouverez si vous le désirez dans le dossier IMG, le même fichier portant le nom quadrature.png
.
Fichier 404.html
Le fichier 404.html
fait appel à un fichier image dans le dossier IMG
et intitulé 1959_a.png
.
Conclusion
Par la structure même de son interface graphique il permet un affichage rapide adapté aussi bien pour des grands écrans que ceux des smartphones et tablettes.
Bonne utilisation.
Discussions par date d’activité
8 discussions
Le plugin est certainement compatible SPIP 4.0 puisque le site de démo brindefolie.com est en SPIP 4.0.9
Par contre il y a une dizaine d’appels au filtre
|justifier
, qui n’existe plus depuis SPIP4.0Serait il possible de mettre à jour le repo avec la nouvelle version compatible spip 4 ?
Répondre à ce message
liens sociaux
bjr
j’utilise ce squelette, tb par ailleurs. Quand je mets les adresses fb et tweeter cela n’apparait pas sur le site , il y a juste le mail, pourquoi ?
merci pour une réponse
Bonjour
ne serait-ce pas dû aux images ne se trouvant pas dans le dossier ?
Répondre à ce message
Bonjour,
Je ne pige pas, ce plugin est pourtant simple à installer, pourtant lorsque je l’installe dans l’interface des plugins je trouve « version incompatible » est-ce à cause que je suis en spip 3.2.7 ?
Effectivement le plugin n’est pas marqué compatible 3.2. A priori cependant, il doit l’être. Peut tu essayer en modifiant la borne de compatiblité dans paquet.xml ? si cela marche bien, on changera la version diffusée sur la zone.
Bin... Entre temps j’ai tenté de mettre :compatibilite=« [3.0.0 ;3.1.* ;3.2.*] ».... Ca ne fait rien.
Merci !
ce sont des bornes, pas des listes de compatiblité.
Donc
Vouaaaaais !!
C’est top :
Strongly types par HTML5UP 1.0.0 - dev
Du Html5 à haute dose dans tous les formats
Et moi strongly content !
Merci et bonne soirée à toi !
Yves
Bon,
si cela marche, alors je le marque comme compatible, pour le futur.
Pour le moment, je dirais qu’il est compatible, le hic, c’est le résultat... Je ne sais pas si l’affichage public est normal avec un site vide (une rubrique - un article)
https://www.yves-elie.org/site-spip-ye
Je vais tester en testant l’import des sources.
Répondre à ce message
Bonjour,
Pour le menu horizontal tout en haut, comment ça marche ? J’ai exactement la même présentation que Ludo. Il doit y avoir un plugin pour gérer le menu déroulant ?
Merci de votre aide.
Je cherche depuis un moment et je remarque qu’il n’existe aucun fichier « head » dans le dossier « inclure » et pourtant ce fichier est bien appelé dans Sommaire.html...
Salut, comme indiqué en intro de l’article, ce squelette vient en « surcharge » des squelettes de la Distribution SPIP. Le fichier
inclure/head
est donc fourni par défaut avec SPIP dans le dossiersquelettes-dist
à la racine de ton site.C’est évident ! Désolée pour ce « bruit »...
J’en profite pour clore mon post le problème étant résolu : c’était tout simplement dû au chemin de la feuille de styles qui ne fonctionnait pas en local...
Merci de votre aide !
Bonjour, j’ai aussi ce problème sur une install en local. Même rendu que Ludo, même constat que Hirisben. Et donc comment restaurer le chemin vers les css ? Merci d’avance pour votre aide !
Bonjour,
Je ne me souviens plus de ce que j’ai fait exactement, mais je te conseille d’utiliser les outils de développement (si tu ne le fais pas déjà) pour vérifier si ta feuille CSS se charge correctement. Si tu vois que ce n’est pas le cas, il suffira de corriger le chemin dans la Dist inclure/head.
Espérant t’avoir été utile. Bon courage.
Répondre à ce message
Bonjour
je viens de découvrir le site de démo qui correspond à la présentation que j’aimerais avoir.
mais à l’installation des 5 plugins (bonux, nuage, twitter, dépublié et html5up), je n’ai pas la même présentation.
Faut-il d’autres plugins ou est-ce lié à la page sommaire.html dans laquelle je ne comprend pas le changement à effectuer.
merci pour votre retour
Bonjour
Qu’est-ce que vous entendez par « pas la même présentation » ?
S’il s’agit uniquement des plug-in, il faut aller dans les fichiers html correspondant et indiquer si je me souviens bien des infos que vous avez de votre côté : compte twitter, etc....
En tout état de cause, l’installation est standart comme expliqué plus haut.
Laurent
déjà merci pour votre retour
je joins une copie écran du haut du site, juste après activation des 5 plugins, ce qui diffère du vôtre en terme de présentation (j’ai juste 2 rubriques de test et 1 article par rubrique en test).
Cordialement
J’essaie de comprendre si j’ai bien installé ce squelette mais j’ai un doute. Je n’ai pas du tout la même apparence que brindefolie. J’ai tout sur une seule colonne pleine largeur et pas le « strongly typed ».
Est-ce que le fait que l’élément « banner » n’a pas été repris implique que l’on n’a donc pas le titre du site en « strongly typed » ni les éléments de nav du haut « titre du site / Archives
Plan du site », etc ?
merci
J’ai arrêté mes tests j’étais comme toi, du coup je suis parti sur Japibas
Répondre à ce message
bonsoir
s’il est valide pour spip 3.2 il faut donc modifier le fichier descriptif du plugin pour qu’il soit activable dans l’interface de spip.
merci pour ce travail.
Répondre à ce message
Sur brindefolie il est écrit en bas de page fonctionne avec Spip 3.2 et là et sur https://plugins.spip.net/html5up_strongly_types.html on parle de Spip 3.0 et 3.1
Bonjour.
Effectivement il fonctionne avec SPIP 3.2, donc ne pas tenir compte de l’info plus haut.
Laurent
Répondre à ce message
Bonjour ! Merci pour cette adaptation. Existe-t-il des exemples de sites SPIP visibles en ligne utilisant ces squelettes s’il te plaît ?
Le texte évoque.... http://www.brindefolie.com/ :-)
Bravo pour le travail !
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 : |