Back arrowRetour aux ressources
Optimizely icon Optimizely
Apprendre par la pratique : Comment créer des composants de mise en page courants dans Optimizely CMS (en-tête, pied de page, menu et blocs)

Apprendre par la pratique : Comment créer des composants de mise en page courants dans Optimizely CMS (en-tête, pied de page, menu et blocs)

Alex Rollin
Alex Rollin
November 12, 2025
Dernière mise à jour : February 15, 2026
November 12, 2025

Créer des composants de mise en page cohérents dans Optimizely CMS peut sembler intimidant quand on débute. Vous avez besoin d'en-têtes qui fonctionnent sur toutes les pages, de pieds de page que les éditeurs peuvent mettre à jour sans rien briser, de menus de navigation qui ont du sens et de blocs réutilisables qui sont vraiment réutilisés. Si vous travaillez avec Optimizely CMS 12 (la version actuelle en 2025) et que vous vous demandez comment construire ces composants de la bonne façon, ce guide vous accompagnera pour chaque élément avec du vrai code que vous pourrez utiliser dès aujourd'hui.

Ce que nous couvrirons dans ce guide :

  • Configurer correctement votre fichier de mise en page global
  • Construire des composants d'en-tête et de pied de page que les éditeurs peuvent gérer
  • Créer des menus de navigation (versions simple et complexe)
  • Développer des blocs de contenu réutilisables
  • Éviter les pièges courants qui ralentissent le développement

À la fin, vous aurez des exemples fonctionnels de chaque type de composant et comprendrez comment ils s'assemblent dans un site Optimizely en production.

Prérequis

Avant de commencer à construire, assurez-vous d'avoir :

1. Optimizely CMS 12 installé - Fonctionnant sur .NET 6 ou .NET 7
2. Visual Studio 2022 ou VS Code avec les extensions C#
3. Compréhension de base de :

  • C# et ASP.NET Core MVC
  • La syntaxe Razor pour les vues
  • Les concepts de modélisation de contenu (pages vs blocs)

4. Un environnement de développement Optimizely - Local ou infonuagique
5. Un accès administrateur à votre instance CMS pour les tests

S'il vous manque l'un de ces éléments, la documentation officielle d'Optimizely contient des guides de configuration pour vous aider à démarrer.

Implémentation étape par étape

Étape 1 : Configurer votre fichier de mise en page global

Votre fichier _Layout.cshtml agit comme le squelette de chaque page de votre site. Au lieu d'entasser la logique directement dans ce fichier, nous utiliserons des View Components pour garder les choses propres et testables.

Créez ou mettez à jour votre /Views/Shared/_Layout.cshtml :

    
    
    @ViewData["Title"] - Nom de votre site
    
    @* Appeler un View Component pour les balises méta/SEO *@
    @await Component.InvokeAsync("Metadata")
    
    @* Vos références CSS *@
    


    @* Composant d'en-tête *@
    @await Component.InvokeAsync("Header")
    
    @* Zone de contenu principal *@
    
        @RenderBody()
    
    
    @* Composant de pied de page *@
    @await Component.InvokeAsync("Footer")
    
    @* Scripts en bas *@
    
    @RenderSection("Scripts", required: false)

Share this article