El complemento de búsqueda estática Publii

Habilitar la sección de Búsqueda

Todos los temas oficiales de Publii tienen un área de búsqueda integrada en el tema, que deberá habilitarse para que el complemento pueda funcionar. Para habilitar la sección de búsqueda:

1. En el menú principal de Publii, en la barra lateral izquierda, haga clic en la opción Tema  para abrir la pantalla de configuración.
2. En la segunda sección de esta pantalla, Configuración personalizada , haga clic en la pestaña Buscar en la lista de opciones debajo del título de configuración personalizada para abrir las opciones de búsqueda.
3. Haga clic en el botón de cambio junto a la opción Buscar para habilitar la barra de búsqueda.
4. El área ahora está habilitada en tu tema y puedes continuar habilitando y configurando el complemento de Búsqueda estática.

Cómo agregar compatibilidad con el complemento de búsqueda estática a su tema (para temas antiguos o personalizados)

Para mostrar un cuadro de búsqueda en su sitio, simplemente agregue el siguiente fragmento de código donde desee que aparezca. Esto generará un campo de búsqueda y un botón que los visitantes pueden usar para buscar en su sitio lo que estén buscando.

{{{@customSearchInput}}}

También necesitamos modificar el archivo config.json (solo si su tema no admite los complementos de búsqueda) actualizando las secciones ' renderer ' y ' supportedFeatures ' con los siguientes indicadores:

"renderer": {    
     "createSearchPage": true,
     "createContentStructure": true
 },
 "supportedFeatures": {
     "searchPage": true,
     "customSearch": true
 },

Habilitar el complemento

Para activar el complemento, abra la sección Herramientas y complementos de la aplicación Publii a través del menú de la izquierda para ver una lista de los complementos instalados. Haga clic en el botón de cambio en la parte inferior izquierda del mosaico de Búsqueda estática en esta lista para habilitar el complemento.

Una vez que se hayan habilitado el complemento y el área de búsqueda en el tema, la función de búsqueda estará lista para usarse en su sitio, pero como la búsqueda estática incluye una serie de configuraciones para ajustar la funcionalidad de búsqueda, es una buena idea abrir la configuración del complemento y asegurarse de que todo esté configurado para satisfacer sus necesidades.

Para abrir la configuración del complemento, haga clic en el mosaico de búsqueda estática una vez más, en cualquier lugar excepto en el botón del selector, y se abrirá la pantalla de configuración. Tenga en cuenta que esta pantalla no estará disponible si el complemento no se habilita primero.

Opciones de búsqueda estática

El complemento de búsqueda estática ofrece varias opciones que permiten a los usuarios especificar exactamente cómo debe funcionar la función de búsqueda en su sitio. Si lo prefiere, las opciones predeterminadas proporcionarán una experiencia de búsqueda fluida, por lo que modificar estas configuraciones es completamente opcional. Las configuraciones disponibles son las siguientes:

Configuración de búsqueda

• Abrir una ventana emergente de búsqueda al hacer clic en la entrada de búsqueda : cuando esta opción está habilitada, cuando el visitante hace clic en la entrada de búsqueda, se abrirá inmediatamente una ventana emergente de búsqueda, que generalmente solo se mostrará una vez que se ejecute una búsqueda.
• Abrir una ventana emergente de búsqueda mediante el selector CSS : cuando esta opción está habilitada, cuando el visitante hace clic en cualquier elemento, por ejemplo, un icono de vidrio o un enlace, se abrirá inmediatamente la ventana emergente de búsqueda. Esta opción requiere un selector CSS en el campo Selector CSS .
• Selector CSS : agregue aquí cualquier selector CSS válido para seleccionar un elemento HTML, de modo que la ventana emergente de búsqueda se muestre cuando haga clic en ese elemento. Por ejemplo, si desea que se muestre una ventana emergente cuando haga clic en un botón, agregue una clase CSS llamada, por ejemplo, " search-popup" a ese botón, por ejemplo <button class="search-popup"> Open search popup </button>.
• Botón Enviar : si esta opción está habilitada, se mostrará un botón Enviar en el cuadro de búsqueda; los visitantes pueden hacer clic en este botón para iniciar la búsqueda o presionar "Entrar" normalmente.
• Recuento mínimo de caracteres para activar la búsqueda : esta opción establece la cantidad mínima de caracteres que se deben ingresar en la entrada de búsqueda antes de que se muestren los resultados.
• Número máximo de resultados de búsqueda : establece el número máximo de resultados de búsqueda que se pueden mostrar a la vez cuando se ejecuta una búsqueda, y los más relevantes aparecen primero.
• Mostrar descripción en los resultados como : elija si desea mostrar información adicional con cada elemento listado en los resultados de búsqueda; las opciones disponibles son:
  • Ninguno : los resultados mostrarán solo el título de la publicación/página, sin ninguna información adicional.
  • Extracto : los resultados mostrarán un extracto del contenido del artículo; la longitud del extracto depende de la configuración de Longitud del extracto en la sección Configuración del tema > Configuración básica de la aplicación Publii, o donde sea que se encuentre el texto "leer más" en un artículo si se usa un extracto personalizado.
  • Meta descripción : los resultados mostrarán una descripción tomada de las meta descripciones de las publicaciones.
