Handlebars introducción

Este artículo es una introducción a los elementos de sintaxis de Handlebars más comunes que son necesarios para crear un tema en Publii.

¿Cómo se renderizan los archivos Handlebars?

Los manejadores compilan archivos *.hbs y usan el contexto para representar variables dentro del archivo de plantilla.

Un contexto es un objeto que contiene datos relacionados con una vista actual.

Funciona de la siguiente manera:

Archivo *.hbs + contexto =  salida final

Por ejemplo, si el contexto es un objeto como:

{
    "message": "Hello World!"
}

Y el archivo *.hbs tiene la siguiente estructura:

<div>{{message}}</div>

Luego recibiremos como salida el siguiente código:

<div>Hello World!</div>

Bloques de código y contexto

El contexto puede ser un objeto con valores anidados, es decir: 

{
  "message": {
    "text1": "Lorem",
    "text2": "Ipsum"
  }
}

En este caso, tenemos dos formas de acceder a los datos del objeto:

1) Acceder directamente al campo específico:

<div>{{message.text1}}</div> 

2) Acceda al campo específico utilizando bloques de código:

{{#message}}
   <div>{{text1}}</div>
{{/message}}

Los bloques de código suelen ser más útiles, ya que crean una estructura natural del contenido de los archivos *.hbs. Pero a veces necesitará acceder en el bloque a un campo que se encuentra uno o más niveles por encima del nivel actual de anidación.

En este caso, debe utilizar el prefijo ../  . En el ejemplo, si tenemos el siguiente contexto:

{
  config: {
    option1: "value1"
  },
  message: {
    text1: "lorem"
  }
} 

Si vamos a utilizar el método de bloques de código para acceder a las variables de campos anidados y necesitamos acceder al campo config.option1, tendremos que utilizar la siguiente sintaxis:

{{#message}}
   <div>{{text1}}</div>
   <div>{{../config.option1}}</div>
{{/message}} 

Bloques de código condicional

Los manillares tienen dos tipos de bloques: bloques en línea y bloques condicionales.

Los bloques condicionales pueden tener dos salidas según la condición: si es verdadera o falsa.

El ejemplo más simple de bloque de código condicional es el bloque if :

{{#if field}}
    Text displayed if field in context is true
{{else}}
    Text displayed if field in context is false
{{/if}

Si desea lograr un comportamiento inverso, puede utilizar un bloque condicional a menos que :

{{#unless field}}
    Text displayed if field in context is false
{{else}}
    Text displayed if field in context is true
{{/unless} 

Por supuesto, puedes usar muchos más bloques condicionales. Lo principal que debes recordar es que debes abrirlo con la {{#NAME CONDITION}}sintaxis y cerrarlo con {{/NAME}}el fragmento.

Bucles

Puedes iterar matrices y objetos con el  asistente #each

. Por lo tanto, si tienes una matriz de matrices para cada persona del proyecto, puedes usar la siguiente sintaxis:

{{#each persons}}
    {{name}} - {{email}}
{{/each}}

 Se puede utilizar en el siguiente contexto:

{
   persons: [
     {
       name: "John",
       email: "john@doe.com"
     },
     {
       name: "Adam",
       email: "adam@adam-and-eve.com"
     }
  ] 
}

El ayudante #each generará una lista de todas las personas en una lista.

Comentarios

Puedes incluir comentarios dentro de tus archivos *.hbs que no se mostrarán en la salida HTML final. La sintaxis de los comentarios en Handlebars es muy sencilla:

{{! Your comment here !}}

Elementos personalizados

Para los manillares, puedes definir dos elementos personalizados:

• ayudantes personalizados,
• Parciales personalizados

Los asistentes personalizados se pueden utilizar para operaciones simples y bloques condicionales. Por lo general, se utilizan para hacer cosas que son imposibles con los asistentes disponibles. 

Puede utilizar ayudantes personalizados para:

• Filtrar contenido
• Agregue funciones adicionales (como imágenes borrosas para carga diferida)
• Generar salida HTML parametrizada usando una sola línea de código

Los parciales se pueden utilizar para las partes comunes de los temas. Se utilizan para reutilizar el código base. Gracias a los parciales, puedes realizar cambios en tu tema en un solo lugar. Por eso, recomendamos encarecidamente utilizar parciales para las partes reutilizadas del tema: esto facilitará mucho el mantenimiento del tema.

Por ejemplo, los parciales de temas integrados de Publii se pueden utilizar para:

• Encabezado de página,
• Pie de página,
• Bloque de compartir en redes sociales,
• Paginación,
• Menú

Variables globales

Algunos elementos son comunes a todas las vistas y se utilizan junto con el contexto normal de la vista.

Se denominan variables globales y se anteponen con el carácter @ . Puede encontrar una lista completa de estas variables en la página de variables globales .