Hugo y el buscador: Presentando el widget de búsqueda

Como ya te expliqué en este artículo, al retomar este blog quería mejorar la navegación y, para ello, decidí implementar un buscador que permitiera localizar contenido de la manera más eficaz posible. El tema con el que está generado el blog, Mainroad, incluye la posibilidad de renderizar un buscador en la barra lateral con un sencillo ajuste en el archivo de configuración de Hugo, config.toml.

[Params.sidebar]
  # Enable widgets in given order
  widgets = ["image", "search", "categories"]

La caja de búsqueda es sencilla, me gusta el estilo, pero cuando se visualiza el blog en una pantalla más pequeña la barra lateral que la contiene se muestra debajo de los primeros posts. Yo prefiero que el buscador esté siempre visible, desde el inicio, para que de este modo se pueda acceder al contenido rápidamente sin tener que navegar a la parte inferior del blog, así que probé a sacar la caja de búsqueda de la barra lateral y colocarla debajo del título, justo antes del primer artículo. Gracias a que el widget de búsqueda esta escrito en su propio partial, es sencillo probar la caja de búsqueda, en esa ubicación, añadiendo una única línea de código en la plantilla base del blog.

{{partial "widgets/search.html" . }}

Al colocar el buscador en esa posición el aspecto del blog en pantallas pequeñas era bueno, pero no en pantallas de tamaño mayor, por esto decidí condicionar su posición al tamaño de la pantalla. Mainroad ya hace esto con la posición de la barra lateral, la gestiona mediante CSS con una Media query, así que usé esa misma condición, la que lleva la barra lateral a la parte inferior del blog, para ocultar la caja de búsqueda en dicha barra lateral y mostrar, en su lugar, la caja de búsqueda que coloqué bajo el título del blog.

/* Search widget */
@media screen and (min-width: 768px) {
  .primary .widget-search {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .sidebar .widget-search {
    display: none;
  }
}