# Plantillas

Uno de los aspectos más importantes al crear el sitio es la arquitectura base y apariencia de este. En Template Builder, podrás modificar las plantillas base, junto con el JavaScript y CSS globales para usar en tus páginas y cambiar su estructura según lo requieras.

Cuando ya se selecciona la plantilla que se usa dentro del sitio, se puede acceder desde el Template Builder a las distintas páginas para cambiar los códigos según los necesitas.

Una vez dentro del Template Builder, puedes ver que el menú principal se esconde para optimizar el área de trabajo. En la barra superior, a la izquierda, encuentras el nombre de la sección y el estado de publicación actual.

The templates main menu
  • Publicado: Cuando ya existe una versión publicada y su versión editable es igual.
  • Cambios pendientes: Cuando hay una versión publicada, pero hay cambios pendientes de publicar en tu versión editable.
  • En revisión: Cuando se habilita la revisión en equipo y se ha enviado a revisión la versión editable.
  • Aprobado: Cuando se habilita la revisión en equipo y si es que se cumplieron las condiciones de revisión del elemento. Si estás en este estado, tus plantillas están listos para ser publicados.

En la parte superior derecha, encuentras la última fecha de publicación y las acciones disponibles:

Vista previa : Al hacer click en este icono se abre una nueva pestaña con el modo vista previa de los plantillas, en el cual podrás ver como si estuvieran publicados, todos los cambios que tienes en tus plantillas.

Atención

Puedes previsualizar los cambios como usuario sin sesión o usuario con sesión de Modyo. Para esto, es recomendable iniciar o cerrar la sesión de Modyo en el sitio antes de entrar al modo vista previa, dado que si se inicia o cierra sesión dentro del modo vista previa, podrías encontrarte con errores de seguridad del tipo x-frame-options o mixed-content, dependiendo de la configuración de dominios personalizados y SSL del sitio

The version differences window

Diferencias : Al hacer click en este icono, irás a la vista de diferencias, en la cual podrás comparar los cambios que hay entre múltiples versiones de tus plantillas.

Por defecto, comienzas comparando la versión publicada con la versión editable, pero al hacer uso de los selectores de versiones, puedes comparar además con las versiones de respaldo.

Tip

Cada vez que publicas una versión, la versión que estaba publicada pasa a ser una versión de respaldo. Por defecto, se guardan hasta 20 respaldos, de tal forma que los veinte respaldos más recientes se pueden comparar, restaurar, y hacer rollback. Para más información sobre el versionamiento, ve versionado.

Buscar en plantillas : Despliega una barra lateral con un buscador de texto que busca en todas las plantillas editables.

The activity window

Actividad/Comentarios : Despliega una barra lateral con el historial de actividad y comentarios de las plantillas.

Al final de la barra lateral, ves una caja de texto donde puedes escribir un comentario. Junto a cada actividad, puedes hacer click en ver detalle para mostrar la información completa de ese registro de actividad.

Más acciones :

  • Restaurar todo: Restauras las plantillas a su valor original.

Acción principal

  • Guardar: Guarda todos los cambios de todas las plantillas.
  • Enviar a revisión: Cambia el estado de las plantillas a "Esperando revisión". En este estado puedes seguir haciendo cambios, pero cada cambio será notificado vía correo a los revisores asignados.
  • Rechazar: Vuelve al estado "En edición", notificando a los revisores que el elemento fue rechazado.
  • Publicar: Una vez que las plantillas fueron aprobadas, podrás ir a la vista de publicación conjunta y publicar tus plantillas.

En el área de trabajo principal, puedes ver dos secciones:

  • El área de trabajo.
  • El área de selección de plantillas.

Cada plantillas al que le hagas click en la barra lateral derecha, se abre en el área central con un editor de texto. Si abres múltiples plantillas, estas quedan abiertas como pestañas en el área de trabajo.

La barra de plantillas a la derecha tiene dos pestañas: vistas y snippets.

# Layouts personalizados

Modyo cuenta con tres layouts por defecto:

  • Home: Se usa exclusivamente en la página home del sitio.
  • Base: Todas las páginas excepto el home usan este layout por defecto.
  • Error: Las vistas de error usan este layout limpio (404, 401)

