# Plantillas

La arquitectura base y la apariencia son aspectos esenciales de un sitio. En la sección de Plantillas, puedes ajustar las plantillas base, el JavaScript y CSS globales, y modificar la estructura según sea necesario.

Cuando creas un sitio, se completa con plantillas distintas para generar el tema Minimal y puedes empezar a crear tu canal digital en él. Puedes también crear snippets de código HTML, JS y CSS para extender la funcionalidad de tu sitio.

En la sección de plantillas, el menú principal se oculta para optimizar el área de trabajo. En la parte superior izquierda, encuentras el nombre de la sección y el estado actual de la publicación:

Publicado: Hay una versión publicada y que la versión editable es idéntica.
Cambios pendientes: Existe una versión publicada, pero hay modificaciones pendientes de publicar en tu versión editable.
En revisión: La revisión en equipo está activada y se ha enviado a revisión la versión editable.
Aprobado: La revisión en equipo está activada y las condiciones de revisión del elemento se han cumplido. En este estado, la plantilla está lista para ser publicada.

En la parte superior derecha, puedes ver la última fecha de publicación e íconos con las acciones disponibles:

Vista previa: Da click en este ícono para abrir una nueva pestaña con la vista previa de las plantillas. Aquí puedes visualizar todos los cambios en tus plantillas, como si estuvieran publicados.

Atención

Puedes previsualizar los cambios como usuario sin sesión o usuario con sesión activa de Modyo. Para esto, recomendamos 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. Esto se debe a que iniciar o cerrar sesión dentro del modo vista previa puede generar errores de seguridad como x-frame-options o mixed-content, dependiendo de la configuración de dominios personalizados y SSL del sitio.

Diferencias: Compara los cambios entre múltiples versiones de tus plantillas. Por defecto, Modyo compara la versión publicada con la versión editable. Usa los selectores de versiones para comparar con 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, permitiéndote comparar, restaurar y hacer rollback a las últimas 20 versiones

Para más información sobre el versionamiento, consulta la sección de versionado.

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

Ver actividad: Despliega una barra lateral que muestra el historial de actividad y donde puedes leer y escribir comentarios. Haz click en ver detalle para mostrar la información completa de cualquier registro de actividad.

Más acciones: Este ícono te permite Archivar o Borrar la plantilla abierta. Estas acciones solo están disponibles en las plantillas que se pueden eliminar, como las que creas tú o el layout Home. Las demás plantillas que trae el sitio, como los layouts Base y Error, no se pueden archivar, despublicar ni borrar.

Archivar: Disponible cuando la plantilla no tiene una versión publicada; si la tiene, despublícala primero. Una plantilla archivada no se puede editar y desaparece del listado. Para verla, activa Mostrar archivados al pie del panel lateral y, si quieres volver a usarla, haz click en Restaurar.
Borrar: Disponible cuando la plantilla está archivada y no tiene una versión publicada ni programada. Esta acción es irreversible.

La última opción en la bara superior muestra las acciones principales que puedes llevar a cabo:

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 modificaciones, pero cada cambio será notificado por correo a los revisores asignados.
Forzar publicación: Solo disponible para administradores del sitio, permite publicar inmediatamente una plantilla, incluso si está esperando revisión
Rechazar: Vuelve al estado "En edición" y notifica a los revisores que el elemento fue rechazado.
Publicar: Una vez que la plantilla ha sido aprobada, puedes enviarla a publicar.
Despublicar: Disponible en las plantillas publicadas que se pueden eliminar. Elige Despublicar ahora, o Despublicar en para programarlo en una fecha. Las plantillas publicadas que hacen referencia a la plantilla despublicada ya no pueden renderizarla.

En el área de trabajo principal, hay dos secciones:

El área de edición: El hacer click en una plantilla del listado del área de selección del lado derecho abrirá la plantilla en el área central con un editor de texto. Si abres múltiples plantillas, abrirán como pestañas en el área de trabajo.
El área de selección de plantillas: Selecciona la pestaña de vistas o snippets, según requieras.

# Layouts

Modyo ofrece tres layouts predefinidos:

Home: Exclusivamente para la página principal del sitio.
Base: Todas las páginas, excepto la de inicio, usan este layout.
Error: Empleado en las tres vistas de error del sitio (404, disabled y template), presentando un diseño limpio.

