gridea search

Complemento de tema de búsqueda de artículos-cliente de sitio estático Gridea

Vista previa: https://kytrun.com, o descargue este proyecto, coloque example/ en la ruta de temas de Gridea y ejecute Gridea usted mismo.

Solo es adecuado para desarrolladores de temas de Gridea con una base en programación front-end. Los temas que utilizan grinda-search se pueden ver aquí .

Características:

• Páginas de resultados de búsqueda independientes y enlaces web
• Los desarrolladores de temas pueden reutilizar plantillas existentes en gran medida
• Amplíe el uso de la API oficial, sin costes de aprendizaje adicionales
• Cargue solo los recursos necesarios mediante la búsqueda
• Personalización del estilo de soporte
• buena compatibilidad

Inicio rápido:

1. Tome la plantilla oficial de desarrollo de temas como ejemplo y agregue nuevos archivos basados ​​en ella:

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. Modifique los siguientes archivos

(1) ./templates/api.ejs

La plantilla que genera la API en formato JSON para acortar el tiempo de transmisión de la red tanto como sea posible, inicialmente se anotan algunos atributos. Puede cancelar las anotaciones correspondientes según sea necesario.

(2) ./templates/includes/header.ejs

Plantilla pública, agregue un cuadro de búsqueda en la ubicación adecuada para referencia en otras páginas:

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

La parte existente no se puede modificar, se pueden agregar otros atributos como clase o estilo.

(3) ./templates/search.ejs

La página de búsqueda se puede modificar en función de otras páginas y luego agregar nodos de representación de resultados de búsqueda y scripts dependientes.

• El script dependiente <script> debe colocarse antes de </body> . No cambie el orden arbitrariamente para evitar errores de carga.

(4) ./assets/media/gridea-search/result-template.ejs

La plantilla de la lista de resultados de búsqueda se analiza en el lado del navegador y básicamente se reutiliza ./templates/includes/post-list.ejs, pero el contenido del resumen <%- post.abstract %> se modifica a <%- post.searchedPreview %> . usando Vista previa de resultados de búsqueda que contienen palabras clave.

• La lista de resultados de la búsqueda aún no tiene función de paginación; no utilice el campo pagination .

Personalización de estilo:

1. Mostrar resultados de búsqueda y ningún resultado de búsqueda.

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >

• Conserve los atributos existentes, como clase, identificación, etc., y agregue nuevos atributos, íconos o animaciones.

2. Cuadro de entrada de búsqueda

• Mantenga los atributos existentes, agregue nuevos atributos y agregue íconos o animaciones.

3. Resaltado de palabras clave

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style > 

otro:

• Temas que utilizan gridea-search

• Estructura del directorio oficial y descripción de la variable de página.

• Bibliotecas de terceros:

  • Búsqueda difusa de front-end: Fuse.js: https://github.com/krisk/fuse

  • Análisis de plantillas: EJS: https://github.com/mde/ejs

• Licencia de código abierto: MIT

• Artículos relacionados:

  • Añadir función de búsqueda al blog de Gridea