gridea search

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 > 

其他：

• 使用gridea-search 的主題

• 官方目錄結構與頁面變數說明

• 第三方函式庫：

  • 前端模糊搜尋- Fuse.js: https://github.com/krisk/fuse

  • 模板解析- EJS: https://github.com/mde/ejs

• 開源協定：MIT

• 相關文章：

  • 為Gridea 部落格增加搜尋功能