Refonte de judbd.com : Étude de cas (2e partie : le CMS Kirby)

Maintenant que nous avons abordé le design et le contenu dans le billet précédent, parlons maintenant un peu technique.

Vous êtes motorisé ?

Pour la refonte de mon site, j’en avais un peu marre de l’omniprésence de Wordpress et de ses galères (plugin, maintenances, piratages, besoin de le tordre dans tous les sens pour faire autre chose qu’un blog…), j’ai donc un moment pensé à faire un site statique avec un générateur, mais je n’étais pas équipé pour (il faut souvent jekyll / ruby / nodejs / npm / trucs que je comprends pas / ligne de commande).

J’ai alors décidé de jeter un œil aux sites basés sur des fichiers au lieu de reposer sur une base de donnée, et j’en ai essayé un dont on m’avait dit du bien : Kirby. Ça c’est mon CMS Flat file. Il y en a beaucoup comme ça (+ des générateurs de sites statiques qui sont à la mode) mais lui c’est le mien.

Kirby est opensource (les sources sont disponibles sur github) mais pas libre. Il est aussi payant pour un site en prod (15€) mais vous pouvez faire tout votre site gratuitement puis acheter la licence quand vous mettez en ligne. Ça les vaut largement.

Sur mesure

J’ai rapidement vu que c’était l’outil qu’il me fallait pour les raisons suivantes :

  • Pas de base de donnée = migration facile, sauvegardes plus rapides.
  • Pas de structure imposée, complètement flexible, donc aucune bidouille pour l’adapter à mes besoins.
  • Champs personnalisés au cœur de la logique du CMS.
  • Rédaction en Markdown, pas de formatage superflu.
  • Création de template facile sans moteur spécifique à apprendre.
  • Code facile à comprendre pour un non-développeur, et les tests un peu au hasard sont souvent couronnés de succès (“ha tiens ça marche ça ! Cool”).
  • Documentation claire.
  • Totalement Multilingue.

Fonctionnement

Le fonctionnement de Kirby est archi simple : le contenu est constitué de dossiers, de fichiers texte et de fichiers autre (images…), dans lequel vous pouvez créer à la volée autant de “champ personnalisés” que vous le souhaitez. Cette logique de base est parfaite car un portfolio aura tendance à se composer de plusieurs gabarits bien distincts avec peu de contenu mais plein d’information différentes, contrairement à un blog qui sera plus “monolithique”. Vincent en parle aussi sur son site car c’est le CMS utilisé pour le Kit de survie du créatif.

La structure

Pour ajouter une page au site, il suffit de rajouter un dossier, pour en changer le contenu il suffit d’éditer le fichier texte et pour rajouter des images… il suffit de les glisser dans le dossier. Quand je vous dis que c’est simple !

Le site dans son entier :

files_global.jpg

Les projets dans le portfolio :

files_portfolio.jpg

Le détail d’un projet (avec les images uploadées) :

files_project.jpg

Avec ce système, rien n’est prévu à l’avance et on a donc pas à contourner un système pensé pour autre chose pour arriver à ses fins, on peut faire son site exactement comme on le souhaite.

Les pages

Pour appeler les pages stockées dans les dossiers, le système est très intuitif. Par exemple si vous souhaitez afficher sur la home quelques projets “à la une” issus de la page portfolio il vous suffira juste de d’utiliser ce code, qui parle de lui même :

page('portfolio')->children()->visible()->filterBy('featured', 'true');

//Sélectionne tous les enfants visibles de la page portfolio comportant le champ "featured".

Là c’est l’exemple le plus basique, mais ce système de chaînage est très puissant et permet d’afficher finement les pages souhaitées. Par exemple, pour afficher 3 projets du portfolio au hasard on fera :

page('portfolio')->children()->visible()->shuffle()->limit(3);

//Sélectionne tous les enfants visibles de la page portfolio, les mélange et en renvoie 3.

On pourrait aussi combiner les éléments de chaines pour renvoyer 5 pages “à la une” au hasard. Bref, vous voyez l’idée.

Les champs personnalisés

