Mura CMS Plantillas de diseño

En Mura CMS, es fácil crear tantas plantillas de diseño como desee para dar formato a sus páginas de temas. Las plantillas de diseño se asignan a sus páginas de Mura dentro del administrador del sitio. 

Si piensa en una página HTML típica en el navegador, generalmente constará de los siguientes elementos:

  • HTML Head (Meta tags, CSS, Bibliotecas JavaScript)
  • Encabezado (logo / banner del sitio y navegación)
  • Envase
  • Contenido del cuerpo principal (sección de contenido primario, barras laterales, etc.)
  • Pie de página (navegación inferior, derechos de autor, información de contacto, etc.)
  • Elementos de pie de página HTML (bibliotecas de JavaScript adicionales y código de inicio)
      

Esta estructura es esencialmente lo que comprende una plantilla de diseño Mura, pero puede crear sus plantillas de diseño como desee. Por ejemplo, si desea una página de inicio o sección especial de su sitio que incluya un encabezado, CSS, etc., puede crear esa plantilla y aplicarla a una página de Mura en el administrador del sitio. Sus plantillas podrían ser incluso 100% HTML si lo desea (por supuesto, nada sería dinámico en ese momento). 

Creación de una nueva plantilla de diseño

Para crear una plantilla de diseño, comience un nuevo archivo .cfm en el directorio de plantillas de su tema. Las plantillas desplegadas en el administrador del sitio verán dentro de esa carpeta y verán automáticamente los archivos .cfm, permitiéndole aplicarlos a esa página..

Para probar esto, podemos crear una helloWorld.cfm página en nuestro directorio de plantillas y aplicar eso a cualquier página:

  1. En los archivos de su sitio, navegue a su siteID / includes / themes / theme / templates directorio
  2. Crear un nuevo archivo llamado helloWorld.cfm

  3. Pega el siguiente código y guarda
 Hola Mundo 

Aplicar la nueva plantilla a una página en Mura.

  1. En el administrador del sitio, haga clic en el icono de la plantilla junto a cualquier página.
  2. Seleccione la nueva plantilla helloWorld.cfm

  3. Haga clic en el icono del globo para previsualizar la página.

Añadiendo dinámicos incluye

Ahora que comprende cómo se cargan las plantillas, puede comenzar a desarrollarlas para que sean más dinámicas al crear inclusiones globales para el encabezado HTML, el encabezado y el pie de página.. 

Comience creando un incluye directorio dentro de su directorio de plantillas en su tema. Puede parecer algo como esto: nombre del tema / templates / inc

En esta carpeta, puede crear tantos objetos diferentes como desee. Yo recomendaría comenzar con lo siguiente:

  • html_head.cfm (Meta tags, CSS, bibliotecas de JavaScript)
  • header.cfm (logotipo / banner del sitio y navegación)
  • footer.cfm (navegación inferior, derechos de autor, información de contacto, etc.)
  • html_footer.cfm (bibliotecas de JavaScript adicionales y código de inicio)

Podemos incluir estos archivos dentro de nuestra plantilla usando el etiqueta como así:

Nota: la ruta de la plantilla es relativa al archivo del que lo llamamos.

A medida que construye sus plantillas adicionales, puede reutilizar estos recursos incluidos, por lo que si alguna vez necesita hacer un cambio, solo tiene que editar un archivo y se actualizará globalmente en todas sus plantillas. 

Su plantilla completa puede verse algo como esto:

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

Puede crear tantas plantillas como desee, como 

  • one_column.cfm
  • twoCol_SR.cfm (la barra lateral está a la derecha)
  • two_Col_SL.cfm (la barra lateral está a la izquierda)
  • three_column.cfm
  • etc.

La plantilla de la página de inicio

En la mayoría de los sitios web, es común que la página de inicio sea un poco diferente a las otras páginas del sitio. Puede contener un encabezado más grande con una presentación de diapositivas, llamadas a la acción adicionales, etc. Debido a esto, normalmente incluimos una plantilla home.cfm con cada tema para dar cuenta de todo este marcado especial. Además, puede agregar un ID de cuerpo superior o una clase de casa para permitirle engancharse a los estilos de la página de inicio con CSS y tener en cuenta las diferencias allí.