Para crear un nuevo layout:

En la sección de Plantillas da click en la pestaña Vistas
Da click en el botón + junto a Layouts.
Agrega la Ruta y haz clic en Añadir.

Esto te permite definir una nueva estructura base para usar en las páginas.

Al crear un layout, Modyo lo inicializa con una estructura mínima. Si quieres que tus páginas usen todos los elementos del sitio, como el encabezado, el pie de página, el service worker y la configuración de Google Tag Manager, reemplaza ese contenido por el mismo código que trae el layout Base y ajústalo según requieras:

{% html5 %} <!-- HTML header with browser directives -->
<head>
  {% snippet 'shared/general/head' %}
</head>
{% body %} <!-- Body with automatic context classes -->
{% snippet 'shared/general/body_tag_manager' %}
<div id="modyo-site-alert-wrapper"></div>
{% snippet 'shared/general/header' %}
<main id="content">
  <div id="breadcrumb" class="mt-8">
    <div class="container breadcrumb-inner">
      {{ site.breadcrumb }}
    </div>
  </div>
  {{ content_for_layout }}
</main>
<script nonce="{{csp_nonce}}">{% snippet "shared/service_worker/register_js" %}</script>
{% snippet 'shared/general/footer' %}
{% endbody %}
{% endhtml5 %}

Si escribes tu propio layout, cuida estos tres detalles:

<div id="modyo-site-alert-wrapper"></div> es el contenedor donde el sitio inyecta sus alertas. Si lo omites, las alertas no se muestran.
<main id="content"> envuelve el contenido de la página y es el ancla que usan el tema y las vistas de error del sitio.
El atributo nonce="{{csp_nonce}}" es obligatorio en cada tag <script> o <style> inline cuando la política de Content-Security-Policy de tu aplicación web incluye la directiva nonce. Sin él, el navegador bloquea el script y el service worker nunca se registra.

Atención

La ruta del snippet que registra el service worker es shared/service_worker/register_js, con guión bajo entre service y worker. Si la escribes de otra forma, el snippet no se resuelve y el registro no se inyecta en la página.

Para aplicar un layout nuevo a una página, sigue estos pasos:

Publica el layout. Solo los layouts publicados aparecen en el selector Layout de las páginas.
Ve a la sección Páginas y abre la página.
Elige el layout en el campo Layout. En una página de widget, está en la pestaña Propiedades. En una página de contenido, lo eliges por separado para el Index y el Show, en la pestaña Editar.
Envía a revisión o publica la página, según el caso.

Atención

Si despublicas o borras un layout, las páginas que lo usan se muestran con el layout Base. Antes de despublicarlo, si hay páginas de widget publicadas que lo usan, Modyo te avisa cuántas son. Al borrarlo, además, la versión editable de las páginas de widget que lo tenían asignado pasa al layout Base, y ese cambio queda pendiente hasta que las publiques.

# Insertar una imagen con Liquid

Modyo recomienda usar el tag de Liquid y no el asset URL para insertar imágenes en tu contenido. Esto te permite redimensionar o sustituir una imagen en todos los lugares donde esté en uso y asegurarte que cualquier cambio se refleje de inmediato.

Además, Modyo convierte la imagen a formato webp con calidad lossless de compresión. Lo que genera imágenes más livianas, con tiempos de carga menores y sin perder calidad.

# Para obtener el código Liquid de una imagen:

Haz click en el ícono de media sobre tu área de trabajo
Haz click sobre la imagen.
Haz click en el ícono de copiar, junto al tag de Liquid de la imagen.

# Para sustituir una imagen, sigue estos pasos:

Haz click en content.
Selecciona el espacio donde está la imagen que quieres modificar.
Haz click en media.
Selecciona la imagen que quieres sustituir.
Haz click en el ícono de cargar imagen sobre la imagen actual.
Selecciona la imagen nueva.
Da click en actualizar información.

Tip

Es necesario que el CDN de tu cuenta esté en la nube para que los cambios se reflejen de inmediato, de lo contrario deberás solicitar la invalidación de caché mediante un ticket a Modyo (opens new window).

# Errores en Vistas

En la pestaña Vistas, dentro del grupo errors, puedes personalizar las tres vistas de error que trae el sitio. Todas se renderizan con el layout Error:

