Table of contents
Présentation
Kamakura est un squelette simple sous Bootstrap4.
- La page d’accueil est simple et affiche les dernières actualités.
- Les pages courantes sont présentées sur une colonne.
Ce squelette est idéal pour de petits sites de clubs, d’associations, de théâtre, ...
Le squelette se débrouille aussi bien sur les smartphones.
Aperçu
Page d’accueil

Page article

Exemple de site basé sur Kamakura
https://www.theatrecroquemitaine.com
Installation
- Télécharger et activer le plugin Kamakura
- Le plugin active automatiquement les plugins
A l’installation, le plugin crée aussi
- un champs extra pour gérer les tris des rubriques
Les plugins Favicon, Fulltext, Court-circuit 2 peuvent être installés en complément.
Lorsque votre site passe en production, il est recommandé d’activer la compression des fichiers javascript et CSS pour avoir un site rapide à charger.
Configuration
Le squelette est configurable

Choix des contenus (articles, moteur de recherche, liens dans le pied de page)

Liens vers les pages démo

Menu haut
Le menu haut est constitué des rubriques à la racine listés par numéros.
Exemple: 10. Philosophie, 20. Séances, 200. Contact, ....
On cache les rubriques racines dont le rang commence par 999. ...

zone | explication |
---|---|
zone 1 | lien vers l’accueil (facultatif). option à régler dans le menu de configuration du squelette |
zone 2 | les rubriques racine dont le rang est compris est <100. |
zone 3 | les rubriques racine dont le rang est compris est >100. |
Les menus déroulants listent les sous-rubriques de chaque rubrique racine

Classement des rubriques
Sur chaque rubrique, vous pouvez choisir l’ordre des affichages des articles qui y figurent

Page d’accueil
La page d’accueil est composé de 3 zones.
Zone 1: L’article à la une

Zone 2: L’actualité

Zone 3: Les blocs de ré-assurance

Personnaliser Kamakura
Ajouter une feuille de style personnalisée
Vous pouvez ajouter votre feuilles de style personnelle.
Cette feuille de style devra s’appeler css/perso.css.
Il est recommandé de la déposer dans le répertoire squelettes/
Ajouter un logo en pied de page

Si vous ajoutez un fichier dans squelettes/img/logo.svg,
Il s’ajoutera automatiquement dans le pied de page
Ajouter les liens vers les réseaux sociaux

Vous pouvez activer le plugin Liens vers les réseaux sociaux pour ajouter vos liens vers vos réseaux sociaux.
Dans la page de configuration du plugin Liens vers les réseaux sociaux, renseigner les réseaux que vous voulez afficher en pensant à activer l’option d’habillage

