Archivo de personalización de plantilla

Las plantillas pueden incluir un archivo de configuración por el cual personalizar en vivo ciertas partes de la web. Principalmente colores y tipo de fuente, pero también el propio contenido de ciertas secciones.

Estas plantillas se distinguen en el menú de selección de plantilla, por medio un icono especial:

Si pinchamos en esta plantilla, antes de seleccionarla podremos ver si se ajusta a nuestra necesidades, modificando los colores en la parte inferior:

Una vez seleccionada podremos acceder a su edición en vivo de toda la web en la sección "Apariencia > Cambia los colores, letra y textos":

Para utilizar esta funcionalidad hay una serie de requisitos.

Primero, la plantilla necesita incluir el framework de javascript "Prototype". Tanto crear el archivo:

Como añadirlo en el archivo layout.liquid:

Segundo, necesitamos crear un fichero de nombre "template.yml" desde la ventana de edición de la plantilla.

Este es un archivo escrito en formato YAML. Se basa en pares "clave-valor", llamados nodos, y es muy importante mantener la indentanción correcta.

 Un ejemplo sencillo con un nodo de clave-valor:

 :clave: "valor"

 Y otro cuyo valor es una lista de elementos:

 :clave:
  - :subclave1: "valor1"
  - :subclave2: "valor2"

En el formato YAML no se utilizan tabuladores, únicamente espacios y es importante mantener el número correcto de espacios.

Para consutrir un archivo de configuración de plantilla hay que definir las secciones editables. Por ejemplo "Layout", "Página principal" y "Lista de productos".

Estos nodos colgarán del nodo raiz ":pages" de la forma:

:pages:
 - :pagina1
   ...
 - :pagina2
   ...
 - :pagina3
   ...

Cada elemento de ":pages" define una página editable. Tendrá las siguientes propiedades: ":title", ":file", ":styles" y/o ":content".

• :title - (texto) Titulo mostrado en el interfaz de administación.
• :file - (texto) Fichero el cual modifica.
• :styles - (lista) Listado de selectores css personalizables (especificación más adelante)
• :content - (lista) Listado de bloques de contenido modificable (especificación más adelante)

En nuestro ejemplo:

:pages:
 - :title: "Página principal"
   :file: "home.liquid"
   :styles:
     ...
   :content:
     ...
 - :title: "Lista de Productos"
   :file: "list.liquid"
   :styles:
     ...
   :content:
     ...
 - ...

Styles

En nodo ":styles" contiene un listado de elementos, uno por cada propiedad css que queramos que se modificable. Cada uno de estos elementos debe tener las siguientes propiedades:

• :selector - (texto) Selector CSS del elemento. Puede contener un selector CSS válido o varios separados por comas, tal y como figuraría en una hoja de estilos CSS.
• :title - (texto) Título mostrado en el interfaz de administración 
• :properties - (lista) Listado de propiedades editables.

 :pages:
  - :title: "Página principal"
    :file: "home.liquid"
    :styles:
     - :selector: "#home-text"
       :title: "Texto principal"
       :properties:
         ...

Por último, las propiedades constan de los siguientes elementos:

• :id - (texto) Idenfitificador CSS de la propiedad.
• :type - (texto) Tipo de control editable (color, font-family).
• :title - (texto) Título mostrado en el interfaz de administación.
• :default - (texto) Valor por defecto.

Ejemplo:

 :pages:
  - :title: "Página principal"
    :file: "home.liquid"
    :styles:
     - :selector: "#home-text"
       :title: "Texto principal"
       :properties:
        - :id: "color"
          :type: "color"
          :title: "Color de texto"
          :default: "#000000"

Pinchando en el color se desplegará el selector de color y podremos ver en tiempo real el resultado de la selección:

Content

Los elementos del nodo ":content" definiran bloques de contenido modificables.

De esta forma es posible navegar por la página web y editar ciertos bloques de texto y/o ocultarlos.

Esta funcionalidad requiere de la modificación del código de la plantilla para funcionar correctamente.

Primero el código YAML. Como hemos dicho antes, el nodo padre ":pages" contiene elementos de página. Estos elementos contienen información básica y dos nodos espciales: "styles" y "content". El nodo content contiene a su vez otros nodos, que definen los bloques de contenido editables.

Estos nodos contienen las siguientes propiedades:

• :id - (texto) Identificador único de bloque.
• :title - (texto) Título mostrado en el interfaz de administración.
• :removable - (true/false) Indica si el elemento se puede eliminar de la plantilla.
• :editable - (true/false) Indica si el elemento se puede editar.

Ejemplo:

 :pages:
  - :title: "Página principal"
    :file: "home.liquid"
    ...
    :content:
     - :id: "bloque1"
       :title: "Últimos artículos"
       :removable: true
       :editable: false
     - :id: "bloque2"
       :title: "Texto de introducción"       
       :removable: false
       :editable: true

Lo ideal es que los elementos editables sean simples elementos de tipo texto. Sin ninguna etiqueta liquid en su interior.

La modificación del código de la plantilla consiste en añadir unos atributos al bloque html que queremos hacer editable o removible.

Estos atributos son:

• data_editor - (true/false) Indica que el elemento es editable o removible.
• data_editor_type - (rich) Indica el tipo de editor. Si está presente muestra el editor enriquecido)
• data_editor_page - (texto) Nombre de archivo liquid sin la extension.
• data_editor_id - (texto) Identificador de bloque editable. Ha de ser único en la página.

Por ejemplo:

<div id="home-text" data_editor="true" data_editor_type="rich" data_editor_page="home" data_editor_id="bloque2">
    [ texto ]
</div>

<ul id="latest-posts" data_editor="false" data_editor_page="home" data_editor_id="bloque1">
  {% if latest_articles.size > 0%}
    {% for post in latest_articles limit: 4 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  {% else %}
    <li>No hay artículos recientes...</li>
  {% endif %}
</ul>

• Adapta tu plantilla para el nuevo editor
• Creando una nueva plantilla para el editor en vivo
• Crea una nueva plantilla desde cero
• Crea una plantilla a partir de una existente
• Vista general de 'edita tus plantillas'
• Referencia Liquid
• Referencia Liquid - Drops
• Referencia Liquid - Ficheros
• Creando bloques de contenido
• Creando estilos personalizables
• Formularios de contacto
• Creación de un fichero de ayuda
• Ver otros artículos relacionados con plantillas
• Ver otros artículos relacionados con liquid