disabled: Se muestra cuando el sitio al que intentas acceder está deshabilitado.
404: Se muestra al entrar a una URL que no resuelve y también cuando un usuario con sesión iniciada abre una página privada cuyos segmentos no le corresponden. Si en la configuración de la aplicación web activas Redireccionar al home cuando una URL no se encuentra, el visitante va a la página de inicio en lugar de ver esta vista.
template: Visible cuando la página cargada tiene un error de sintaxis de Liquid. Es poco probable que veas esta vista, debido a que a partir de Modyo 8.1 la plataforma realiza una verificación de la sintaxis antes de guardar y publicar cambios en Plantillas.

No existe una vista de error para la privacidad. Cuando un visitante sin sesión pide un sitio o una página privada, la plataforma no renderiza ninguna vista de error: lo redirige a la página de inicio de sesión del sitio, o a la de registro si así está configurada la aplicación web, y lo devuelve a la URL que pedía una vez que inicia sesión.

Tip

Desde Modyo 10.2, las páginas de originación también responden con la vista 404 y los estilos del sitio cuando la URL no resuelve. Antes devolvían un cuerpo vacío, así que cualquier personalización que hagas a esta vista se refleja también en esas URLs.

# CSS y JavaScript

Crea vistas personalizadas de CSS y JavaScript para importar tus librerías a Modyo Platform. Para ello, sigue estos pasos:

En la sección de Plantillas da click en la pestaña Vistas.
Dirígete a la sección CSS o JavaScript, debajo de la sección de Layout.
Da click en el botón **+**correspondiente.
Agrega la Ruta y haz click en Añadir.
Una vez que hayas terminado de editar la Hoja de Estilo o Javascript, debes incluirla en tu layout. Para ello, puedes usar los siguientes filtros de Liquid:

asset_url: Para definir el tipo de archivo
stylesheet_tag: Genera un tag <link> para incluir la vista de CSS.
script_tag: Genera un tag <script> para incluir la vista de Javascript.

# Ejemplos

Una vista personalizada de CSS con media: screen
Una vista personalizada de Javascript con carga asíncrona

<head>
  {{ 'my-css' | asset_url: 'css' | stylesheet_tag: media: 'screen', title: 'color style' }}
  {{ 'my-js'  | asset_url: 'js'  | script_tag: async: 'async', defer: 'defer' }}
</head>

Una vez guardado y publicado, se traduce al siguiente código HTML:

<link href='my-css' rel='stylesheet' type='text/css' media='screen' title='color style' />
<script src='my-js' type='text/javascript' async='async' defer='defer'></script>

Para obtener información detallada y conocer los parámetros admitidos por estos filtros, consulta las fichas de Asset URL, Script tag, Stylesheet Tag, Theme Javascript y Theme Stylesheet.

# Cómo se sirven las vistas de CSS y JavaScript

Cada vista de CSS o JavaScript que creas en Plantillas se publica como un archivo con URL propia, que los filtros de Liquid resuelven por ti. Esa URL incluye una versión que se actualiza al publicar el sitio, lo que significa que:

Los visitantes reciben el archivo nuevo apenas publicas, sin que tengas que renombrar la vista ni pedir que se limpie ninguna caché.
Mientras la versión no cambie, el navegador puede reutilizar el archivo entre las distintas páginas del sitio en lugar de descargarlo de nuevo en cada una.
En el modo de vista previa el archivo nunca se sirve desde la caché, para que veas tus cambios de inmediato.

# Controlar cómo se carga el archivo

Por omisión, una hoja de estilos bloquea el pintado de la página hasta que termina de descargarse, y un script bloquea el análisis del HTML. Los filtros script_tag y stylesheet_tag aceptan cualquier atributo, así que puedes ajustar ese comportamiento sin dejar de usar la URL versionada:

<head>
  {{ 'base'      | asset_url: 'css' | stylesheet_tag: media: 'screen' }}
  {{ 'print'     | asset_url: 'css' | stylesheet_tag: media: 'print' }}
  {{ 'main'      | asset_url: 'js'  | script_tag: defer: 'defer' }}
  {{ 'analytics' | asset_url: 'js'  | script_tag: async: 'async' }}
</head>

defer descarga el script en paralelo y lo ejecuta cuando el documento terminó de analizarse, respetando el orden en que declaraste los scripts.
async lo ejecuta apenas está disponible, sin garantizar el orden. Úsalo solo para scripts independientes entre sí.
media limita una hoja de estilos a un contexto determinado, como la impresión.

