Desarrollando un Ghost CMS Theme [Parte 3]

En este post, explico sobre Contextos y Helpers en Ghost CMS para la creación de Themes.

Ivan Robles

26 de oct. de 2023 • 4 min read

En esta entrada les hablare sobre algunas cosillas que tienen que ver con los Themes en Ghost CMS.

Contextos

En el post pasado mencione que lo que iba en entre llaves {{ ejemplo }} eran solo variables, bueno eso no es de todo incorrecto, ademas de acceder a variables o la data, también es posible acceder a los contextos.

En Ghost, cada pagina pertenece a un contexto, el cual determina el template usado, los datos disponibles y su contenido a mostrar o usar.

En su documentación oficial tienen una lista de contextos:

Index
Page
Post
Author
Tag
Error

No voy a ahondar en ellos por ahora, pero probablemente en un post futuro podría explicarlos de manera individual.

Assets

Los temas en Ghost proveen un resize automático de imágenes para poder usar en menor cantidad helpers de handlebars, esto es gracias a los settings en el package.json como lo mencionaba en el post anterior:

"image_sizes": {
  "l": {
    "width": 1200
  },
  "m": {
    "width": 600
  },
  "s": {
    "width": 300
  },
  "xl": {
    "width": 2000
  },
  "xs": {
    "width": 100
  },
  "xxs": {
    "width": 30
  }
},

Una vez definidos, ese size se lo podemos pasar al helper {{img_url}} para mostrar la imagen en un tamaño específico:

<img src="{{img_url feature_image size="s"}}">

Para trabajar con imágenes responsivas las podemos implementar usando srcset:

<img class="post-image"
    srcset="{{img_url feature_image size="s"}} 300w,
            {{img_url feature_image size="m"}} 600w,
            {{img_url feature_image size="l"}} 1000w,
            {{img_url feature_image size="xl"}} 2000w"
    sizes="(max-width: 1000px) 400px, 700px"
    src="{{img_url feature_image size="m"}}"
    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>

Con Ghost también es posible hacer conversión de imágenes a formatos mas ligeros, como por ejemplo webp , lo único que hay que hacer es usar el parámetro format:

{{img_url feature_image size="s" format="webp"}}

Helpers

Agregan funcionalidad a lo que ya existe en Handlebars, para combinarse con Ghost. Y los tenemos en tres tipos.

Helpers funcionales

Se usan para trabajar con objetos que contienen datos como en el caso de post, tag y author:

foreach - Para iterar sobre listas.
get - para hacer queries.
has - para comprobar si existe un tag por ejemplo.
if - el condicional que todos manejamos.
is - verifica el contexto de la ruta actual.
match - compara la igualdad entre dos valores.
unless - lo opuesto a un if.

Helpers de data

Sirven para acceder a los datos del sitio. Esta es la lista de los mas usados, pero existen mas:

@custom - Para acceder a los custom settings en el package.json.
@page - Para obtener la info de una pagina, como el titulo por ejemplo.
@site - Objeto global.
authors - Info de los autores.
content - Hay distintos tipos de contenido, mas adelante escribiré sobre ello.
date - Para las fechas.
excerpt - Es el resumen para usarse en twitter cards, facebook cards y google.
img_url - En serio necesita explicación?.
link - Otro facil de entender.
navigation - Los menus de navegacion creados desde el admin.
post - Los datos de un post.
tags - Las etiquedas creadas a traves de los posts de blog.
title - Neta?.
url - Otro facilito.

Helpers utilitarios

Son usados para realizar tareas opcionales. Esta es la lista:

asset - Genera URLs relativas que son cacheables en varios tipos de assets.
block - Se utiliza junto con {{contentFor}} para pasar data a traves de la jerarquía de templates.
body_class - Genera clases dinámicas CSS para la etiqueta <body> .
concat - Concatena consas (si así como lo digo).
encode - Codifica texto para usarlo de forma segura en una URL.
ghost_head / ghost_foot - En admin puedes agregar código que va en el header o en el footer, así se integra a los templates.
link_class - Agrega clases dinámicas dependiendo de la pagina actual.
log - Envia console.logs.
pagination - Genera HTML para links de paginación.
partials - Para especificar que se va a utilizar algún partial.
plural - Genera texto dependiendo de lo que metas lo que sale.
post_class - Genera clses para el contenedor de posts.
prev_post / next_post - En el context de post, regresa las URLs del post previo y siguiente.
reading_time - Un estimado de tiempo de lectura de un post.
search - Genera un icono y un boton prediseñados para hacer una busqueda.
translate - Utiliza i18n para generar texto en diferentes lenguajes.

En el siguiente ejemplo podemos ver, donde utilizamos el contexto y los helpers functionales, de datos y utilitarios para mostrar la pagina de un author con su información y la lista de posts creados por el.

{{#author}} 👈 Contexto
  <header class="my-0 mx-auto pt-[8vmin] pb-[4vmin] text-center">
    {{#if profile_image}} 👈 Helper funcional
      <img class="" src="{{profile_image}}" alt="{{name}}" />
    {{/if}}
  <h1 class="text-2xl md:text-5xl font-bold">{{name}}</h1> 👈 Helper de data
    {{#if bio}}
      <p class="text-base md:text-2xl my-4 px-[6vmin] opacity-50">{{bio}}</p>
    {{/if}}
  <div class="text-2xl">
    <div class="author-links">
      {{#if website}}
        <a href="{{website}}" target="_blank" rel="noopener">Website</a>
      {{/if}}
      {{#if twitter}}
        <a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a>
      {{/if}}
      {{#if facebook}}
        <a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a>
      {{/if}}
    </div>
  </div>
  {{#if cover_image}}
    <img class="mt-[4vmin]" src="{{cover_image}}" alt="{{name}}" />
  {{/if}}
  </header>
{{/author}}

<div class="post-feed">
  {{#foreach posts}}
    {{> "card"}} 👈 Helper utilitario (partial)
  {{/foreach}}
</div>

Y hasta aquí lo dejamos por el día de hoy, sin embargo no hemos terminado todavía falta de explicar mas cosillas sobre los Ghost CMS Themes.

Nos leemos en el siguiente post!!