Surcharger d’autres blocs
Plus généralement, vous pouvez surcharger tous les les éléments du squelette en ajoutant votre copie modifiée dans le répertoire squelettes/. Vous pouvez aussi ajouter des déclinaisons spéciales pour une rubrique donnée, par exemple squelettes/rubrique-45.html
Remarques
Le squelette est sur la zone. N’hésitez pas à contribuer en conservant à l’esprit de laisser le squelette aussi générique que possible.
Discussions par date d’activité
5 discussions
Bonjour,
j’aimerais pouvoir intervenir sur le “doctype html” du squelette pour remplacer “actualités” en “derniers articles”. Où est-ce que je peux trouver ce fichier ,
Merci et bravo pour votre travail !
Bonjour
Il suffit sur surcharger les chaines de langue
https://git.spip.net/spip-contrib-squelettes/kamakura/src/branch/master/lang/kamakura_fr.php
Super, ça fonctionne !
mon site : www.aloha.yt
Super, ça fonctionne !
mon site : www.aloha.yt
Reply to this message
Bonjour,
je voudrais rajouter en pied de page le sigle de syndication rss avec son lien, bien sûr. Je n’ai pas réussi alors que je sais que sous SPIP, la mise en syndication existe automatiquement. Une solution ?
Merci !
Il suffit de surcharger le fichier de pied de page inc/footer.html et d’ajouter ton lien vers le flux RSS (
#URL_PAGE{backend}
) avec son icôneDésolé, mais j’ai tout essayé, et ça ne marche pas. Je butte sur un problème qui m’échappe. J’ai contourné le problème en rajoutant une image avec le lien dans dans la colonne centrale du footer (adresse, copyright...) mais je voulais l’insérer dans la colonne de droite (contact).
(mon site : www.aloha.yt)
J’avance petit à petit, mais il semble qu’il y a un bug : tout est O.K., le lien, l’endroit ... Seul impossibilité : mettre l’icon du RSS. Que ce soit en jpeg, jpg, png, etc... Seul le texte alt apparaît.
Désolé pour le dérangement, j’ai réussi à régler tous mes problèmes (c’est à dire en transformant la colonne de droite du pied de page en flux Rss avec son logo).
Mille excuses pour le dérangement...
Reply to this message
Bonjour,
et tout d’abord, félicitation pour votre super boulot !
Je voudrais améliorer mon site (www.aloha.yt) qui est en construction. Je voudrais mettre une image avec le titre comme l’a fait le site d’un théâtre sous Kmakura.
J’ai quelques connaissances en html et css, mais pas trop... Pouvez-vous m’aider : où et quoi dois-je insérer du code et des images ?
Bonjour,
je me réponds à moi-même pour vous éviter de chercher. Je viens de trouver la solution à mon problème : j’ai surchargé la feuille de style css et rajouté une image à la ligne 158 :
header
position: relative;
background-image: url(“P1020653.png”);
avec l’image dans le même dossier.
Merci encore pour votre magnifique travail évolutif !
Reply to this message
Bonjour,
merci pour ce joli plugin plein de finesse qui m’a permis de rapidement mettre à jour un site web sur cette base: www.caricature.plus
J’ai quelque peu personnalisé la charte graphique. Je tiens à signaler quelques bizarreries hexadécimales dans les codes couleurs de la feuille de style du plugin (style.css), tel que :
Après un test de rapidité par page speed, il semble que les polices Monserrat ralentissent la vitesse de chargement, ce qui pourrait être amélioré par un preload:«Envisagez d’utiliser
<link rel=preload>
pour hiérarchiser la récupération des ressources actuellement requises pour le chargement ultérieur de la page.» selon Google. Je voulais me pencher sur le problème, mais il ne semble pas y avoir de panacée pour améliorer la situation. Je n’ai pas encore regarder sous le capot, d’où ma question: est-ce que ces polices sont indispensables? Où sont-elles utilisées?J’ai aussi mis à jour le plugin avec un fichier de langue en anglais et le tiens à disposition.
Quoiqu’il en soit, un plugin à recommander...
Bonjour Lexi
Merci pour tes retours.
Les codes hexadécimaux ##rrvvbbaa sont légaux, Il s’agit simplement d’une valeur alpha
Pour les polices en préload, je ne sais pas quelles sont les meilleures pratiques.
J’ai donc essayé de préloader les deux polices les plus utilisées en format woff2 pour les navigateurs modernes
https://git.spip.net/spip-contrib-squelettes/kamakura/commit/33d0906a1c7ddba9895c30da4c1044164472774e
Je suis preneur d’avis ou de conseils sur ce point. Est que cela améliore vraiment la performance de rendu ou non.
Pour le fichier de langue en anglais, avec plaisir,
tu peux le commiter directement sur le git de la zone ou me le transmettre.
Merci du retour.
Je n’ai jamais mis les pieds dans le git, donc je me permets de faire un retour véloce ici...
Pour ma part, la performance à augmenter mais pas autant que prévu. 94/100 pour ordi, mais seulement 77/100 pour mobile: PageSpeed Insights.
J’ai fait une boucle DATA pour lister les fichiers contenus dans le répertoire
css/font
du plugin. Je fais un listing par type de fichiers pour pouvoir distinguer par exempletype="font/woff"
ettype="font/woff2"
dans le<link rel=preload>
sans savoir si cela est vraiment nécessaire. Par exemple pour les fichiers .woff:Une autre inconnu est de savoir s’il vaut mieux introduire cette boucle avant ou après
#INSERT_HEAD_CSS
dans le<head>
. Dans les deux configurations, PageSpeed tient compte de ce changement tout en continuant de pinailler: Googoogle demande de diffusez ces éléments statiques grâce à des règles de cache efficaces. Peut-on mettre un cache sur ce genre de fichiers? Je doute...Il faudrait auditer en détail le waterfall et non pas se baser uniquement sur des outils automatiques. Au moins avis, il ne faut pas précharger toutes les polices mais uniquement les woff2 qui sont utilisées. Et encore 4 polices cela fait beaucoup ....
J’ai aussi vu cette ressource
https://web.dev/codelab-preload-web-fonts/
Pour le cache, il suffit d’ajouter une règle dans le htaccess.
Si une règle est efficace, merci de le signaler que je l’intègre au plugin.
Oui, je suis d’accord, 4 polices ca fait déjà beaucoup. Mais il y en a bien davantage qui sont déclarées dans
css/styles.css
, en partie pour tenir compte des versions de Chrome, Opera & Firefox. Avant d’ajouter des règles dans le htaccess, n’y a-t-il pas moyen de “faire un peu d’ordre dans les rangs de la police” ;-) ?Dans styles.css il n’y a que 5 polices qui sont les différentes graisses utilisées.
Il faudrait vérifier dans le détail, si on ne peut pas réduire
L’appel CSS charge local OU le fichier .woff2 OU le fichier .woff selon les capacités des navigateurs. Il n’y a rien en trop.
Ensuite le preload, c’est de la recherche de performance, on parle pour des navigateurs modernes donc le woff2 devrait suffire
Le reste est du pinaillage et de l’optimisation de perf alors que le plugin est complet et fait le job
Je n’ai pas de temps de me pencher sur ces détails, libre à vous de commiter sur le git si vous trouvez des choses concluantes.
Je suis aussi d’accord, c’est un peu du pinaillage.
Concernant le .htaccess, le code suivant a été efficace (uniquement pour .woff/.woff2):
Bien pour le .htaccess :)
Si on regarde les éléments bloquants sur mobile sont surtout:
Penser par exemple à désactiver la mediabox de SPIP ou le porteplume dans l’espace public
cela permet de gagner qq ms....
Reply to this message
D’abord félicitation pour ce squelettes et ce plugin, j’ai constaté un bug, le plugin fonctionne mais dés lors on place un dossier squelettes (copie des fichiers) le plugin plante on désactive le plugin et tout fonctionne
Je ne comprends pas bien la remarque
Kamakura doit être activé comme un plugin, il ne faut pas déplacer ces fichiers pour le placer dans le répertoire squelettes.
Le répertoire squelettes sert uniquement à surcharger certains fichiers si on veut. C’est clairement indiqué dans la documentation au dessus.
Reply to this message
Ajouter un commentaire
Follow the comments:
|
