Crea Temas de Blogger con Hamlet

Entorno de desarrollo para desarrollar plantillas de Blogger utilizando Handlebars.

Desarrollar un tema de Blogger es una tarea complicada, ya que la sintaxis es muy compleja y difícil de leer y mantener. Anteriormente había creado un entorno con pugjs, pero no tenía muchas características, por lo que decidí archivarlo y crear este nuevo entorno usando Handlebars, de allí el nombre Hamlet.

Características

Hamlet te permite usar la misma sintaxis de Blogger, por lo que puedes usar las etiquetas que usas en tu tema actual. Ademas incorpora algunas características que te ayudarán en desarrollo como:

• Handlebars como motor de plantilla.
• Sass para compilar CSS.
• Stylelint para escribir mejor código CSS.
• Autoprefixer para compatibilidad con los navegadores.
• Clean-css para minimizar archivos CSS.
• Babel y Rollup para Compilar JavaScript.
• ESLint para solucionar errores en el código JavaScript.
• Terser para minimizar el código JavaScript.
• Jest que ejecuta test para verificar si tu plantilla es válida en Blogger sin instalarla.
• Browserslist para especificar navegadores y versiones compatibles para el código generado.

Por otro lado, el tema que he creado a modo de ejemplo, también es el punto de partida perfecto para desarrolladores, ya que es sencillo, sigue buenas prácticas, esta comentado con instrucciones y es fácil de entender. Ademas como plantilla tiene las siguientes características:

• Sin dependencias, sin JavaScript, solo HTML y CSS.
• Optimizada para SEO moderno.
• Optimizado para AdSense.
• Diseño responsive.
• Soporta múltiples lenguajes gracias a Blogger.
• Súper optimizada con un tamaño de código reducido.
• Compatible con Core Web Vitals.
• Sistema de comentarios con múltiples niveles.
• Widgets formateados.
• Buenas practicas para la creación de temas de Blogger.

Empezando

Primero necesitas instalar Node.js (LTS) y Git en tu computadora. Luego clona el repositorio de GitHub y ejecuta el comando npm install para instalar las dependencias.

npm install -D

Desarrollo

Para iniciar el servidor de desarrollo ejecuta el comando npm run dev, de esta forma el entorno se encargará de compilar los archivos automáticamente cada vez que realices un cambio.

npm run dev

Si solo quieres compilar los archivos una vez, ejecuta el comando npm run compile:

npm run compile

Para ejecutar los test, ejecuta el comando npm run test, esto verificará si tu plantilla es válida en Blogger sin instalarla. Tambien te puede ayudar a detectar errores en tu código.

npm run test

Estructura

Aunque el entorno cuenta con un tema de ejemplo, puedes crear tu propio tema desde cero. La estructura que he usado no es obligatoria, pero es la que recomiendo y uso en mis temas de Blogger y me ha funcionado muy bien:

├── src
│   ├── js
│   │   ├── (archivos y carpetas)
│   │   └── main.js
│   ├── scss
│   │   ├── (archivos y carpetas)
│   │   └── main.scss
│   └── views
│       ├── (archivos y carpetas)
│       └── theme.hbs
└── data.json

Compilar JavaScript

Para compilar JavaScript, el entorno busca archivos .js sin el prefijo _ (guion bajo) por ejemplo main.js. Si deseas crear módulos, crea archivos con el prefijo _ e impórtalos en tu archivo principal o en otros módulos. Por ejemplo:

├── src
│   ├── js
│   │   ├── _module1.js
│   │   ├── _module2.js
│   │   └── main.js

Cada vez que hagas un cambio en tus archivos JavaScript, se compilará automáticamente y generará un archivo con formato y otro minificado en la carpeta dist/js, el nombre del archivo sera el mismo que el principal.

Compilar Sass

Para compilar Sass, el entorno busca archivos .scss o .sass sin el prefijo _ (guion bajo), por ejemplo main.scss. Si deseas crear módulos, crea archivos con el prefijo _ e impórtalos en tu archivo principal o en otros módulos. Por ejemplo:

├── src
│   ├── scss
│   │   ├── _module1.scss
│   │   ├── _module2.scss
│   │   └── main.scss

Todo se compilará automáticamente tras cada cambio y generará un archivo con formato y otro minificado en la carpeta dist/css, el nombre del archivo sera el mismo que el procesado.

