Desarrollando con Automad | Programar Plus

0

Seleccionar el CMS adecuado para un blog o sitio web puede ser difícil. Cada proyecto web tiene sus propias necesidades y requisitos, lo que significa que un CMS puede ser más adecuado para un sitio pero no tanto para un sitio diferente. Las soluciones simples pueden carecer de algunas características esenciales, mientras que los sistemas más complejos pueden crear fácilmente una sobrecarga para una tarea determinada.

Quiero cubrir Automad, un CMS que es menos conocido que, digamos, un gigante como WordPress, pero aún ofrece algunas funciones poderosas como este mientras mantiene la agilidad de soluciones más pequeñas y simples, como generadores de sitios estáticos.

Específicamente, Automad llena el vacío entre las ofertas más grandes y las más pequeñas de varias maneras clave:

  • Está basado en archivos, pero no requiere una base de datos. Esto garantiza una instalación rápida, portabilidad, seguridad, velocidad y fácil implementación.
  • Incluso sin una base de datos, ofrece funciones de base de datos como búsqueda, etiquetado, filtrado y clasificación.
  • Un motor de almacenamiento en caché multicapa almacena en caché el contenido almacenado en el sistema de archivos de manera eficiente.
  • El panel basado en el navegador y el modo de edición en la página (“en vivo”) permiten una gestión de contenido intuitiva.

Pero lo que hace que Automad sea realmente diferente es su motor de plantillas integrado. La creación de plantillas es un requisito fundamental para muchos CMS porque crea y establece la base para la presentación visual de un sitio. Dado que el motor de plantillas de Automad está tan cerca del núcleo, le permite crear plantillas con navegaciones complejas y procesar imágenes por lotes utilizando una sintaxis limpia y breve. Sentirás la diferencia una vez que lo tengas en tus manos, y veremos un ejemplo juntos en un momento.

Pero primero, una descripción general rápida de las plantillas

Como diseñador o desarrollador, probablemente tenga curiosidad sobre cómo desarrollar temas y plantillas para Automad. Quiero decir, es el quid de por qué cualquiera de nosotros realmente usa un CMS en primer lugar. Si ha realizado algún nivel de tematización con WordPress, entonces trabajar con Automad le resultará vagamente familiar, y tal vez incluso más fácil.

El requisito mínimo para crear un tema de Automad es un solo .php y un archivo theme.json agrupados en un subdirectorio que crea dentro del nivel superior /packages directorio en una instalación predeterminada de Automad:

packages/
  yourTheme/
    yourTemplate.php
    theme.json

El paquete de tutoriales que se incluye con Automad proporciona un buen punto de partida para comprender los conceptos básicos de los temas.

Una mirada a la sintaxis utilizada en las plantillas de Automad

Si bien es posible escribir plantillas en PHP simple, no es obligatorio y, de hecho, no se recomienda. La razón es que la sintaxis de la plantilla propia de Automad es más corta, más legible y se integra bien con la interfaz de usuario al enumerar automáticamente todas las variables utilizadas en el tablero. Se puede mezclar perfectamente con el marcado HTML.

Básicamente, la sintaxis se puede dividir en dos grupos:

  1. Contenido de eco: @{ variable }
  2. Declaraciones, como funciones, bucles y condicionales: <@ function @> o <@ statement @>…<@ end @>

Contenido de eco

Digamos que queremos extraer el contenido del cuerpo de una publicación en una plantilla y tenemos una variable configurada para eso llamada text. En WordPress, esto sería una variable global (the_content) que se llama en PHP:

<?php the_content(); ?>

En Automad podemos hacer lo mismo sin PHP:

<p>@{ text }</p>

Es posible manipular la salida de variables pasando el valor a una función usando la tubería (|) operador. El siguiente ejemplo muestra cómo acortar un texto dado a un máximo de 100 caracteres sin cortar palabras:

@{ text | shorten (100) }

Esto sería lo mismo que podría hacer para definir el extracto de una publicación en WordPress usando una función:

/* Limit excerpt to 20 words */
function my_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 )
}

