Templates es dónde agregas tus librerías base (JavaScript), CSS, vistas y snippets que serán utilizados en todo el sitio. Una vez que tengas un template creado, lo puedes utilizar en cualquier sitio dentro de tu cuenta. 

En este artículo:

• Templates
• Atajos del Editor de Código
• Vistas, Snippets y Archivos
• Galería de Temas
• Diferencias y Previsualización
• Revisar y Publicar

Templates 

En el Template Builder encontrarás el editor de código, el que te ayudará a modificar fácilmente el template base. Dirígete a Builder > Templates.

Modyo utiliza CodeMirror para todos los editores de código de la plataforma. Aquí es donde los desarrolladores realizan el trabajo y los cambios en Vistas, Snippets y Archivos.

Puedes tener múltiples pestañas abiertas con el código de distintas vistas, snippets y archivos. Si cualquiera de éstas es abierta y contiene cambios no guardados, la pestaña tendrá un *(asterisco) antes del nombre indicándolo. Puedes guardar tus cambios presionando las teclas Cmd/Ctrl + S.

En la esquina superior derecha de cada pestaña abierta puedes ver tres acciones:

•  Versiones Locales: Muestra las versiones de una vista, snippet o recurso en específico. Para volver a una versión anterior simplemente selecciona la versión a restaurar y presiona guardar.
  
  
•  Reiniciar: Reinicia la vista, snippet o recurso a la versión inicial. Al seleccionar reiniciar, recibirás una alerta indicando que perderás todos los cambios realizados anteriormente. 
  
  
• Selector de Snippets: El selector de snippets te permite acceder a cualquier snippet personalizado que hayas agregado al sitio e insertarlo en otra vista o snippet utilizando Liquid Markup. 

Atajos para el editor de código

El editor incluye algunos atajos que hacen el trabajo más fácil:

Cmd/Ctrl + F: Activa el buscador de palabras clave; soporta expresiones regulares.

Cmd/Ctrl + Alt + F: Te permite buscar y remplazar palabras claves, soporta expresiones regulares y remplazar selectiva o completamente una palabra. 

Cmd/Ctrl + Click: Te permite agregar múltiple cursores, para agregar código en varias locaciones al mismo tiempo.  

Cmd/Ctrl + D: Selecciona el ítem o líneas; se expande a medida que repites el comando. 

Cmd/Ctrl + E: Crea una etiqueta de HTML para el último término insertado o destacado. 

Abreviaturas Emmet

El editor soporta abreviaturas de CSS a través de una herramienta integrada llamada Emmet.

Por ejemplo puedes insertar la siguiente línea:

ul#nav>li.item$*4>a{Item $}

y luego presionar la tecla de tabulación y Emmet generará esto:

<ul id="nav">
  <li class="item1"><a href="">Item 1</a></li>
  <li class="item2"><a href="">Item 2</a></li>
  <li class="item3"><a href="">Item 3</a></li>
  <li class="item4"><a href="">Item 4</a></li>
</ul>

Vistas, Snippets y Archivos

En el lado derecho junto al editor de código verás Vistas, Snippets y Archivos. Más abajo explicaremos cada concepto.

Vistas

El template utilizado para el sitio contiene Vistas que son el código del front end que crea las páginas y presenta funcionalidades en el sitio. Una vista está compuesta de código de front end, principalmente de Objetos de Liquid (mira Liquid Markup). Las vistas pueden ser listados o vistas individuales. Por ejemplo una vista de listado desplegará una lista de contenidos provenientes del CMS (Contenido, Promociones, Lugares). Una vista individual presentará el ítem de contenido individualmente. En una vista puedes agregar lógicas diferentes, estilos o snippets para construir una vista de cualquier manera necesaria. 

Las vistas son utilizadas para todo tipo de propósitos como modificar páginas de error, desuscribirse de campañas de correo o modificar en un solo lugar código del front end que es cargado en todas las páginas de tu sitio como el footer, header, head o el base.

Organización

Las vistas están organizadas por aplicación o sección en la plataforma, ya sea de forma general (listado) o específica (post), y son nombradas siguendo un patrón básico.

Por ejemplo, sobre la aplicación de Posts, post index, es la vista responsable de mostrar el listado de posts, mientras tanto que post show, es responsable de cómo se ve cada post individualmente. 

Layouts

Existen tres vistas principales de todo el sitio. Estas son vistas base e impactan a todos los recursos del sitio. 

site home: El layout principal, es el responsable del home page.

site clean: La vista que aparece en respuesta a errores como 404.

site base: Responsable de todas las otras vistas que no son el homepage o página de error. 

Snippets 

Los Snippets son utilizados como bloques de código para diferentes propósitos y funcionalidades. Los snippets le dan a los desarrolladores la flexibilidad de administrar fácilmente código a través de todo el sitio. Los Snippets ayudan a los desarrolladores a administrar su código en un ambiente virtual con control de versiones dentro de cada snippet. 

 