Comme les données du site ne sont que des fichiers textes, la création de champ personnalisé à l’intérieur des pages ne demande aucune formalité particulière, il suffit de l’écrire et d’enregistrer son fichier, comme ceci (notez que le format Markdown est géré dans n’importe quel champ):

Title: Boulogne – Parchamp
----
projectDate: 2014
----
Agency: (link: http://roxane-company.fr text: Roxane)
----
Featured: true
----
Brand: Ville de Boulogne-Billancourt
----
Status: Appel d'offre
----
Job: Conception,Direction Artistique,Identité

Puis ensuite d’appeler n’importe lequel de ces champs là où vous voulez dans le template en faisant simplement :

$page->title()
$page->projectDate()
…
$page->brand()

Ces champs sont illimités en nombre et peuvent contenir tout type de données, du texte brut, du Markdown, des tags, du HTML, des variables… le système est très souple car il n’y a pas besoin de manipulation préalable pour créer un champ.

Si par exemple vous vous rendez compte qu’il vous faut afficher d’autres infos sur votre page “projet”, il vous suffit d’ajouter des lignes dans le fichier texte !

Projecturl: url du site en ligne
----
Involved: intervenants
----
Featuredimage: url de l'image à la une

J’ai trouvé que ce fonctionnement correspondait parfaitement à ce que je recherchais car dans un book graphique il n’y a pas vraiment de long texte façon blog avec la logique titre/billet, mais une multitude de petites infos qui accompagnent les visuels et qui doivent être chacune formatées de manière différente.

Le panel

Tout le site peut être géré via un FTP ou un explorateur de fichier, et c’est ce qui fait la force de ce CMS. Toutefois il peut s’avérer pratique de l’éditer en ligne et ça tombe bien car Kirby propose un back office optionnel et complètement personnalisable.

Une fois de plus la logique est de ne pas imposer une interface rigide, mais de permettre à l’utilisateur de créer son site sur mesure. Ceux qui connaissent les affres de l’usine à gaz du back office Wordpress quand on est admin du site ne pourront pas me contredire.

Ici, c’est vous qui choisissez simplement quels champs sont éditables dans le back office, et sous quels formats vous voulez qu’ils s’affichent.

Encore une fois, tout se fait dans un fichier texte “blueprint” dans lequel vous dites quel champ doit s’afficher, et de quelle manière. Cette interface n’est que la retranscription de votre fichier texte de contenu.

  projectDate:
    label: Year
    type:  number
  brand:
    label: Brand
    type:  text
  agency:
    label: Agency
    type:  text
  status:
    label: Project type
    type:  text
  projectURL:
    label: Project URL
    type: url
  job:
    label: Expertises
    type:  tags

Ce qui donnera, une fois dans le panel :

panel_project_infos.jpg

On peut définir à l’avance le type de champs (nombre, email, url) avec les contrôles automatiques qui vont avec (ou en créer des personnalisés), et/ou la façon d’afficher ces champs (liste de tags, liste déroulante, zone de texte, cases à cocher). À vous de vous faire le back office dont vous avez toujours rêvé !

Ici, un aperçu du dossier de projet vu dans le panel : on y retrouve les informations du fichier texte et les fichiers uploadés :

panel_complet.jpg

La gestion des images

Comme on l’a vu, il suffit d’uploader des images dans le dossier pour qu’elles soient ajoutées à la page. On peut également les glisser-déposer sur la page dans le panel pour le même résultat.

On pourra ensuite les utiliser dans un texte de la page en markdown ou bien prévoir une boucle dans le template pour les afficher automatiquement (la solution idéale pour un portfolio).

Le panel permet de trier les images.

panel_images_overview.jpg

Chaque image peut elle même avoir autant de champs personnalisés que nécessaire (ici auteur et légende).

panel_image.jpg

Délicats raffinements

Kirby étant un CMS très complet, je ne prétend pas vous en faire une démonstration complète en un seul billet, et nous avons vus les pincipaux mécanismes qui permettent de faire un site de type portfolio. Comme on l’a vu, il est facile d’obtenir un résultat probant très rapidement.

J’ai toutefois rajouté quelques raffinements à mon book, pour tester un peu toutes les possibilités du moteur. Je tiens à préciser que quelques-unes de ces fonctionnalités sont anecdotiques et m’ont demandé un temps de développement indécent par rapport à l’objectif visé du fait de mon bas niveau en développement, mais hé, il faut bien s’amuser un peu.

Smartypants

Kirby intègre smartypants, un interpréteur de texte qui permet de corriger automatiquement les erreurs de typographie les plus courantes (guillemets français, espaces insécables avant la ponctuation double…)

Navigation au clavier

Après avoir implémenté la navigation entre les projets précédents/suivant j’ai rendu cette navigation possible au clavier, parce que bon c’est quand même cool.

Noindex/forbidden

J’ai fait en sorte que les pages invisibles ne soient pas référencées par les moteurs de recherche, et que certaines pages soient complètement interdites (en cas de besoin).

Icones de réseaux sociaux

J’aurais pu bêtement mettre les icônes des réseaux sociaux en dur dans la page about et le footer du site mais c’eût été trop simple. J’ai donc utilisé des champs structurés en yaml que j’ai appelé dans le template, avec possibilité de choisir le texte, l’icône et le lien, d’en changer l’ordre et de rajouter autant de réseaux que je veux.

panel_socialmedia.jpg

Textes des recommandations et entrées du CV

De la même façon, j’ai transformé le CV qui était juste un bloc de html brut en données structurées avec chaque entrée séparées. J’ai fait pareil pour les recommandations, pour en faciliter le tri et l’ajout. Prochaine étape : utiliser des micro formats hresume et compagnie si un jour j’arrive à m’en dépatouiller.

CV coté back office

panel_cv.jpg

CV sur le site

front_cv.jpg

Dates variables avec le tag personalisé “from”

Rien de plus chiant qu’un site pas mis à jour quand il s’agit de l’âge du capitaine ou du nombre d’années d’expérience (par exemple sur mon ancien site j’ai eu 25 ans pendant 5 ans). J’ai donc codé un tag Markdown personnalisé qui calcule un laps de temps à partir d’une date. C’est surement une des fonctionnalités qui m’a pris le plus de temps pour le résultat le plus insignifiant. Mais ça m’a permis d’apprendre comment faire mes tags personnalisés.

panel_from.jpg

Metatags sociaux

Impossible de passer à coté aujourd’hui, les metatags d’opengraph (facebook) ou de twitter permettent d’afficher une image quand votre site est partagé. J’ai développé un système qui permet d’avoir de forts beaux metatags pour briller en société.

Affichage des marques dans le about

Sous mon CV j’affiche les annonceurs pour lesquels j’ai travaillé. Ces marques se mettent à jour en fonction des champs renseignés dans chaque projet. Mais j’ai aussi travaillé pour des annonceurs notables sur des projets confidentiels, ou pour lesquels j’ai choisi de ne pas montrer les projets. J’ai donc ajouté un champ dans le back office qui vient s’agréger aux marques affichées automatiquement.

panel_brands.jpg

Projets au hasard en bas de page

Sous chaque projet, j’ai décidé d’afficher 3 projets piochés au hasard dans mon portfolio. Rien de plus simple avec le style de code vu plus haut, sauf que parfois le projet sur lequel on était déjà s’affichait de nouveau. Une fois de plus, la puissance et la simplicité de Kirby m’ont surpris puis qu’il est très facile d’exclure une page de la sélection avec :

page('portfolio')->children()->visible()->not($page)->shuffle()->limit(3);

Simple et génial !

Conclusion

Voilà toutes les raisons qui font que Kirby m’a comblé, j’ai enfin un site que je peux gérer et mettre à jour de la manière dont je l’entends et sans point de friction, ce qui est un point crucial dans un portfolio.

Si le système est compliqué, qu’il y a des champs obligatoires, des vignettes à recadrer et à uploader séparément, le graphiste flemmard n’ajoutera jamais de nouveaux projets, ou alors 10 ans après.

Ce CMS m’a permis d’avoir un portfolio organisé comme je le souhaitais, avec toutes les fonctionnalités que je souhaitais, mais surtout (le plus important) pas une de plus.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Haut de page