Los filtros theme_javascript y theme_stylesheet producen la misma URL versionada, pero no admiten atributos. Si necesitas alguno, usa la combinación de arriba.

# Vista del tema o código inline

Escribir el CSS o el JavaScript directamente en la plantilla, dentro de una etiqueta <style> o <script>, ahorra una petición de red, pero traslada esos bytes al documento HTML, que se descarga completo en cada página que visita el usuario y no se reutiliza entre ellas. Como criterio general:

Publica como vista del tema todo el CSS y el JavaScript que compartan varias páginas. Se descarga una vez y se reutiliza en el resto del sitio.
Reserva el código inline para fragmentos pequeños y específicos de una página, o para el mínimo de estilos que necesita la primera pantalla visible.
Ten presente que un bloque <style> inline también bloquea el pintado de la página: escribirlo en la plantilla no lo vuelve gratuito.

# Snippets

Los snippets son fragmentos reutilizables de código HTML, JS o CSS para tus sitios. Para usar un snippet:

Copia la ruta de referencia del snippet personalizado. El código Liquid será similar a: {% snippet "nombre-del-snippet" %}.
Pega el código donde quieras llamar a este Snippet.

Para añadir un snippet personalizado:

En la sección de Plantillas da click en la pestaña Snippets
Navega hasta la sección Personalizado, al final del listado de snippets.
Da click en el botón +
Agrega la Ruta y haz clic en Añadir.

Importante

Para que el sistema reconozca el lenguaje de programación al que pertenece el snippet, debes agregar un guión bajo y después la terminación; de la siguiente manera: "front_css" o "library_js". Por defecto, el sistema 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 Liquid y cómo usarlo, consulta la sección Liquid Markup

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

Elementos de la barra de herramientas La barra de herramientas debajo de las pestañas del Template Builder contiene los siguientes elementos:

Gestor de archivos: Abre un modal que te permite acceder a todos los archivos de tu cuenta y copiar su URL. Selecciona la pestaña Subir archivos para cargar nuevos archivos. Para más información sobre los beneficios y funcionalidades de Gestor de Archivos, dirígete a Gestor de Archivos
Atajos de teclado: Muestra atajos de teclado útiles para Plantillas.
Snippets: Despliega un listado con todos los snippets y la opción de copiar su código de referencia.
Cambios: Despliega un listado de todas las veces y estados en los que has guardado la versión actual. Al hacer click en una de las sub-versiones, cambias el contenido del template a esa sub-versión.

Tip

Al publicar una versión, el listado de cambios desaparece, debido a que la nueva versión editable no ha tenido cambios.

Tip

Las sub-versiones son específicas a cada plantilla, por lo que algunos pueden tener cambios y otros no, las que no tienen cambios no mostrarán 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 restableces una versión anterior a la versión editable, puedes acceder a las sub-versiones de cada template de esa versión. Puedes aprender más sobre versionado aquí.

Cada plantilla se versiona por separado. Para devolver una plantilla a una versión anterior, ábrela, haz click en Diferencias y usa Resetear a esta versión, que lleva esa versión a la versión editable, o Rollback a esta versión, que la publica directamente. Para más detalles, consulta Revertir un cambio.

# SEO

El SEO (Search Engine Optimization) es fundamental para el posicionamiento de tu sitio y contenido.

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

Entre las plantillas con las que se crea el sitio está el snippet shared/general/seo, que el snippet shared/general/head carga en el head de los layouts Home, Base y Error. Lo encuentras en la pestaña Snippets y su contenido inicial es el siguiente:

<!-- Site SEO -->
<meta name="author" content="{{ site.name }}"/>

{{ site.meta_tags }}

{% if page %}
    <!-- Page SEO -->
    {{ page.meta_tags }}
{% endif %}

<!-- END SEO -->

{% if page_scope == 'show' %}
    <!-- Content Page: Show -->
    <meta name="description" content="{{ entry.meta.excerpt }}"/>
    <meta property="og:title" content="{{ entry.title }} | {{ site.name }}"/>
    <meta property="og:description" content="{{ entry.meta.excerpt }}"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="{{ entry.url }}"/>
    {% if site.logo %}
        <meta property="og:image" content="{{ site.logo | asset_url: 'original' }}"/>
    {% endif %}
    <meta property="og:site_name" content="{{ site.name }}"/>
    <link rel="canonical" href="{{ entry.url }}"/>