A través de Liquid Markup, los Snippets pueden ser inyectados condicionalmente utilizando control de flujo. Por ejemplo puedes embeber Snippets dentro de otros Snippets.

Los Snippets son los bloques clave para los desarrolladores de Front End y son el corazón de la funcionalidad de vistas y Widgets. Muchas vistas y widgets están compuestas de Snippets. 

Ejemplo de Snippet para un header

<header>   <div class="header-inner">
  <div class="navbar">
    <div class="navbar-inner">
      <h1>{{ site.logo | asset_url : 'R360x50' | image_tag | link_to: site.url }}</h1>
    
...
 
</header>

Referencia al Snippet en una vista:

{% snippet 'shared/general/header' %}

Al final de la pestaña de Snippets, encontrarás un botón +Añadir un snippet, como puedes ver más abajo. Añade cualquier funcionalidad necesaria a los templates base utilizando Snippets. 

Archivos

Archivos permite administrar y cargar todos los archivos, incluyendo CSS y Javascript base para todo el sitio. Todos los archivos subidos por este medio, son guardados en la CDN de Modyo, generando una URL de referencia para la imagen o archivo.

Stylesheets style

Stylesheets style es un archivo .css que hace referencia al resto del código CSS utilizado dentro de tu sitio. 

Por ejemplo, puedes referenciar cualquiera otra librería de CSS que hayas subido o exista actualmente utilizando Liquid Markup, como se muestra en el ejemplo a continuación: 

{% snippet "shared/libs/bootstrap" %}
{% snippet "shared/libs/bootstrap_theme" %}
{% snippet "shared/libs/file_upload" %}
{% snippet "shared/libs/select2" %}
{% snippet "shared/libs/share" %}

Dentro de la sección de Snippets, bajo Libs, encontrarás el Snippet de código que está siendo utilizado actualmente en el CSS base. Cada layout puede soportar el uso de Bootstrap.

Javascript theme

El Javascript theme es donde puedes referenciar todo el .js relacionado a Snippets. Por ejemplo puedes crear un Snippet copiando una Librería de Javascript y referenciar el Snippet dentro del Javascript theme disponible a través de todo el sitio.

Por ejemplo, después de crear tu Snippet para Vue.js, como tal, lo puedes referenciar dentro del Javascript theme.

{% snippet "vuejs" %}
{% snippet "vuex" %}
{% snippet "vue_router" %} 

Archivos

Aquí es donde los desarrolladores pueden subir y buscar otros tipos de archivos como imágenes e insertar estos archivos en sus diseños. 

Haz click en + Agregar archivos para subir uno o múltiples archivos al mismo tiempo.

Haz click  en junto al nombre del archivo para copiar su ruta y ver una pequeña previsualización de este. Haz click en  para borrar el archivo.

Galería de Temas

En la esquina superior derecha del Template Builder haciendo click en  puedes realizar 2 acciones, ingresar a la galería de Temas o  Restaurar todo, que reiniciará el tema a su versión original. 

Cuando accedes a la Galería de Temas puedes instalar distintos Templates y personalizarlos para tu sitio. Cuando instalas un tema, todos los snippets son traspasados al nuevo tema. 

Instalar un nuevo template no borrará el trabajo hecho en el tema anterior, pero si cambiará las vistas y los archivos de JS y CSS. 

Además de la opción de + Instalar existen otras 2 acciones disponibles para cada tema:

 Copiar: Te permite clonar el template para hacerle modificaciones o utilizarlo en otro sitio.   

 Reestablecer: Te permite restablecer el template a su versión original.

Diferencias y Previsualizar

En la esquina superior derecha del listado junto al acceso a la Galería de temas hay 2 acciones disponibles Diferencias y Previsualizar.

 Previsualizar te permite ver el tema seleccionado en el front end utlizando el homepage como ejemplo.

Hacer click en  Diferencias levantará un modal donde podrás ver las diferencias entre versiones del tema.

La vista de diferencias muestra dos versiones por defecto. En la izquierda está la Versión actualmente publicada y a la derecha Versión editable.

En la parte superior hay dos dropdowns. Estos te permite cambiar de versiones y compararlas entre ellas. Las versiones anteriores están ordenas y tituladas por hora y fecha.

Dependiendo de las versiones comparadas hay dos opciones disponibles: 

Reestablecer a esta versión: Remplazará la Versión editable por la versión que se encuentre seleccionada a la izquierda. 

Rollback a esta versión: Remplazará la Versión actualmente publicada por la versión que se encuentre seleccionada a la izquierda. 

A la izquierda se marcan en rojo todas las líneas que tienen cambios, resaltando los caractéres eliminados o modificados. A la derecha  se marcan en verde todas las líneas que tienen cambios, resaltando los caracteres añadidos o modificados.

Revisar y publicar 

Para publicar los cambios, haz click en .

Nota: Si tu botón dice Enviar y no Publicar, es porque Workflows está habilitado para el sitio. En este caso deberás elegir un revisor, escribir un mensaje y enviar los cambios a revisión. Para saber más de Workflows, haz click aquí.