gridea search

Gridea 静的サイト クライアント記事検索テーマ プラグイン

プレビュー: https://kytrun.com、またはこのプロジェクトをダウンロードし、Gridea のテーマ パスにexample/ディレクトリを配置し、Gridea を自分で実行します。

これは、フロントエンド プログラミングの基礎を持つ Gridea テーマ開発者のみに適しています。grinda-search を使用したテーマは、こちらでご覧いただけます。

特徴：

• スタンドアロンの検索結果ページと Web リンク
• テーマ開発者は既存のテンプレートを高度に再利用できます
• 公式 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 >

既存のパーツは変更できませんが、クラスやスタイルなどの他の属性を追加できます。

(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 >

• クラス、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

• 関連記事：

  • グリデアブログに検索機能を追加