Crea Temas de Blogger con Hamlet

thumbnail

Entorno de desarrollo para desarrollar plantillas de Blogger utilizando Handlebars.

Crear temas fácilmente Blogger blogspot

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
  

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
  

También puedes iniciar todo y compilar en modo producción, esencialmente es lo mismo, pero cambiarán algunas cosas que solo son visibles en modo desarrollo:

    npm run prod
  

Si solo quieres compilar los archivos una vez, ejecuta el comando npm run compile, toma en cuenta que el resultado siempre sera el mismo que el modo producción:

    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

En cuanto a la estructura de los archivos y carpetas, 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 uso en mis temas de Blogger:

    ├── 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
import '_module1'
import '_module2'

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
@import "module1";
@import "module2";

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
{{> module1}}
{{> module2}}

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"
  }
}
        <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.

Legibilidad

Puedes utilizar espacios y saltos de linea en los atributos de todas las etiquetas b: con el objetivo de mejorar la claridad del código. Al compilar los espacios serán normalizados:

<b:include data='{
    name: "John Doe",
    birthday: {
      day: 1,
      month: 1,
      year: 1990
    }
  }' name='person'>
<b:include data='{ name: "John Doe", birthday: { day: 1, month: 1, year: 1990 } }' name='person'>

Datos adicionales

Existen datos adicionales que se agregan al archivo data.json durante la compilación. Estos datos contienen más información sobre como se está construyendo el template.

devMode

La variable devMode es un booleano que indica si se está compilando en modo desarrollo o producción. Esto es útil para mostrar o no ciertos elementos en el código. Por ejemplo:

{{#if devMode}}
  <script>console.log("Hello world!")</script>
{{/if}}

skinVars

Esta variable contiene todas las variables de Blogger declaradas dentro de etiquetas Group. Está informacion se actualiza según remuevas o agregues variables:

skinVars: {
  'body-background-color': '$(body.background.color)',
  'bg-body': '$(bg.body)',
}
<Group description="Backgrounds">
  <Variable name="body.background.color" description="Header color" type="color" value="#222" default="#222"/>
  <Variable name="bg.body" description="Body background color" type="color" value="#fff" default="#fff"/>
</Group>

Luego, puedes iterar sobre esta variable usando la sintaxis de Handlebars para construir finalmente las variables CSS que se mantendran actualizadas durante la compilación. Por ejemplo:

:root {
{{#each skinVars}}
  --{{@key}}: {{this}};
{{/each}}
}
:root {
  --body-background-color: $(body.background.color);
  --bg-body: $(bg.body);
}

El nombre que se asigna a la variable CSS es el mismo que usaste para la variable de Blogger, reemplazando los puntos por guiones si existen. De manera exclusiva, si la variable de Blogger es del tipo "font", obtendrás dos variables CSS, una que contiene el valor completo y otra que solo contendrá el nombre de la fuente:

skinVars: {
  'font-title': '$(font.title)',
  'font-title-family': '$(font.title.family)',
}

El uso de estos datos a mantener el código CSS más limpio y separado de las directivas de Blogger. También ahorrarás tiempo al no tener que escribir las variables CSS manualmente.

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:

{{asset "dist/css/main.css"}}

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:

    {{asset "~/tooltips/dist/js/main.js"}}
  

Además, dependiendo de si has ejecutado npm run dev o npm run prod en la consola, puedes decidir si cargar la version de los archivos minificados o no durante el compilado. Para ello incluye el archivo sin la extensión, por ejemplo:

{{asset "dist/css/main"}}

Nota: Recuerda usar las etiquetas script y style que correspondan para interpretar correctamente el código importado.

variable

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

{{variable "ejemplo"}}
<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.

startsWith

El helper startsWith se usa para comprobar si una cadena empieza con un determinado valor, puede ser muy útil para ejecutar comprobaciones y con base en ello, crear condiciones más precisas. Por ejemplo:

      {{#if (startsWith "Hamlet Blog" "Hamlet")}}
  ...
{{/if}}
    
El resultado será verdadero ya que el texto "Hamlet Blog" si empieza por "Hamlet".

endsWith

El helper endsWith se usa para comprobar si una cadena termina con un cierto valor. Por ejemplo:

      {{#if (endsWith "Hamlet Blog" "Hamlet")}}
  ...
{{/if}}
    
El resultado será falso ya que "Hamlet" no es el texto que se encuentra al final.

includes

El helper includes se usa para comprobar si una cadena contiene un valor especificado. Por ejemplo:

      {{#if (includes "Hamlet Blog" "Hamlet")}}
  ...
{{/if}}
    
El resultado será verdadero ya que "Hamlet" si se encuentra en el texto "Hamlet Blog".

replace

El helper replace se usa para reemplazar una cadena con otra. El primer parámetro debe ser el texto original, el segundo lo que se debe buscar y el tercer parámetros el texto con el cual será reemplazado finalmente:

      {{replace "Hamlet Blog" "Hamlet" "Macbeth"}}
  
El resultado será: "Macbeth Blog"

not

Este helper se usa para negar un valor boleano, por ejemplo, si el boleano resuelve como verdadero, tras negarlo con este helper su valor pasa a ser falso:

      {{#if (not title)}}
  ...
{{/if}}
  
Si el título no está definido (false) entonces esta condición será verdadera (true)

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:

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.