gridea search

Gridea static site client-article search theme plug-in

Preview: https://kytrun.com, or download this project, place example/ directory in the themes path of Gridea, and run Gridea yourself.

It is only suitable for Gridea theme developers with a foundation in front-end programming; themes using grinda-search can be viewed here .

Features:

• Standalone search results pages and web links
• Theme developers can reuse existing templates to a high degree
• Extend the use of official API, no additional learning costs
• Only load required resources using search
• Support style customization
• good compatibility

Quick start:

1. Take the official theme development template as an example and add new files based on it:

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

2. Modify the following files

(1) ./templates/api.ejs

The template that outputs the JSON format API. In order to shorten the network transmission time as much as possible, some attributes are initially annotated. You can cancel the corresponding annotations as needed.

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

Public template, add a search box at the appropriate location for reference by other pages:

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

The existing part cannot be modified, other attributes such as class or style can be added.

(3) ./templates/search.ejs

The search page can be modified based on other pages, and then add search result rendering nodes and dependent scripts.

• The dependent script <script> must be placed before </body> . Do not change the order arbitrarily to prevent loading errors.

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

The search result list template is parsed on the browser side and basically reused ./templates/includes/post-list.ejs, but the summary content <%- post.abstract %> is modified to <%- post.searchedPreview %> , using Preview of search results containing keywords.

• The search result list does not have pagination function yet, please do not use the pagination field.

Style customization:

1. Display search results and no search results

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

• Retain existing attributes such as class, id, etc., and add new attributes, icons or animations.

2. Search input box

• Keep existing attributes, add new attributes, and add icons or animations.

3. Keyword Highlighting

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

other:

• Topics using gridea-search

• Official directory structure and page variable description

• Third-party libraries:

  • Front-end fuzzy search - Fuse.js: https://github.com/krisk/fuse

  • Template parsing - EJS: https://github.com/mde/ejs

• Open source license: MIT

• Related articles:

  • Add search function to Gridea blog