Mura CMS lay-out sjablonen

In Mura CMS is het eenvoudig om zoveel indelingssjablonen te maken als u uw themapagina's wilt opmaken. Indelingssjablonen worden toegewezen aan uw Mura-pagina's binnen de sitebeheerder. 

Als u denkt aan een typische HTML-pagina in de browser, bestaat deze over het algemeen uit de volgende elementen:

• HTML-kop (metatags, CSS, JavaScript-bibliotheken)
• Header (Site logo / banner & navigatie)
• Houder
• Inhoud hoofdgedeelte (sectie primaire inhoud, zijbalken, enzovoort)
• Voettekst (onderste navigatie, copyright, contactinformatie, enz.)
• HTML-footer-elementen (extra JavaScript-bibliotheken en init-code)

Deze structuur is in wezen wat een Mura-indelingssjabloon bevat, maar u kunt uw indelingssjablonen naar eigen wens samenstellen. Als u bijvoorbeeld een speciale bestemmingspagina of sectie van uw site wilde met een aparte koptekst, CSS, enzovoort, kunt u die sjabloon maken en toepassen op een Mura-pagina in de sitebeheerder. Uw sjablonen kunnen zelfs 100% HTML zijn als u dat wilt (er is natuurlijk niets dynamisch op dat moment). 

Een nieuwe lay-outsjabloon maken

Als u een lay-outsjabloon wilt maken, begint u een nieuw .cfm-bestand in de sjabloondirectory van uw thema. De sjablonen die in de sitemanager verschijnen, zullen in die map kijken en automatisch .cfm-bestanden zien, zodat u ze op die pagina kunt toepassen.

Om dit te testen, kunnen we een helloWorld.cfm pagina in onze sjablonenmap en pas deze toe op elke pagina:

1. Ga in uw sitebestanden naar uw Siteid / includes / themes / thema / templates directory
2. Maak een nieuw bestand met de naam helloWorld.cfm
   
   
3. Plak de volgende code en sla op

 Hallo Wereld 

Pas de nieuwe sjabloon toe op een pagina in Mura

1. Klik in de sitebeheerder op het sjabloonpictogram naast een willekeurige pagina.
2. Selecteer de nieuwe helloWorld.cfm-sjabloon
   
   
3. Klik op het wereldbolpictogram om een ​​voorbeeld van de pagina te bekijken

Dynamische inhoud toevoegen

Nu u begrijpt hoe sjablonen worden geladen, kunt u beginnen ze uit te bouwen om meer dynamisch te zijn door globale opmaken te maken voor de HTML-header, koptekst & voettekst. 

Begin met het maken van een omvat map in uw sjablonenmap in uw thema. Het ziet er ongeveer zo uit: theme name / templates / inc

In deze map kunt u zoveel verschillende onderdelen maken als u wilt. Ik zou aanraden om te beginnen met het volgende:

• html_head.cfm (Meta-tags, CSS, JavaScript-bibliotheken)
• header.cfm (Site logo / banner & navigatie)
• footer.cfm (onderste navigatie, copyright, contactgegevens, enz.)
• html_footer.cfm (extra JavaScript-bibliotheken en init-code)

We kunnen deze bestanden opnemen in onze sjabloon met behulp van de tag zoals zo:

Notitie: het sjabloonpad is relatief ten opzichte van het bestand waarvan we het noemen.

Terwijl u uw aanvullende sjablonen uitbreidt, kunt u deze delen opnieuw gebruiken, dus als u ooit een wijziging moet aanbrengen, hoeft u slechts één bestand te bewerken en zal het globaal worden bijgewerkt in al uw sjablonen.. 

Uw volledige sjabloon kan er ongeveer zo uitzien:

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

U kunt zoveel sjablonen maken als u wilt, zoals 

• one_column.cfm
• twoCol_SR.cfm (zijbalk staat aan de rechterkant)
• two_Col_SL.cfm (zijbalk is aan de linkerkant)
• three_column.cfm
• enz.

De Homepage-sjabloon

In de meeste websites is het gebruikelijk dat de startpagina nogal verschilt van de andere pagina's van de site. Het kan een grotere koptekst bevatten met een diavoorstelling, extra oproepen tot actie enzovoorts. Daarom bevatten we meestal een sjabloon home.cfm met elk thema om rekening te houden met al deze speciale markeringen. Bovendien kunt u een top-body-id of -klasse toevoegen huis om u verder in staat te stellen in te loggen op de homepage-stijlen met CSS en rekening te houden met eventuele verschillen daar.