Compilar Handlebars

Para compilar Handlebars, el entorno busca archivos .hbs sin el prefijo _ (guion bajo), por ejemplo theme.hbs. Si deseas crear módulos, crea archivos con el prefijo _ e impórtalos en tu archivo principal o en otros módulos. Por ejemplo:

├── src
│   ├── views
│   │   ├── _module1.hbs
│   │   ├── _module2.hbs
│   │   └── theme.hbs

Cada vez que guardes los cambios, se compilara y el resultado lo encontrarás en la carpeta dist. A diferencia de los casos anteriores, este archivo no tiene una version comprimida, además no puedes repetir los nombres de los módulos, ya que serán sobrescritos.

Datos

Para usar datos en tu plantilla, debes editar el archivo data.json en el directorio raíz del proyecto. Este archivo contiene los datos que se utilizarán en la plantilla y otros importantes. Puedes agregar o editar los datos que quieras, por ejemplo:

{
  "title": "Hamlet",
  "author": "ZKreations",
  "social": {
    "twitter": "https://twitter.com/zkreations",
    "facebook": "https://facebook.com/zkreations",

<title>{{title}}</title>
<meta name="author" content="{{author}}">
<meta name="twitter:creator" content="{{social.twitter}}">

Módulos

Los módulos son archivos que contienen código que se puede reutilizar en otros archivos. Por ejemplo, puedes crear un módulo que contenga el código de un widget e importarlo en el archivo theme.hbs. Para crear un módulo, crea un archivo con el prefijo _ (guion bajo) y luego impórtalo en el archivo donde quieres usarlo. Por ejemplo:

├── src
│ ├── views
│ │ ├── _header.hbs
│ │ └── theme.hbs

<h1>Demo</h2>
<div class="template">
  {{> header}}
</dv>

Puedes crear cualquier cantidad de módulos e importarlos en cualquier archivo, pero el nombre debe ser único, ya que si creas dos módulos con el mismo nombre, el segundo sobrescribirá el primero.

Helpers

El entorno cuenta con algunos helpers que puedes usar en tus archivos .hbs, que te ayudarán en el desarrollo de tu plantilla. A continuación se muestran los helpers disponibles.

asset

El helper asset se utiliza para importar archivos. Por ejemplo, si quieres importar el archivo main.css en la carpeta dist/css, debes usar el siguiente código:

<style>
  {{asset "dist/css/main.css"}}
</style>

Para importar un archivo dentro de un módulo de Node, utiliza ~ (tilde), esto es equivalente a node_modules. Por ejemplo, si quieres importar el archivo main.js en el módulo tooltips:

<script>
  {{asset "~tooltips/dist/js/main.js"}}
</script>

variable

Para crear una variable de Blogger rápidamente y de forma mas limpia, puedes usar el helper variable. Por ejemplo, si quieres crear una variable llamada “ejemplo”, debes usar el siguiente código:

{{variable "ejemplo"}}

Esto generará el siguiente código:

<Variable name="ejemplo" description="ejemplo" type="string" value=""/>

Todos los atributos son opcionales, pero puedes agregarlos si lo deseas. Por ejemplo, si quieres agregar la descripción y el tipo, debes usar el siguiente código:

{{variable "ejemplo" description="Ejemplo" type="color"}}

Para ver todos los atributos disponibles, consulta la documentación de Blogger Code.

Otros recursos

Hasta este punto, hemos cubierto los conceptos básicos de este entorno de desarrollo, sin embargo, también te recomiendo que visites los siguientes recursos que te ayudarán a desarrollar tu plantilla:

• Handlebars - Documentación oficial de Handlebars.
• Blogger Code - Documentación del código de Blogger.
• Blogger Syntax - Complemento de Blogger para Visual Studio Code.
• Parámetros de imágenes - Parámetros de imágenes de Blogger.
• Meteor icons - Los iconos SVG mas optimizados de internet.

Crea tu hermosa plantilla

Si has utilizado este proyecto para desarrollar tu plantilla, por favor, califica el entorno en Github y añade a tu repositorio las siguientes etiquetas:

• blogger-hamlet
• blogger-handlebars
• blogger-hbs

Conclusión

Este entorno de desarrollo es una herramienta que te ayudará a desarrollar tus plantillas de Blogger de forma rápida y sencilla. Si tienes alguna duda o sugerencia, puedes dejar un comentario.