Uno de los beneficios clave de algunas soluciones de CMS, como Jeykll, es que el uso de Markdown para crear contenido del sitio es una función nativa. Automad puede hacer lo mismo. Digamos que queremos convertir texto Markdown a HTML. Es bastante simple (y eficiente) usar el operador de tubería:

@{ text | markdown }

Uso de declaraciones

Las declaraciones son una forma práctica de definir el contenido y mostrarlo de forma condicional. A diferencia de las variables, las declaraciones están envueltas en <@ … @> delimitadores El siguiente ejemplo se puede usar para crear un menú de nivel superior simple usando el nav función:

<@ nav { context: "https://css-tricks.com/", class: "nav" } @>

Supongamos que desea mostrar el contenido de su publicación de forma predeterminada, pero mostrar una alternativa si ese contenido no existe por algún motivo. Ahí es donde podemos usar declaraciones condicionales y estructuras de control:

<# If the post content exists then display... #>
<@ if @{ text } @>
  <p>...</p>

<# Otherwise, display this... #>
<@ else @>
  <p>Sorry, no content here!</p>

<# OK, no more conditions. #>
<@ end @>

¿Quieres crear un bucle? Aquí es donde mostrar una lista de publicaciones o cualquier contenido repetible que coincida con una condición es muy útil. Podemos hacer eso en Automad proporcionando uno o más patrones globales en un foreach círculo.

Por ejemplo, mostremos todas las imágenes JPG y PNG para una publicación recortada en 400x300 con sus subtítulos:

<@ foreach in "*.jpg, *.png" { width: 400, height: 300, crop: true } @>
  <img src="https://css-tricks.com/developing-with-automad/@{:fileResized}" width="@{:widthResized}" height="@{:heightResized}">
  <p>@{:caption}</p>
<@ end @>

¡¿Captaste eso?! Como se muestra en este ejemplo, una característica notable de Automad es la capacidad de incorporar opciones de cambio de tamaño para cada archivo coincidente dentro de la instrucción de bucle. ¡No más funciones complicadas para registrar tamaños que luego deben llamarse en la plantilla!

Vale la pena señalar que foreach los bucles también se pueden usar para iterar sobre objetos. Automad conoce múltiples tipos de objetos. Uno de los objetos más importantes es pagelist debido a su capacidad para mostrar todas las páginas del sitio, como podría querer hacer al crear la navegación. Al iterar un pagelist, el contexto cambia con cada iteración a la página actual en el bucle. De esa forma, es posible usar variables de página dentro del bloque de código del ciclo.

Para configurar el pagelist, podemos usar la función newPagelist así:

<@ newPagelist { context: "https://css-tricks.com/", type: "children" } @>
<ul>
  <@ foreach in pagelist @>
    <li><a href="https://css-tricks.com/developing-with-automad/@{ url }">@{ title }</a></li>
  <@ end @>
</ul>

Un adelanto detrás de escena para ustedes súper geeks 🤓

El intérprete de plantillas de Automad está escrito en PHP puro y procesa las plantillas sobre la marcha. Por lo tanto, no se requiere ningún proceso de compilación adicional. La lista de requisitos del sistema también es bastante corta. Un servidor web (Apache o Nginx) y PHP 5.4+ ya son suficientes para ejecutar un sitio. Las páginas solo se representan cuando el contenido ha cambiado o después de las actualizaciones del sistema.

El motor de almacenamiento en caché multicapa de Automad almacena las páginas renderizadas en archivos separados .html archivos, así como todos los datos rastreados en el sistema de archivos como una especie de objeto de contenido. Ese objeto también se usa para acelerar la búsqueda y el filtrado de páginas.

Debido a ese mecanismo, es posible editar el contenido de un sitio directamente en producción en línea usando el tablero basado en el navegador o editar un sitio localmente e implementarlo a través de Git o rsync simple.

¡Escribamos algo de código!

La mejor manera de familiarizarse con cualquier cosa en la web es simplemente crear sitios web. Estos son algunos ejemplos de cómo comenzaríamos con Automad.

Ejemplo 1: navegación recursiva

