Prepárate para Ghost 0.8.0

Antes de empezar a leer este artículo, doy por hecho que tu ya tienes conocimientos acerca de Ghost y sabes como funciona en cuestión de los temas.

¿No sabes nada acerca de Ghost ? 😱 😨 😰

Esta no es la primera vez que escribo sobre el tema, así que te invito a que veas mis otros artículos para que te introduzcas poco a poco, también te recomiendo leer: cómo crear un blog desde cero usando ghost en DigitalOcean por Carlos Azaustre.

Ghost 0.8.0

Hace unos días Hannah Wolfe (CTO & co-founder de Ghost) público un artículo acerca de los cambios que se vienen para Ghost 0.8.0, específicamente hablando sobre los temas, es decir, el uso de handlebars y la librería express-hbs.

Hay tres cambios importantes que debemos tener en cuenta y esos son:

  1. Todos los archivos parciales deben de usar la extension .hbs.
  2. Los helpers de handlebars que van como atributos, deben de estar citados.
  3. Ahora podemos usar paths ../ con Handlebars de forma natural.

Archivos parciales requieren la extension .hbs

Hasta ahora Ghost solo soporta los archivos .hbs para la creación de temas (incluyendo los parciales), sin embargo, a veces los editores crean copias de seguridad con extensiones como loop.hbs.bk o loop.hbs.swp, esto provocando que se carguen estos archivos en lugar de los correctos.

Problemas

Cualquier parcial que tenga una extension incorrecta no se va a tomar en cuenta después de la actualización a 0.8.0, esto incluyendo los archivos previamente creados de forma incorrecta.

Solución

Hay que comprobar la carpeta /partials/ que se encuentra dentro de nuestro tema, para ver si no tenemos archivos con otra extension que no sea .hbs.

Los helpers deben de estar citados

En la versión 0.8.0 también se va a actualizar handlebars (v4.0.5), la cual agrega HTML escapes en el símbolo =, esto para evitar ataques XSS. Con este nuevo escape es aún más importante utilizar siempre comillas en los helpers de handlebars.

<div class="{{post_class}}">

Problemas

Con este nuevo cambio se van a provocar problemas en la representación de valores dentro de nuestros atributos.

Supongamos que tenemos un título " Hola => Hello ".

<a href={{url}} title={{title}}>Click</a>

La representación de dicho título será de la siguiente forma:

<a href="http://..." title="Hola" =&gt;="" hello="">Click</a>

La URL funciona perfecto, pero el título no se va a mostrar como queremos, a pesar de este error, NO SE VA A DETENER la carga de la página, por lo cual hay que tener mucho cuidado.

Solución

La solución es bastante fácil, solo hay que buscar en nuestro tema, los helpers de handlebars que no están citados.

title={{title}}

Una ves localizados se recomienda añadir comillas dobles como normalmente se hace en HTML.

title="{{title}}"

Paths con handlebars de forma natural

Con los paths de forma natural me refiero a que antes con handlebars el uso de ../ ("que significa retroceder una carpeta"), no siempre funcionaba y teníamos que usar ../../.

Esto se ha corregido en Handlebars v4 y ahora podemos utilizar dichos paths como se hacen normalmente.

{{../pagination.total}}

Problemas

En cualquier lugar donde haya doble ../ se va a marcar un error o que no hay datos.

Solución

Solo hay que comprobar las plantillas de nuestros temas en donde estemos usando doble ../:

{{../../pagination.total}}

y sustituirlos por solo uno (de forma natural):

{{../pagination.total}}

Esta nueva versión sigue en desarrollo, pero es importante saber estos cambios que nos trae, para así poder actualizar nuestros temas y no llegar a tener problemas.

También hay que agradecer al equipo de Ghost que este tipo de cosas no suelen suceder muy a menudo, haciendo que su aprendizaje no este en constante cambio.

Se parte de mi newsletter

Compartiré contigo las últimas novedades del sitio y otros recursos sobre desarrollo web que no te puedes perder.