Mura CMS Layoutmallar

I Mura CMS är det enkelt att skapa så många layoutmallar som du vill formatera dina temasidor. Layoutmallar tilldelas dina Mura-sidor inom webbplatschefen. 

Om du tänker på en vanlig HTML-sida i webbläsaren kommer den generellt att bestå av följande element:

  • HTML-huvud (Metataggar, CSS, JavaScript-bibliotek)
  • Header (Site logo / banner & Navigation)
  • Behållare
  • Huvudkroppsinnehåll (primär innehållsavsnitt, sidofält, etc)
  • Footer (bottom nav, copyright, kontaktinformation, etc)
  • HTML-footer-element (ytterligare JavaScript-bibliotek och init-kod)
      

Denna struktur är i huvudsak vad en Mura layoutmall består av, men du kan bygga dina layoutmallar men du vill. Om du till exempel vill ha en speciell målsida eller en del av din webbplats som innehåller en separat rubrik, CSS, etc. kan du skapa den mallen och tillämpa den på en Mura-sida i webbplatshanteraren. Dina mallar kan till och med vara 100% HTML om du vill att de ska (naturligtvis skulle ingenting vara dynamiskt vid den tiden). 

Skapa en ny layoutmall

För att skapa en layoutmall, starta en ny .cfm-fil i templatskartan för ditt tema. Mallarna faller ned i webbplatshanteraren kommer att se inuti den mappen och automatiskt se några .cfm-filer, så att du kan tillämpa dem på den sidan.

För att testa detta kan vi skapa en helloWorld.cfm sida i vår mall katalog och tillämpa det på en sida:

  1. I dina sidfiler, navigera till din SiteID / includes / teman / tema / mallar katalog
  2. Skapa en ny fil som heter helloWorld.cfm

  3. Klistra in följande kod och spara
 Hej världen 

Applicera den nya mallen på en sida i Mura

  1. Klicka på mallikonen bredvid vilken sida som helst i webbplatshanteraren.
  2. Välj den nya helloWorld.cfm-mallen

  3. Klicka på Globe-ikonen för att förhandsgranska sidan

Lägger till dynamiska inslag

Nu när du förstår hur mallar laddas kan du börja bygga dem ut för att vara mer dynamiska genom att skapa globala inkluderar för HTML-rubriken, sidhuvud och sidfot. 

Börja med att skapa en innefattar katalog i din mall katalog i ditt tema. Det kan se ut så här: temnamn / mallar / inc

I den här mappen kan du skapa så många olika inslag som du vill ha. Jag rekommenderar att du börjar med följande:

  • html_head.cfm (Metataggar, CSS, JavaScript-bibliotek)
  • header.cfm (Site logo / banner & Navigation)
  • footer.cfm (bottom navs, copyright, kontaktinformation, etc)
  • html_footer.cfm (ytterligare JavaScript-bibliotek och init-kod)

Vi kan inkludera dessa filer i vår mall genom att använda tag så här:

Notera: mallväggen är i förhållande till filen vi ringer det från.

När du bygger ut dina ytterligare mallar, kan du återanvända dessa inkluderar så om du någonsin behöver göra en ändring, behöver du bara redigera en fil och den kommer att uppdateras globalt över alla dina mallar. 

Din fullständiga mall kan se ut så här:

    
# $. dspBody (kropp = $. innehåll ('body'), pageTitle = $. innehåll ('titel'), crumbList = false, showMetaImage = true, metaImageClass = "thumbnail") # # $. dspObjects (2) #

Du kan skapa så många mallar som du önskar, till exempel 

  • one_column.cfm
  • twoCol_SR.cfm (sidofältet är till höger)
  • two_Col_SL.cfm (sidofältet är till vänster)
  • three_column.cfm
  • etc.

Hemsidans mall

På de flesta webbplatser är det vanligt att hemsidan är ganska annorlunda än de andra sidorna på webbplatsen. Det kan innehålla en större rubrik med ett bildspel, ytterligare anrop till handling och så vidare. På grund av detta inkluderar vi vanligtvis en home.cfm-mall med alla teman för att ta hänsyn till all denna specialmarkering. Dessutom kan du lägga till ett överkropps id eller klass av Hem för att ytterligare tillåta dig att haka i hemsidans stilar med CSS och redogöra för eventuella skillnader där.