La creación de una navegación de árbol de sitio es un buen ejemplo para usar recursividad en plantillas. Conceptualmente, la creación de una navegación recursiva de este tipo se puede dividir en tres pasos:

  1. Definición de un fragmento de código reutilizable para crear una sola rama del árbol del sitio que se llama a sí mismo condicionalmente
  2. Configurar una lista de páginas dinámica que automáticamente solo contiene elementos secundarios de su contexto actual
  3. Definir la página raíz del árbol del sitio (por ejemplo, la página de inicio) y llamar inicialmente al fragmento recursivo

Analicemos esos pasos con mayor detalle…

Definición de un fragmento de código reutilizable

En Automad, los bloques de código se pueden definir para ser reutilizados en un punto posterior usando el snippet palabra clave. Con respecto a este ejemplo, el siguiente fragmento se llamará a sí mismo condicionalmente cuando recorra un pagelist y la página activa de la iteración actual tiene páginas secundarias:

<@ snippet navigation @>  
  <ul class="menu-list">       
    <@ foreach in pagelist @>
      <li>
        <a href="https://css-tricks.com/developing-with-automad/@{ url }">@{ title }</a>
        <# Call snippet recursively. #>
        <@ navigation @>
      </li>
    <@ end @>
  </ul>
<@ end @>
Configuración de una lista de páginas dinámica

El pagelist tiene que estar configurado un children escribe. El contexto (o página principal) siempre cambiará recursivamente dentro del fragmento definido anteriormente de esa manera. El pagelist automáticamente solo contendrá páginas secundarias de la página procesada actualmente.

<@ newPagelist { 
  type: 'children'
} @>
Definición de la página raíz

En el último paso, se debe definir el contexto raíz del árbol de navegación y se debe llamar al fragmento una vez para iniciar la recursividad. El with La declaración se usa aquí para cambiar el contexto a la página de inicio.

<div class="menu">
  <@ with "https://css-tricks.com/" @>
    <@ navigation @>
  <@ end @>
</div>

Una plantilla de tutorial de trabajo completa ya está incluida en Automad.

Ejemplo 2: trabajar con archivos

Dado que las imágenes son muy importantes para la gestión de contenido, trabajar con ellas debería ser lo más fácil e intuitivo posible. El lenguaje de plantillas de Automad proporciona métodos prácticos para el procesamiento básico de imágenes, como cambiar el tamaño y recortar. Al usar una sola imagen o iterar un conjunto de imágenes, las opciones de cambio de tamaño se pueden pasar a un with declaración o foreach círculo. Consulte el tutorial que se incluye con Automad para comenzar rápidamente.

<@ foreach in '*.jpg, *.png' { width: 400, height: 300, crop: true } @>
  <# Code to be used for each image in the filelist. #>
  <img 
  src="https://css-tricks.com/developing-with-automad/@{ :fileResized }" 
  alt="@{ :basename }"
  title="@{ :file }"
  width="@{ :widthResized }"
  height="@{ :heightResized }"
  >
  <p>@{ :caption | markdown }</p>
<@ else @>
  <# Code to be used when the list of images is empty. #>
<@ end @>

En lugar de utilizar un patrón global en el foreach bucle, también es posible utilizar el filelist objeto.

Si observa el código de ejemplo anterior, notará el uso de ciertas variables de tiempo de ejecución para acceder a las propiedades de la imagen dentro de un bloque de código. Mientras que la :file variable representa el archivo original, :fileResized se refiere a la ruta de la versión redimensionada y almacenada en caché. El :caption La variable le permite obtener el texto del título almacenado junto con el archivo.

¿Qué vas a construir?

Simplemente arañamos la superficie de Automad aquí, pero esperamos que todo lo que cubrimos le dé una buena idea de las posibilidades que brinda para la administración de contenido. Si bien no existe un molde único para todos en el mundo de los CMS, es probable que haya escenarios en los que un CMS que se encuentre en algún lugar entre las opciones sólidas y reducidas sea útil.

Recursos adicionales

  • Documentación automática
  • Tutoriales
  • Temas de demostración
(Visited 5 times, 1 visits today)