Mura CMS șabloane de aspect

În Mura CMS, este ușor să creați cât mai multe șabloane de aspect pe care doriți să le formatați paginile tematice. Șabloanele de aranjare sunt atribuite paginilor dvs. Mura în cadrul site-ului manager. 

Dacă vă gândiți la o pagină HTML obișnuită în browser, aceasta va consta în general din următoarele elemente:

  • Capul HTML (etichete Meta, CSS, Biblioteci JavaScript)
  • Antet (logo-ul site-ului / banner & navigație)
  • recipient
  • Conținutul principal al corpului (secțiunea de conținut principal, barele laterale etc.)
  • Footer (bottom nav, drepturi de autor, informații de contact etc.)
  • Elemente de subsol HTML (biblioteci JavaScript suplimentare și cod init)
      

Această structură este, în esență, ceea ce conține un șablon de aspect Mura, dar puteți crea șabloanele de aspect, oricum doriți. De exemplu, dacă doriți o pagină de destinație sau o secțiune specială a site-ului dvs. care include un antet separat, CSS etc., puteți crea acest șablon și îl puteți aplica într-o pagină Mura din managerul de site-uri. Șabloanele dvs. ar putea fi chiar 100% HTML, dacă doriți să fie (desigur, nimic nu ar fi dinamic la acel moment). 

Crearea unui șablon nou de aranjare

Pentru a crea un șablon de aspect, începeți un fișier .cfm nou în directorul de șabloane al temei. Pachetul de șabloane din managerul de site-uri va arăta în interiorul acelui dosar și va vedea automat toate fișierele .cfm, permițându-le să le aplicați acelei pagini.

Pentru a testa acest lucru, putem crea un helloWorld.cfm în directorul nostru de șabloane și aplicați-l pe orice pagină:

  1. În fișierele site-ului dvs., navigați la dvs. SiteID / include / teme / temă / șabloane director
  2. Creați un fișier nou numit helloWorld.cfm

  3. Inserați următorul cod și salvați-l
 Salut Lume 

Aplicați noul șablon pe o pagină din Mura

  1. În managerul de site-uri, faceți clic pe pictograma șablon de lângă orice pagină.
  2. Selectați noul șablon helloWorld.cfm

  3. Faceți clic pe pictograma globului pentru a previzualiza pagina

Adăugarea dinamic include

Acum, că înțelegeți cum sunt încărcate șabloanele, puteți începe să le construiți pentru a fi mai dinamice, prin crearea globală include pentru antetul HTML, antetul și subsolul. 

Începeți prin a crea un include directorul din directorul de șabloane din tema dvs. Poate arata cam asa: nume temă / șabloane / inc

În acest dosar, puteți crea cât mai multe diferite includ așa cum doriți. Aș recomanda începând cu următoarele:

  • html_head.cfm (etichete Meta, CSS, Biblioteci JavaScript)
  • header.cfm (Site logo / banner & Navigation)
  • footer.cfm (pagini de fund, drepturi de autor, informații de contact etc.)
  • html_footer.cfm (biblioteci JavaScript suplimentare și cod init)

Putem include aceste fișiere în șablonul nostru utilizând eticheta este așa:

Notă: calea șablonului este relativă la fișierul din care suntem.

Pe măsură ce construiți șabloanele dvs. suplimentare, puteți reutiliza acestea, astfel încât, dacă vreți să faceți o modificare, trebuie doar să editați un fișier și acesta va fi actualizat la nivel global în toate șabloanele. 

Șablonul dvs. complet poate arăta astfel:

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

Puteți crea cât mai multe șabloane pe care le doriți, cum ar fi 

  • one_column.cfm
  • twoCol_SR.cfm (bara laterală este în partea dreaptă)
  • two_Col_SL.cfm (bara laterală este în partea stângă)
  • three_column.cfm
  • etc.

Șablon de pagină de pornire

În majoritatea site-urilor web, este comun că pagina de pornire este destul de diferită de celelalte pagini de pe site. Poate conține un antet mai mare cu o prezentare de diapozitive, apeluri suplimentare la acțiune și așa mai departe. Din această cauză, de obicei includeți un șablon home.cfm cu fiecare temă pentru a ține cont de acest marcaj special. În plus, puteți adăuga un id sau o clasă de corp superior Acasă pentru a vă permite să vă apropiați mai mult de stilurile de pagină de pornire cu CSS și să luați în considerare diferențele existente.