Este blog esta construido con Hugo, no todos los temas para Hugo incluyen una función de búsqueda para el propio blog, si tu tema preferido no incluye la función de buscar, en esta publicación te explicaré como construir el tuyo.
En la documentación de Hugo, podemos encontrar varias herramientas, libres y de pago, en mi caso me he decidido por utilizar el método explicado por https://blog.wains.be/2020/2020-06-02-hugo-search-lunr/
Fichero Configuración
Debemos de editar el fichero de configuración de Hugo config.toml y en la sección [outputs] añadimos:
[outputs]
home: ["HTML", "RSS", "JSON"]
page: ["HTML", "RSS"]
Plantilla
También debemos crear una plantilla JSON en ./layouts/_default/index.json con el código:
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "content" .Plain "href" .Permalink "date" ( .Date.Format "Jan 2, 2006" )) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}
Tanto con la configuración como con la plantilla JSON, cuando construyamos nuestro sitio con Hugo se generará un fichero index.json en la raíz.
ls -lh /home/carlos/Descargas/prueba/public/index.*
-rw-r--r--. 1 carlos carlos 7,2K may 12 19:42 /home/carlos/Descargas/prueba/public/index.html
-rw-r--r--. 1 carlos carlos 1,5M may 12 19:44 /home/carlos/Descargas/prueba/public/index.json
-rw-r--r--. 1 carlos carlos 236K may 12 19:42 /home/carlos/Descargas/prueba/public/index.xml
Podemos comprobar si el fichero index.json contiene información apuntando directamente al fichero https://direccion/index.json donde direccion es la dirección ip o nombre de dominio de tu sitio web.
Página de búsqueda
Creamos la página de búsqueda en la ubicación content/search.md, con el código:
---
title: Buscar
slug: "crea-un-buscador-para-tu-sitio-web-hugo"
---
Bibliotecas javascript
Descargamos las bibliotecas javascript:
Y las guardamos en la carpeta ./static/js
ls -lh /home/carlos/Descargas/prueba/static/js/*
-rw-r--r--. 1 carlos carlos 83K may 9 22:51 /home/carlos/Descargas/prueba/static/js/jquery-2.1.3.min.js
-rw-r--r--. 1 carlos carlos 98K may 9 22:51 /home/carlos/Descargas/prueba/static/js/lunr.js
Barra de menú
Crea en el menú la entrada para la búsqueda
[[menu.main]]
name: "Buscar"
pageRef: "/search"
weight: 40
Resultado
Si ahora construimos nuestro sitio tendremos disponible nuestra página de búsqueda. A medida que vamos escribiendo en el campo de búsqueda se irán mostrando los resultados (lunr recorre el fichero json buscando el valor introducido)
Espero que te haya gustado, pasa un gran día 🐧