• Marcador de posición de entrada de búsqueda : el texto ingresado en este campo se mostrará como un marcador de posición en la entrada de búsqueda.
• Etiqueta del botón de búsqueda : el texto ingresado en este campo se mostrará como el nombre del botón de búsqueda.
• Marcador de posición de entrada de búsqueda emergente : el texto ingresado en este campo se mostrará de manera predeterminada en la entrada de búsqueda emergente cuando se abra.
• Estado de búsqueda vacío : el texto ingresado en este campo se mostrará en el área de resultados de la pantalla cuando el visitante no haya ingresado caracteres en la entrada de búsqueda.
• Texto que se muestra cuando la frase es demasiado corta : el texto en este campo se mostrará cuando el visitante no haya ingresado la cantidad requerida de caracteres para la búsqueda, como se define en la opción Recuento mínimo de caracteres .
• Estado sin resultados : el texto de este campo se mostrará en el área de resultados cuando se haya ejecutado una búsqueda, pero no haya resultados coincidentes para el término de búsqueda ingresado.
• Botón Cerrar : establece el texto del botón que cierra la ventana emergente de búsqueda (visible solo en la vista móvil)

Configuración del índice

La sección de configuración de índice contiene las opciones más importantes para el complemento de búsqueda estática. Las distintas configuraciones de esta sección indican al complemento qué contenido de su sitio debe indexarse; es decir, qué partes del contenido de su sitio, como títulos, extractos, encabezados, etc., debe recopilar y almacenar el complemento para que los visitantes de su sitio puedan buscarlas.

Nota: La mayoría de los usuarios pueden dejar habilitadas todas las opciones de esta sección para permitir una búsqueda más amplia y precisa para los visitantes de su sitio. Sin embargo, si el sitio indexado tiene una gran cantidad de publicaciones, el archivo de índice que se crea puede ser relativamente grande; en tales casos, puede ser útil limitar la indexación a elementos específicos para reducir el peso total del archivo. Además, asegúrese de que GZIP/Brotli esté activado en su servidor; esto reducirá el tamaño del índice de búsqueda.

Las opciones en esta sección son:

• Habilitar la indexación de publicaciones : si esta opción está habilitada, los elementos de publicación seleccionados, como el título de la publicación, el extracto y los encabezados, se indexarán para la búsqueda.
• Excluir publicaciones ocultas : si esta opción está habilitada, las publicaciones marcadas como ocultas no serán indexadas por el complemento de búsqueda ni se mostrarán en los resultados de búsqueda.
• Título de la publicación : si está habilitado, los títulos de las publicaciones se indexarán y se utilizarán en las búsquedas.
• Extracto : si se habilita esta opción, se indexarán extractos de las publicaciones y se usarán en las búsquedas. La cantidad de contenido que se indexa depende de la configuración de Longitud del extracto en la sección Configuración del sitio > Configuración básica de la aplicación Publii, o de dónde se haya agregado la opción Leer más si se usa un extracto personalizado.
• Encabezados (H1-H6) : si esta opción está habilitada, los encabezados dentro del contenido de su publicación se indexarán y se usarán en las búsquedas.
• Nombre del autor : si está habilitado, el nombre del autor en las publicaciones se indexará y se usará en las búsquedas; es útil si desea permitir que los visitantes busquen por nombre de autor sin ir a la página específica del autor.
• Meta descripción : si está habilitada, el contenido de la meta descripción de cada publicación se indexará y se utilizará en las búsquedas.
  
  
• Habilitar indexación de etiquetas : si está habilitado, los elementos de etiqueta seleccionados, como el nombre de la etiqueta y la descripción, se indexarán para la búsqueda.
• Excluir etiquetas ocultas : si esta opción está habilitada, las etiquetas que estén ocultas no se indexarán ni se mostrarán en los resultados de búsqueda.
• Nombre de la etiqueta : si está habilitado, el título de la etiqueta se indexará y se utilizará en las búsquedas.
• Descripción de la etiqueta : si está habilitada, el texto de descripción de cada etiqueta se indexará y se utilizará en las búsquedas.
• Meta descripción : si está habilitada, la meta descripción de cada página de etiqueta se indexará y se utilizará para búsquedas.
  
  
• Habilitar la indexación de configuración posterior : si está habilitado, puede indexar las opciones de configuración posterior seleccionadas. 
• Campos a indexar : especifique los nombres de los campos de configuración posterior a indexar, separados por comas.

Opciones avanzadas

• Valor de la opción Tokenizar : esta opción establece el comportamiento del proceso de búsqueda; es decir, cómo busca las palabras que se buscan y qué tan efectiva es la búsqueda. En términos generales, la configuración Completa proporcionará la experiencia de búsqueda más efectiva, pero se pueden usar opciones alternativas más simples en sitios web grandes para limitar la cantidad de memoria necesaria para la búsqueda. Las configuraciones disponibles para esta opción son:
  • Estricto : solo se mostrarán en los resultados las coincidencias exactas para el término de búsqueda.
  • Adelante : las palabras se buscan comenzando desde la primera letra en un orden hacia adelante, lo que permite mostrar coincidencias parciales; las palabras sin terminar o las palabras con errores ortográficos al final seguirán mostrando resultados, por ejemplo, si busca "Prueba", ingresar solo "Tes" proporcionará algunos resultados.
  • Invertir : se mostrará un resultado cuando las letras del término de búsqueda aparezcan tanto en orden directo como inverso, lo que proporciona aún más soporte para errores ortográficos o búsquedas incompletas, por ejemplo, si busca "Prueba", ingresar "Tes" o "ing" proporcionará algunos resultados.
  • Completo : combina todo lo anterior, más coincidencias parciales para la sección central del término de búsqueda; por ejemplo, si busca "Pruebas", ingresar "Tes", "ing" o "sti", u otras combinaciones de estos, proporcionará algunos resultados.
• Juego de caracteres : establece el conjunto de caracteres que el complemento de búsqueda estática debe utilizar en las búsquedas. De forma predeterminada, esta opción cubrirá de forma segura todos los idiomas europeos que utilizan el alfabeto latino, incluidos los caracteres adicionales para los idiomas con letras acentuadas.
• Idioma : establece el idioma que se utilizará en las búsquedas al reconocer palabras similares que provienen de la misma palabra base, por ejemplo, conjugaciones de un verbo. Utiliza la convención de nomenclatura ISO-3166 para idiomas. Tenga en cuenta que no todos los idiomas son compatibles.
• Habilitar caché : si está habilitado, el complemento de búsqueda estática utilizará el caché disponible para almacenar búsquedas populares a fin de proporcionar funciones de autocompletado y búsqueda instantánea al escribir en la barra de búsqueda. Las opciones disponibles en esta sección son:
  • Deshabilitado : no se almacenarán búsquedas; las búsquedas pueden ejecutarse más lentamente que cuando el caché está habilitado.
  • Habilitado - sin límite de tamaño - Las búsquedas se guardarán para proporcionar búsquedas dinámicas al escribir y sugerencias de autocompletar si está habilitado.
  • Habilitado - con límite de tamaño - Las búsquedas se guardarán hasta un límite específico; después del cual, solo se almacenarán las búsquedas más populares para proporcionar búsquedas y sugerencias dinámicas.
