Skip to content

Latest commit

 

History

History
105 lines (69 loc) · 3.42 KB

README.md

File metadata and controls

105 lines (69 loc) · 3.42 KB
Raw

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

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

⚠ 仅适合有前端编程基础的 Gridea 主题开发者使用；可在此查看使用 gridea-search 的主题。

特点:

  • 独立搜索结果页面和网页链接
  • 主题开发者可高度复用已有模板
  • 延用官方 API，无附加学习成本
  • 仅使用搜索时加载所需资源
  • 支持样式自定义
  • 良好的兼容性

快速开始：

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

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

2. 修改以下文件

(1) ./templates/api.ejs

输出 JSON 格式 API 的模板，为了尽量缩短网络传输时间，初始注释了部分属性，可根据需要取消相应注释。

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

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

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

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

(3) ./templates/search.ejs

搜索页面，可基于其他页面修改，然后添加搜索结果渲染节点及依赖脚本。

  • 依赖的脚本 <script> 必须置于 </body> 之前，切勿随意改变顺序，防止加载出错。

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

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

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

样式自定义：

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

<div id="gridea-search-result" data-update="<%= site.utils.now %>">
    <div class="searching">搜索中......</div>
    <div class="no-result" style="display:none">未搜索到相关文章</div>
</div>
  • 保留已有属性如 class、id 等，可新增属性，添加图标或动画。

2. 搜索输入框

  • 保留已有属性，可新增属性，添加图标或动画。

3. 关键词高亮

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

其他：