Puedes crear nuevos Layouts desde el template builder, haciendo click en "Añadir layout" en la pestaña "Vistas", lo que te permitirá definir una nueva estructura base para usar en las páginas.

Puedes usar como base este código que contiene todo lo necesario para que tus páginas usen todos los elementos necesarios del sitio, como el head, header, footer, service worker, y la configuración de Google Tag Manager, pero ten en cuenta que puedes modifcarlo tanto como quieras:

{% html5 %}
<head>
  {% snippet 'shared/general/head' %}
</head>

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

{{ site.breadcrumb }}
<div id="main-layout">
{{ content_for_layout }}
</div>

<script>{% snippet "shared/serviceworker/register_js" %}</script>
{% snippet 'shared/general/footer' %}

{% endbody %}
{% endhtml5 %}

Luego de haber creado tu nuevo layout, puedes empezar a usarlo yendo a la vista de edición de las páginas y cambiarlo desde el tab de propiedades.

# Errores en Vistas

En la sección de vistas, encontrarás 4 tipos de error disponible para personalizar:

  • Deshabilitado: Verás esta vista de error si es que el sitio al que estás intentando acceder ha sido deshabilitado.
  • 404: Verás esta vista si entras a una URL del sitio que no está definida y si es que en la configuración de restricciones del sitio decides mostrar el 404 y no redireccionar a la página home.
  • Privacy: Verás esta vista de error si no tienes permisos para acceder al sitio o a una de sus páginas.
  • Template: Verás esta vista de error cuando la página del sitio que estés cargando tenga un error de sintaxis de liquid. Es poco probable que llegues a ver esta vista, dado que desde modyo 8.1 en adelante contamos con una funcionalidad que checa la sintaxis de liquid antes de poder guardar y publicar cambios en el template builder.

# CSS y JavaScript

Es posible crear plantillas personalizadas de código CSS y JavaScript haciendo click en los botones +, en las secciones de CSS y JavaScript respectivamente, al final de la pestaña Vistas.

Para incluir cualquiera de estas plantilla, existen distintos filtros de Liquid disponibles: asset_url para generar la URL de la plantilla, y stylesheet_tag y script_tag para generar los tags correspondientes, e.g.

<head>
  {{ 'my-css' | asset_url: 'css' }}
  {{ 'my-css' | asset_url: 'css' | stylesheet_tag }}
  {{ 'my-js' | asset_url: 'js' | script_tag }}
</head>

Para conocer a detalle y los parámetros soportados por estos filtros, dirígete a filtros de Liquid.

# Snippets

Los snippets son pedazos de código que pueden ser utilizados una o más veces. Junto a cada snippet personalizado, encontrarás un ícono () para copiar su ruta de referencia. El código lucirá similar a este: {% snippet "nombre-del-snippet" %}.

Puedes añadir snippets personalizados al final del listado de snippets de la plataforma, haciendo click en el botón +.

The custom snippet window

Tip

Para que el sistema reconozca el tipo de lenguaje de programación al que pertenece el snippet, se debe agregar la terminación con guión bajo + terminación, es decir "front_css" o "library_js" por defecto reconocerá el snippet como lenguaje HTML.

Tip

Todos los elementos del Template Builder usan Liquid como motor de plantillas.

Para más información sobre qué es Liquid y cómo sacarle el mejor provecho, echa un vistazo a la página Liquid Markup

En el área de trabajo, debajo de las pestañas, encontrarás una barra con elementos útiles:

Action bar inside templates

Gestor de archivos: Se levanta un modal donde puedes acceder a todos los archivos de la cuenta y copiar su URL. Si accedes a la segunda pestaña, puedes subir nuevos archivos.

Tip

Para más información sobre los beneficios y prestaciones de Gestor de Archivos, dirígete a Asset Manager

Atajos de teclado: Se muestra un pequeño pop-up con algunos de los atajos de teclado útiles para usar en el Template Builder.

Keyboard shortcuts inside the templates module

Snippets: Se despliega un listado con todos los snippets, junto a la opción de copiar su código de referencia.

The list with all your custom snippets

Cambios: Un listado de todas las veces y estados en los que has hecho la acción "Guardar" en esta versión. Al hacer click en alguna de las sub-versiones, cambias el contenido del template en el que estás trabajando a esa sub-versión.

The latest changes in your template

Tip

