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 - 搜索页面
输出 JSON 格式 API 的模板,为了尽量缩短网络传输时间,初始注释了部分属性,可根据需要取消相应注释。
公共模板,在适当位置添加搜索框供其他页面引用:
<form id="gridea-search-form" action="<%= themeConfig.domain %>/search/"> <input name="q" /> </form>
现有部分不可修改,可以添加 class 或 style 等其他属性。
搜索页面,可基于其他页面修改,然后添加搜索结果渲染节点及依赖脚本。
- 依赖的脚本
<script>必须置于</body>之前,切勿随意改变顺序,防止加载出错。
搜索结果列表模板,在浏览器端解析,基本复用 ./templates/includes/post-list.ejs,但修改了摘要内容 <%- post.abstract %> 为 <%- post.searchedPreview %>,用于含关键词的搜索结果预览。
- 搜索结果列表暂无分页功能,请勿使用
pagination字段。
<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 等,可新增属性,添加图标或动画。
- 保留已有属性,可新增属性,添加图标或动画。
<style> .searched-keyword { /* <span> 标签支持的所有 CSS 属性 */ } </style>
-
第三方库:
-
前端模糊搜索 - Fuse.js: https://github.com/krisk/fuse
-
模板解析 - EJS: https://github.com/mde/ejs
-
-
开源协议:MIT
-
相关文章: