Mura CMS Layoutvorlagen

In Mura CMS können Sie beliebig viele Layoutvorlagen erstellen, in denen Sie Ihre Themenseiten formatieren möchten. Layoutvorlagen werden Ihren Mura-Seiten im Site-Manager zugewiesen. 

Wenn Sie im Browser an eine typische HTML-Seite denken, besteht sie im Allgemeinen aus den folgenden Elementen:

• HTML Head (Meta-Tags, CSS, JavaScript-Bibliotheken)
• Kopfzeile (Site-Logo / Banner & Navigation)
• Container
• Haupttextinhalt (Hauptinhaltsabschnitt, Seitenleisten usw.)
• Fußzeile (unteres Navi, Copyright, Kontaktinformationen usw.)
• HTML-Fußzeilenelemente (zusätzliche JavaScript-Bibliotheken und Init-Code)

Diese Struktur besteht im Wesentlichen aus einer Mura-Layoutvorlage. Sie können Ihre Layoutvorlagen jedoch beliebig erstellen. Wenn Sie beispielsweise eine spezielle Landing Page oder einen Bereich Ihrer Website mit einem separaten Header, CSS usw. wünschen, können Sie diese Vorlage erstellen und auf eine Mura-Seite im Site Manager anwenden. Ihre Vorlagen könnten sogar 100% HTML sein, wenn Sie möchten (natürlich wäre zu diesem Zeitpunkt nichts dynamisch).. 

Erstellen einer neuen Layoutvorlage

Beginnen Sie zum Erstellen einer Layoutvorlage eine neue .cfm-Datei im Vorlagenverzeichnis Ihres Designs. Die Dropdown-Vorlagen im Site Manager sehen in diesem Ordner und sehen automatisch alle .cfm-Dateien, sodass Sie sie auf diese Seite anwenden können.

Um dies zu testen, können wir eine erstellen helloWorld.cfm Seite in unserem Vorlagenverzeichnis und wende das auf jede Seite an:

1. Navigieren Sie in Ihren Site-Dateien zu Ihrem siteID / umfasst / themes / theme / templates Verzeichnis
2. Erstellen Sie eine neue Datei mit dem Namen helloWorld.cfm
   
   
3. Fügen Sie den folgenden Code ein und speichern Sie

 Hallo Welt 

Wenden Sie die neue Vorlage auf eine Seite in Mura an

1. Klicken Sie im Site-Manager auf das Vorlagensymbol neben einer Seite.
2. Wählen Sie die neue Vorlage helloWorld.cfm aus
   
   
3. Klicken Sie auf das Globussymbol, um eine Vorschau der Seite anzuzeigen

Dynamische Include hinzufügen

Nachdem Sie nun wissen, wie Vorlagen geladen werden, können Sie sie dynamischer gestalten, indem Sie globale Include-Elemente für die HTML-Kopfzeile, die Kopfzeile und die Fußzeile erstellen. 

Beginnen Sie mit dem Erstellen eines beinhaltet Verzeichnis in Ihrem Vorlagenverzeichnis in Ihrem Design. Es könnte ungefähr so ​​aussehen: Themenname / templates / inc

In diesem Ordner können Sie beliebig viele verschiedene Include-Dateien erstellen. Ich würde empfehlen, mit dem folgenden zu beginnen:

• html_head.cfm (Meta-Tags, CSS, JavaScript-Bibliotheken)
• header.cfm (Site-Logo / Banner & Navigation)
• footer.cfm (Navis, Copyright, Kontaktinformationen usw.)
• html_footer.cfm (zusätzliche JavaScript-Bibliotheken und Init-Code)

Wir können diese Dateien in unsere Vorlage einfügen, indem Sie die Tag wie folgt:

Hinweis: Der Vorlagenpfad ist relativ zu der Datei, von der aus er aufgerufen wird.

Wenn Sie Ihre zusätzlichen Vorlagen erstellen, können Sie diese Include-Dateien wiederverwenden. Wenn Sie also eine Änderung vornehmen müssen, müssen Sie nur eine Datei bearbeiten. Diese wird global über alle Ihre Vorlagen hinweg aktualisiert. 

Ihre vollständige Vorlage kann in etwa so aussehen:

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

Sie können so viele Vorlagen erstellen, wie Sie möchten 

• one_column.cfm
• twoCol_SR.cfm (Seitenleiste befindet sich auf der rechten Seite)
• two_Col_SL.cfm (Seitenleiste ist auf der linken Seite)
• three_column.cfm
• usw.

Die Homepage-Vorlage

Bei den meisten Websites ist es üblich, dass sich die Startseite erheblich von den anderen Seiten der Website unterscheidet. Es kann einen größeren Header mit einer Diaschau, zusätzlichen Aufrufen zu Aktionen usw. enthalten. Aus diesem Grund enthalten wir normalerweise eine home.cfm-Vorlage mit jedem Design, um all diese spezielle Markierung zu berücksichtigen. Darüber hinaus können Sie eine Top-Body-ID oder eine Klasse von hinzufügen Zuhause Damit Sie sich weiter mit CSS in die Homepage einbinden und etwaige Unterschiede berücksichtigen können.