Si publicas una versión, puedes ver que el listado de cambios desaparece, esto es porque la nueva versión editable no ha tenido ningún cambio.

Tip

Las sub-versiones son por cada plantilla, por lo que para algunos puedes observar que hay cambios y para otros no verás el selector de cambios. De la misma forma, si vuelves a una sub-versión anterior de un template, no afectas al resto de los templates.

Tip

Si se reestablece una versión anterior a la versión editable, podrás acceder a las sub-versiones de cada template de esa versión. Puedes aprender más sobre el [versionado aquí].(/platform/core/key-concepts.html#versionado)

Al igual que cada template, puedes restaurar todos los templates a su versión original haciendo click en la acción secundaria de la barra superior " Restaurar todo". Para que esos cambios tengan efecto, debes publicar los templates.

# SEO

El SEO (Search Engine Optimization) es uno de los tópicos más importantes del sitio y del contenido.

En Modyo existe una forma de controlar la forma en que los motores de búsqueda leen tu sitio y contenido, añadiendo meta tags de forma dinámica dependiendo de los atributos que añadas a tus páginas y contenidos.

Puedes añadir este snippet de código al Template Builder y luego llamar a este snippet desde el head de tu sitio:

<!-- Site SEO -->
<meta name="keywords" content="{{ site.keywords }}" />
<meta name="author" content="{{ site.name }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% if page %}
<!--Layouts SEO -->
{{ page.meta_tags }}
<meta name="description" content="{{ page.excerpt }}" />
<meta property="og:title" content="{{ page.title }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ page.url }}" />
<meta property="og:image" content="{{ site.logo | asset_url : 'original' }}" />
<meta property="og:site_name" content="{{ site.name }}" />
<meta property="og:description" content="{{ page.excerpt }}" />
{% endif %} 
{% if entry %}
<!-- Content SEO -->
<meta name="description" content="{{ entry.excerpt }}" />
<meta property="og:title" content="{{ entry.title }}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{site.url}}/{{entry.type_uid}}/{{entry.slug}}" />
<meta property="og:image" content="{{ entry.covers.first | asset_url : 'original' }} "/>
<meta property="og:site_name" content="{{ site.name }}" />
<meta property="og:description" content="{{ entry.excerpt }}" />
{% endif %} 
{% unless page or entry %}
<!-- Default SEO -->
<meta name="description" content="{{ site.description }}" />
<meta property="og:title" content="{{ site.name }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ request.url }}" />
<meta property="og:image" content="{{ site.logo | asset_url : 'original' }}" />
<meta property="og:site_name" content="{{ site.name }}" />
<meta property="og:description" content="{{ site.description }}" />
{% endunless %}
<!-- END SEO <-->

Este snippet es diferente cuando se está usando una página personalizada, alguna de las páginas por defecto de Modyo, o bien, las páginas de contenido, por lo que haciendo uso de los atributos de cada elemento, puedes definir una buena base de SEO para todas las URLs de tu sitio.

Si es que lo requieres, puedes personalizar este snippet, definiendo qué metas quieres que aparezcan para URLs o tipos específicos.

Por ejemplo, en la sección de contenido, puedes usar:

...
{% if entry %}
<!-- Content SEO -->
<meta name="description" content="{{ entry.meta.excerpt }}" />
<meta property="og:title" content="{{ entry.meta.title }}" />
<meta property="og:url" content="{{site.url}}/{{entry.meta.type_uid}}/{{entry.meta.slug}}" />
<meta property="og:image" content="{{ entry.fields.covers.first | asset_url : 'original' }}" />
<meta property="og:site_name" content="{{ site.name }}" />
<meta property="og:description" content="{{ entry.meta.excerpt }}" />
{% if entry.type_uid = 'posts'%}
<meta property="og:type" content="article" />
{endif} 
{% if entry.type_uid = 'place'%}
<meta property="og:type" content="place" />
<meta property="place:latitude" content="{{ entry.location.first.latitude }}" />
<meta property="place:longitude" content="{{ entry.location.first.longitude }}" />
{% endif %} 
{% endif %} 
...

En este caso, los tipos posts y place comparten los atributos title, excerpt y covers, y difieren en el objeto locations. Además, define un tipo de documento diferente para cada uno.

Last Updated: 17/5/2022,