/gridea-search

Gridea 模糊搜索插件。Fuzzy search plugin for Gridea.

Primary LanguageCSSMIT LicenseMIT

Gridea 静态站点客户端-文章搜索主题插件

注：本插件由 KT 开发，解决了 Gridea 没有内置搜索引擎的问题，但是暂时尚未考虑子目录的情况，需要 folk 后对 gridea-search.js 进行简单修改。另外，因为 Fuse 是模糊搜索并按照分数排序，所以主要参考前十个左右结果即可。

预览：https://kaopubear.top/blog/，或者下载此项目将 /example 目录置于 Gridea 的 themes 路径，自行运行 Gridea.

特点:

  • 本地缓存索引，加快搜索速度

  • 独立搜索结果页面，可高度复用 post-list 模板

  • 延用官方 API，无附加学习成本

  • 自定义

快速开始：

1. 以官方 主题开发样板 为例，在其基础上新增文件：

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 └── templates
     ├── api-content.ejs - 输出文章内容的 api
     ├── api-info.ejs - 输出整站配置信息的 api，不含文章内容
     └── search.ejs - 搜索页面

2. 修改以下文件

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

公共模板，在适当位置添加搜索框供其他页面引用：

<form
  id="gridea-search-form"
  data-update="<%=site.utils.now%>"
  action="/search/"
>
  <input name="q" />
</form>

现有部分不可修改，可以添加 class 或 style 等其他属性。

  • 搜索页面模板：search.ejs 中必须包含搜索表单 "gridea-search-form"。如果 search.ejs 包含了公共模板如 header.ejs，则无需额外添加。

(2) ./templates/search.ejs

搜索页面，可基于其他页面修改。

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

搜索结果列表模板，在浏览器端解析，基本复用 ./templates/includes/post-list.ejs，但修改了摘要内容 <%- post.abstract %> 为 <%- post.searchedPreview %>，用于含关键词的搜索结果预览。

  • 搜索结果列表暂无分页功能，请勿使用 pagination 字段。

自定义：

1. 显示搜索中和无搜索结果

<p class="searching">搜索中......</p>
<p class="no-result" style="display:none">未搜索到相关文章</p>
  • 不强制使用 <p> 标签，可以用 <div> 等添加动画或图片。

2. 搜索输入框

<form id="gridea-search-form" data-update="<%= site.utils.now %>" action="<%= themeConfig.domain %>/search/">
  <input name="q" />
</form>
  • 保留已有属性如 class、id 等，可新增属性。

3. 关键词高亮

<style>
  .searched-keyword {
    /*Your own CSS for <span> tag here*/
  }
</style>

其他：