Mura CMS Modèles de disposition

Dans Mura CMS, il est facile de créer autant de modèles de disposition que vous souhaitez pour formater vos pages de thèmes. Les modèles de disposition sont attribués à vos pages Mura dans le gestionnaire de site.. 

Si vous pensez à une page HTML typique dans le navigateur, elle comportera généralement les éléments suivants:

• HTML Head (balises méta, CSS, bibliothèques JavaScript)
• En-tête (logo / bannière et navigation du site)
• Récipient
• Contenu du corps principal (section de contenu principal, barres latérales, etc.)
• Pied de page (bas de page, droit d'auteur, coordonnées, etc.)
• Éléments de pied de page HTML (bibliothèques JavaScript supplémentaires et code init)

Cette structure correspond essentiellement à un modèle de mise en page Mura, mais vous pouvez créer vos modèles de mise en page comme vous le souhaitez. Par exemple, si vous souhaitez une page de destination ou une section spéciale de votre site comprenant un en-tête, un fichier CSS, etc., vous pouvez créer ce modèle et l’appliquer à une page Mura dans le gestionnaire de site. Vos modèles pourraient même être 100% HTML si vous le souhaitez (bien entendu, rien ne serait dynamique à ce stade). 

Création d'un nouveau modèle de mise en page

Pour créer un modèle de présentation, commencez un nouveau fichier .cfm dans le répertoire des modèles de votre thème. Les modèles déroulants dans le gestionnaire de site regardent à l'intérieur de ce dossier et voient automatiquement tous les fichiers .cfm, ce qui vous permet de les appliquer à cette page..

Pour tester cela, nous pouvons créer un helloWorld.cfm page dans notre répertoire de modèles et l'appliquer à n'importe quelle page:

1. Dans les fichiers de votre site, accédez à votre siteID / includes / themes / theme / templates annuaire
2. Créez un nouveau fichier appelé helloWorld.cfm
   
   
3. Collez le code suivant et enregistrez

 Bonjour le monde 

Appliquer le nouveau modèle à une page dans Mura

1. Dans le gestionnaire de site, cliquez sur l'icône de modèle en regard d'une page..
2. Sélectionnez le nouveau modèle helloWorld.cfm
   
   
3. Cliquez sur l'icône du globe pour prévisualiser la page

Ajout dynamique inclut

Maintenant que vous comprenez comment les modèles sont chargés, vous pouvez commencer à les rendre plus dynamiques en créant des inclusions globales pour l'en-tête HTML, l'en-tête et le pied de page.. 

Commencez par créer un comprend répertoire dans votre répertoire de modèles dans votre thème. Cela peut ressembler à quelque chose comme ça: nom du thème / templates / inc

Dans ce dossier, vous pouvez créer autant d’inclusions que vous le souhaitez. Je recommanderais de commencer par ce qui suit:

• html_head.cfm (balises META, CSS, bibliothèques JavaScript)
• header.cfm (logo / bannière et navigation du site)
• footer.cfm (bas de page, droit d'auteur, informations de contact, etc.)
• html_footer.cfm (bibliothèques JavaScript supplémentaires et code init)

Nous pouvons inclure ces fichiers dans notre modèle en utilisant le tag comme si:

Remarque: le chemin du template est relatif au fichier depuis lequel nous l'appelons.

Lorsque vous créez vos modèles supplémentaires, vous pouvez les réutiliser. Ainsi, si vous devez apporter des modifications, il vous suffit de modifier un fichier et celui-ci sera mis à jour globalement pour tous vos modèles.. 

Votre modèle complet peut ressembler à quelque chose comme ceci:

    
 
  
  # $. dspBody (body = $. content ('body'), pageTitle = $. content ('title'), crumbList = false, showMetaImage = true, metaImageClass = "vignette") # # $. dspObjects (2) # 
 
  
  

Vous pouvez créer autant de modèles que vous le souhaitez, tels que 

• one_column.cfm
• twoCol_SR.cfm (la barre latérale est à droite)
• two_Col_SL.cfm (la barre latérale est à gauche)
• trois_colonne.cfm
• etc.

Le modèle de page d'accueil

Dans la plupart des sites Web, il est courant que la page d’accueil diffère un peu des autres pages du site. Il peut contenir un en-tête plus grand avec un diaporama, des appels à l'action supplémentaires, etc. Pour cette raison, nous incluons généralement un modèle home.cfm avec chaque thème pour prendre en compte l'ensemble de ce balisage spécial. En outre, vous pouvez ajouter un identifiant de corps supérieur ou une classe de maison pour vous permettre d’accrocher davantage les styles de page d’accueil avec CSS et prendre en compte les différences éventuelles.