Gridea 静态站点客户端-文章搜索主题插件
预览:https://tangkaichuan.cn,或者下载此项目将 /example
目录置于 Gridea 的 themes 路径,自行运行 Gridea.
1. 以官方 主题开发样板 为例,在其基础上新增文件:
├── assets
│ └── media
│ └── gridea-search
│ └── result-template.ejs - 搜索结果列表模板
└── templates
├── api-content.ejs - 输出文章内容的 api
├── api-info.ejs - 输出整站配置信息的 api,不含文章内容
└── search.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,则无需额外添加。
搜索页面,可基于其他页面修改。
搜索结果列表模板,在浏览器端解析,基本复用 ./templates/includes/post-list.ejs,但修改了摘要内容 <%- post.abstract %>
为 <%- post.searchedPreview %>
,用于含关键词的搜索结果预览。
- 搜索结果列表暂无分页功能,请勿使用
pagination
字段。
<p class="searching">搜索中......</p>
<p class="no-result" style="display:none">未搜索到相关文章</p>
- 不强制使用
<p>
标签,可以用<div>
等添加动画或图片。
<form id="gridea-search-form" data-update="<%=site.utils.now%>" action="/search/">
<input name="q" />
</form>
- 保留已有属性如 class、id 等,可新增属性。
<style>
.searched-keyword {
/*Your own CSS for <span> tag here*/
}
</style>
-
第三方库:
-
前端模糊搜索 - Fuse.js: https://github.com/krisk/fuse
-
模板解析 - EJS: https://github.com/mde/ejs
-
-
开源协议:MIT
-
相关文章: