Flexweg CMS

Menus

Les menus sont les structures de navigation qui apparaissent dans le header et le footer de votre site. Ouvrez Menus dans la sidebar pour les gérer.

Les menus sont les structures de navigation qui apparaissent dans le header et le footer de votre site. Ouvrez Menus dans la sidebar pour les gérer.

Le CMS supporte deux menus nommés out-of-the-box : header et footer. Les deux partagent la même forme et les mêmes opérations — vous construisez une liste d'items, sauvegardez, et le site public se met à jour instantanément.

Dynamique, pas baké

Contrairement à WordPress (qui inscrit les menus dans le HTML de chaque page au rendu suivant), Flexweg CMS utilise des menus dynamiques :

  1. Quand vous sauvegardez le menu, l'admin upload un fichier unique /menu.json à la racine de votre site Flexweg.

  2. Chaque page publiée référence dans son <head> un script runtime theme-assets/<theme-id>-menu.js.

  3. Au chargement de la page, le script :

    • Fetche /menu.json
    • Trouve chaque container [data-cms-menu="header"] et [data-cms-menu="footer"] dans le DOM
    • Le remplit avec le HTML du menu résolu
    • Pose aria-current="page" sur le lien qui matche l'URL courante

Donc changer les items du menu ne nécessite pas de re-publier toutes les pages. Le changement est en ligne instantanément sur chaque page au prochain chargement par n'importe qui.

Construire un menu

La page Menus a deux colonnes côte à côte :

  • Colonne gauche : la liste des items du menu choisi (header ou footer)
  • Colonne droite : un éditeur pour l'item sélectionné (label, URL, type)

Ajouter un item

Cliquez sur + Ajouter un item. Trois types :

  • Lien personnalisé — vous tapez le label et l'URL (relative /about.html ou absolue https://...)
  • Page — combobox de pages publiées ; le label par défaut est le titre de la page, l'URL est calculée automatiquement
  • Catégorie — combobox de catégories ; le label par défaut est le nom, l'URL pointe vers l'archive

Réorganiser

Drag-and-drop sur la poignée à gauche de chaque item. Les items peuvent être imbriqués pour faire des sous-menus (limité à un niveau de profondeur recommandé pour l'UX).

Sauvegarder

Le bouton Sauvegarder en bas re-upload /menu.json immédiatement. Pas besoin de cliquer sur Publier.

Le hook menu.json.resolved

Avant l'upload, le menu résolu passe par le filtre async menu.json.resolved que les plugins peuvent intercepter. Cas typiques :

  • flexweg-rss ajoute des entrées de feed RSS au footer quand addToFooter === true dans sa config
  • flexweg-multilang (à venir) pourrait ajouter un switcher de langue dans le header

Voir Référence des hooks.

Menus multilang

Si flexweg-multilang est activé, chaque item de menu a un onglet par langue dans l'éditeur. Vous tapez le label dans chaque langue.

Au moment de l'upload du /menu.json, le résolveur de menu pose un champ translations: { fr: { label: "..." }, ... } sur chaque item. Le menu-loader.js du thème lit ces champs et pick le label correspondant à la langue de la page courante (via pickPublicLocale(currentLocale)).

Pourquoi ce design

Trois avantages par rapport au modèle WordPress (menus inscrits dans chaque page) :

  1. Performance d'édition : changer un menu = 1 upload (~5 Ko), pas N re-renders
  2. Pas de risque d'orphelin : un menu changé est appliqué à toutes les pages au prochain reload, jamais de désynchro
  3. Pas de cache à invalider : menu.json a cache-control: no-store côté Flexweg, donc toujours frais

Le coût : une requête HTTP supplémentaire au chargement de chaque page pour fetcher /menu.json. Mais le fichier est ~5 Ko et compressé en gzip donc l'impact est négligeable (< 50 ms en pratique).