• Tamaño de caché : esta opción solo está disponible cuando la opción Habilitar caché está configurada en Habilitada - con límite de tamaño . El número ingresado en este campo define la cantidad máxima de búsquedas que el complemento debe guardar para búsquedas y sugerencias dinámicas. De manera predeterminada, está configurado en 100.
• Habilitar sugerencias : si está habilitado, la búsqueda ofrecerá sugerencias de autocompletar a los visitantes mientras escriben en la barra de búsqueda, según búsquedas populares que se hayan realizado anteriormente.
• URL relativas - dominio : establece el dominio que utilizará la búsqueda para crear enlaces adecuados en el índice de búsqueda.

  Nota: utilice esta opción solo cuando utilice URL relativas en la configuración del servidor.

Personalizar la apariencia del complemento de búsqueda estática

Es posible que los usuarios avanzados o los desarrolladores de temas deseen modificar la apariencia del cuadro de búsqueda del complemento y la página de búsqueda emergente; la información de esta sección lo ayudará a comenzar a personalizar la búsqueda para que se ajuste a la estética de su tema.

¿Qué código genera el cuadro de búsqueda estática?

Cuando está habilitado, el complemento de búsqueda estática genera un "cuadro de entrada", que es un formulario con un área de entrada donde los visitantes pueden ingresar su término de búsqueda y un botón para enviar la búsqueda. Este formulario se agrega a la página principal del tema. El código que se genera para este cuadro de entrada es el siguiente:

Generará la siguiente salida:

<form action="#search" class="search__form">
   <input class="search__input" type="search" placeholder="Search" aria-label="Search"> 
   <button type="submit" class="search__button">
      <span>Search</span>
   </button>
</form>

Este código puede ser útil si desea adaptar el cuadro de búsqueda a su tema.

Modificar la apariencia de los resultados de búsqueda

Los resultados de una búsqueda determinada se muestran en una ventana emergente modal; al utilizar la herramienta CSS personalizada que se puede encontrar en la sección Herramientas y complementos del menú principal de Publii, los usuarios pueden modificar la apariencia de la ventana emergente de resultados según sus necesidades.

Variables CSS disponibles

A continuación encontrará una lista de las variables CSS disponibles que se utilizan para diseñar la ventana emergente de resultados; puede copiar todo el bloque de código a su herramienta CSS personalizada y realizar modificaciones, o realizar cambios solo en variables CSS específicas de la lista.

:root {    
    --pss-width: 672px; 
    --pss-popup-min-height: 210px; 
    --pss-popup-max-height: 576px; 
    --pss-popup-input-height: 70px; 
    --pss-border-radius: 4px; 
    --pss-spacing: 20px; 
    --pss-font-base-size: 15px; 
    --pss-font-family: inherit; 
    --pss-results-title-font-weight: 500; 
    --pss-results-excerpt-line-height: 1.2; 
    
    --pss-bg: #fff; 
    --pss-overlay: rgba(184, 186, 193, 0.9); 
    --pss-border-color: #e7e8ea; 
    --pss-color: #0079f2; 
    --pss-msg-text-color: #6A7082; 
    --pss-input-bg: #fff; 
    --pss-input-text-color: #32353e; 
    --pss-input-placeholder-color: #7f8596; 
    --pss-button-close-bg: #6A7082; 
    --pss-button-close-color: #fff; 
    --pss-results-title-color: #32353e; 
    --pss-results-title-color-hover: #fff; 
    --pss-results-excerpt-color: #6A7082; 
    --pss-results-excerpt-color-hover: #fff; 
    --pss-results-icon-color: #969faf; 
    --pss-results-icon-color-hover: #fff; 
    --pss-results-highlight-bg: #0079f2; 
  } 
    
  @media (prefers-color-scheme: dark) { 
    :root { 
      --pss-bg: #191a1f; 
      --pss-overlay: rgba(10, 10, 12, 0.8); 
      --pss-border-color: #2A2B34; 
      --pss-color: #1089ff; 
      --pss-msg-text-color: #7f8596; 
      --pss-input-bg: #191a1f; 
      --pss-input-text-color: #d9d9e0; 
      --pss-input-placeholder-color: #7f8596; 
      --pss-button-close-bg: #393A47; 
      --pss-button-close-color: #fff; 
      --pss-results-title-color: #d9d9e0; 
      --pss-results-title-color-hover: #fff; 
      --pss-results-excerpt-color: #8c8ea3; 
      --pss-results-excerpt-color-hover: #fff; 
      --pss-results-icon-color: #7f8596; 
      --pss-results-icon-color-hover: #fff; 
      --pss-results-highlight-bg: #1089ff; 
    } 
  }