Kamakura

Publié le : 16 septembre 2020 – Dernière modification le 19 juin 2023 – par erational, Hélène Francqueville – 70 commentaires

1
2
3
4
5
16 votes

Squelette simple sous Bootstrap 4

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

Installation

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

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

zoneexplication
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ée de 3 zones.

Zone 1 : L’article à la une

Descriptif : Le dernier article publié. On affiche son logo s’il en possède un. (Les articles de la rubrique focus sont exclus de cette logique)

Zone 2 : L’actualité

Descriptif : Les autres articles publiés. On affiche son logo s’il en possède un sinon on prend un motif générique. (Les articles de la rubrique focus sont exclus de cette logique)

Zone 3 : Les blocs de ré-assurance

Descriptif : On affiche un article et le dernier article de la rubrique focus définie dans le menu de configuration

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.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

16 discussions

  • 2
    Benjamin

    Bravo et merci pour ce travail !
    Une question : est-il possible d’utiliser la mediabox avec kamakura ?
    Quand j’active kamakura, cela désactive la médiabox, malgré différents essais de réglages de mediabox.

    • erational

      Bonjour

      A priori Kamakura ne désactive pas mediabox mais le squelette ne l’utilise pas.

      Les images qui ne sont pas utilisées dans l’article sont automatiques listées en bas d’article en pleine largeur (enfin en 800px de large).

      Si vous avez besoin d’un comportement différent, il suffit de surcharger le fichier kamakura/inc/article.html

    • Benjamin

      Merci beaucoup, réponse rapide et claire, qui m’a résolu mon problème et permis de mieux comprendre comment ça marche !

    Répondre à ce message

  • 3
    Perline

    Bonjour,
    Simple et de bon goût ce squelette.
    J’ai une interrogation : la page rubrique est supposée être normale, et afficher d’abord les sous-rubriques, puis les articles.
    Chez moi ça ne marche pas.
    Je regarde le squelette et je vois d’abord en tête un « article body », je ne comprends pas pourquoi c’est là. De plus, le logo de cet article s’affiche en énorme dessous. Je ne comprends pas la raison, la philosophie de ce choix.
    Cet article s’affiche en entier, comme si le squelette de cette rubrique était en fait un squelette de l’article d’en-tête du sommaire.
    Ensuite, la liste des articles de la rubrique dans laquelle on est (« liste-articles ») ne s’affiche pas chez moi. Impossible non plus de comprendre pourquoi.
    Dans un autre ordre d’idée, le logo.svg qu’il suffit d’installer dans le dossier img ne s’affiche pas chez moi. Alors même qu’il est là, et se voit bien dans le code. Y a-t’il des impératifs pour qu’il s’affiche ?
    Merci de toutes ces infos.

    • erational

      Bonsoir Perline

      Il y a plusieurs questions, j’essaie de ne rien oublier dans mes réponses :

      • article-body est juste un nom de classe CSS pour indiquer le corps du document. Il peut être appelé sur n’importe quel objet : article, rubrique, auteur, ... Désolé si ce n’est pas heureux comme nommage
      • le logo est énorme : oui il fait 1200px, c’est un choix graphique. C’est le principe du « hero » / tête de gondole de beaucoup de sites actuels. Tu peux toujours surcharger si cela ne plait pas.
      • les articles ne s’affichent pas .... il faut voir pourquoi... à priori cela fonctionne ailleurs sur les sites qui utilisent le plugin.
      • le SVG est bien géré uniquement sous SPIP 3.3. Désolé j’ai oublié de l’indiquer dans la documentation.
    • Perline

      Merci de ta réponse rapide.
      Le problème c’est que ce n’est pas que le titre de la rubrique qui s’affiche mais les infos, titre, etc. de l’article en Une qui s’affiche, c’est pourquoi j’ai nommé la classe.
      Je ne sais pas pourquoi.
      La rubrique n’a pas de logo, et apparaît un logo de 1200 px, je ne comprends pas non plus.
      J’ai cherché pour les articles, et je ne comprends pas du tout pourquoi la boucle ne sort pas la liste simple des articles de cette rubrique.
      Il suffit donc que j’attende que SPIP 3.3 sorte alors ?. Il n’y a pas d’autre critère pour ce logo ? J’attendrai, je serai patiente, pas de problème !
      Je ne peux pas donner de lien car c’est « en travaux », et je ne veux pas le démarrer justement avant que ce soit présentable...

    • Perline

      La rubrique se comporte comme si elle n’avait qu’un article et c’est bien cet article qui s’affiche (et pas la rubrique).
      Du coup, j’ai désactivé le plugin Court-circuit, et c’est de là que venait le problème.
      Il prend la main sans que rien ne le justifie.
      Je n’avais aucun changement personnel, ni squelette, ni css, brut de décoffrage.
      A voir, donc d’où vient le problème.
      Si vous trouvez, pouvez-vous le dire, car du coup il reste désactivé.
      Merci encore.

    Répondre à ce message

  • 4
    Aloha

    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 !

    • erational

      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ône

    • Aloha

      Dé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)

    • Aloha

      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.

    • Aloha

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

    Répondre à ce message

  • 2
    Aloha

    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 !

    Répondre à ce message

  • 7
    Lexi

    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 :

    #fffc1938 #fffc1994 #1d1de899 #f4433687

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

    • erational

      Bonjour Lexi

      Merci pour tes retours.

      Les codes hexadécimaux ##rrvvbbaa sont légaux, Il s’agit simplement d’une valeur alpha

      #fffc1938

      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.

    • Lexi

      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 exemple type="font/woff" et type="font/woff2" dans le <link rel=preload> sans savoir si cela est vraiment nécessaire. Par exemple pour les fichiers .woff :

      <BOUCLE_fontliste(DATA){source ls, #CHEMIN{css/font}/*.woff}{par basename}>
[<link rel="preload" href="(#FILE)" as="font" type="font/woff" crossorigin="anonymous">]
</BOUCLE_fontliste>

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

    • erational

      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.

    • Lexi

      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 » ;-) ?

    • erational

      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.

    • Lexi

      Je suis aussi d’accord, c’est un peu du pinaillage.

      Concernant le .htaccess, le code suivant a été efficace (uniquement pour .woff/.woff2) :

      # Fonts
# Add correct content-type for fonts
AddType font/woff .woff
AddType font/woff2 .woff2
# Add a far future Expires header for fonts
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
    • erational

      Bien pour le .htaccess :)

      Si on regarde les éléments bloquants sur mobile sont surtout :

      • le css
      • le javascript

      Penser par exemple à désactiver la mediabox de SPIP ou le porteplume dans l’espace public
      cela permet de gagner qq ms....

    Répondre à ce message

  • 1
    david

    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

    • erational

      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.

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom