3. De Bootstrap a Bulma, y sin jQuery: el buscador del sitio

21 de Enero de 2023

Este post es parte de la serie De Bootstrap a Bulma sin jQuery.


El autor del tema que originalmente utilicé (Hugo Resume), Eddie Web, había implementado un buscador en el sitio, con Fuse.js y Mark.js. Es un buscador client-side. El objetivo en este caso era eliminar la dependencia de jQuery. Él fue capaz de redactar una documentación bastante detallada (¡gracias!) de su implementación, también explicada en este gist. En resumen, los pasos a seguir son más o menos los siguientes:


  1. Actualizar el config.toml para que Hugo cree el archivo index en formato JSON.

Desde la versión 0.110.0 el archivo de configuración pasa a llamarse hugo.toml; si bien seguirá funcionando config.toml, si llegasen a existir ambos archivos, se tomará como prioridad a hugo.toml.

[outputs]
  home = ["HTML", "JSON"]
  1. Modificar el archivo search.html en _layouts/_default/ para reemplazar la “versión jQuery” de Fuse.js por la “versión JS vainilla” (JS vainilla = JS puro, por si acaso 😄) y las clases de Bootstrap por sus clases equivalentes en Bulma. De hecho, hice muchos más cambios para que el buscador luzca más.

  2. Crear el archivo search.md en content/ para que responda a la URL /search con el template relacionado (el del punto 2.)

  3. Modificar el archivo index.json, presente en _layouts/_default/.

Como Hugo de por sí construye los índices de todas las páginas, se puede escoger qué aspectos se podrán buscar (categorías, etiquetas, enlaces permanentes, etc.) El resultado es un nuevo índice en formato JSON, en /index.json.

  1. Editar las opciones de Fuse.js para la búsqueda, en search.js, localizado en static/js/. Las opciones pueden verse en su correspondiente documentación.

Enlaces Útiles

Hugo Theme: "Bulma Hugo Resume", basado en  Hugo Resume