{% elsif page_scope == 'index' %}
    <!-- Content Page: Index -->
    <meta property="og:title" content="{{ page.title }} | {{ site.name }}"/>
    <meta name="description" content="{{ page.excerpt }}"/>
    <meta property="og:description" content="{{ page.excerpt }}"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="{{ page.url }}"/>
    {% if site.logo %}
        <meta property="og:image" content="{{ site.logo | asset_url : 'original' }}"/>
    {% endif %}
    <meta property="og:site_name" content="{{ site.name }}"/>
    <link rel="canonical" href="{{ page.url }}"/>

{% else %}
    <!-- Widget Page -->
    <meta property="og:title" content="{{ page.title }} - {{ site.name }}"/>
    <meta name="description" content="{{ page.excerpt }}"/>
    <meta property="og:description" content="{{ page.excerpt }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="{{page.url}}"/>
    {% if site.logo %}
        <meta property="og:image" content="{{ site.logo | asset_url : 'original' }}"/>
    {% endif %}
    <meta property="og:site_name" content="{{ site.name }}"/>
    <link rel="canonical" href="{{page.url}}"/>
{% endif %}

El snippet agrega primero las meta tags del sitio y las meta tags personalizadas de la página. Después usa la variable page_scope para generar las meta tags según la vista:

show: El detalle de una entrada en una página de contenido. Usa el título, el extracto y la URL de la entrada, con og:type igual a article.
index: El listado de entradas de una página de contenido. Usa el título, el extracto y la URL de la página, con og:type igual a article.
En cualquier otro caso, como en las páginas de widget, usa el título, el extracto y la URL de la página, con og:type igual a website.

En todos los casos agrega la URL canónica y, si el sitio tiene un logo, lo usa como og:image.

Puedes personalizar este snippet y definir qué meta tags deseas para URLs o tipos específicos.

# Ejemplos de SEO

A continuación te proporcionamos ejemplos de cómo usar el snippet de SEO para mejorar el SEO de diferentes casos:

# Meta tags específicos para una Entrada

Emplea este código para usar meta tags específicas cuando un usuario visita una entrada:

...
{% if entry %}
<!-- Content SEO -->
<meta name="description" content="{{ entry.meta.excerpt }}" />
<meta property="og:title" content="{{ entry.meta.title }}" />
<meta property="og:url" content="{{ entry.meta.url }}" />
<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.meta.type_uid == 'posts' %}
<meta property="og:type" content="article" />
{% endif %}
{% if entry.meta.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 de entrada posts y place comparten los atributos title, excerpt y covers y difieren en el campo location. Además, define un tipo de documento diferente para cada uno.

# Meta tags específicos para Categoría en Página de Contenido

Para meta tags específicos al mostrar entradas de una categoría, copia el siguiente código:

{% assign category_name = category_path | split: '/' | last | capitalize %}

{% case category_name %}
  {% when 'Category 1' %}
     {% assign category_description = 'This is the meta description for Category 1' %}
  {% when 'Categoría 2' %}
     {% assign category_description = 'This is the meta description for Category 2' %}
{% endcase %}

{% if category_path.size > 0 %}
<!-- Content Page: Index con categoría -->
<title> {{ category_name }} - {{ site.name }} </title>
<meta name="description" content="{{ category_description }}"/>
<meta property="og:title" content="{{ category_name }} - {{ site.name }}"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{ page.url }}/{{ category_path }}">
<meta property="og:image" content="https://d1dzq2r60kxox4.cloudfront.net/uploads/c82bdfea-3622-4c11-9a20-bea227cbdc60/original/og_image.jpg"/>
<meta property="og:site_name" content="{{ site.name }}"/>
<meta property="og:description" content="{{ category_description }}"/>
{% endif %}

En este código, se crea una variable category_name que contiene el nombre de la categoría tomado del URL, después un if sobre category_path.size > 0 agrega la metadata de la categoría solo cuando la URL incluye una.

Liquid te permite crear contenido dinámico para tu sitio. Para conocer más acerca de Liquid y como usar Liquid Objetos, visita Liquid Markup.

← CLI Variables Globales →