Kamakura

16 September 2020 – by erational, Hélène Francqueville – 21 commentaires

1
2
3
4
5
12 Votes

Squelette simple sous Bootstrap 4

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

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

updated on 29 September 2020

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

5 discussions

  • 3
    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 !

    Reply to this 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...

    Reply to this message

  • 1
    Aloha

    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 ?

    • Aloha

      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

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

    Reply to this 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.

    Reply to this message

Ajouter un commentaire

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom