hugo search fuse js

Fuse.js と Mark.js を使用した Hugo ライブ検索

これは独立したテーマではありません。これは Hugo テーマ コンポーネントです。

このコンポーネントを使用するには、

1. これをサイトの TOML 構成ファイルに追加します。

   [ module ]
     [[ module . imports ]]
       path = " github.com/kaushalmodi/hugo-search-fuse-js "

2. メインサイトのディレクトリでhugo mod tidyを実行します。メイン サイト リポジトリも Hugo モジュールである必要があります (独自のgo.modが必要です)。これを 1 つにするには、この手順を実行する前に、サイト リポジトリでhugo mod init <your site url or any unique string>を実行します。

3. layoutパラメーターを "search" に設定し、 outputパラメーターを["html", "json"]に設定してcontent/search.mdを作成します。このsearch.mdのコンテンツまたは本文は、このテーマ コンポーネントの一部であるsearch.htmlテンプレートでは使用されません。

   以下はsearch.md例です。

    +++
   title = " Search "
   layout = " search "
   outputs = [ " html " , " json " ]
   [ sitemap ]
     priority = 0.1
   +++

要件

このテーマコンポーネントが動作するには、 hugo mod ..コマンドが必要であるため、https://go.dev/doc/install から Go の最新バージョンをインストールする必要があります。

Hugo モジュールの使用への切り替えに関するこのアップデートは、最後に Hugo v0.92.0 でテストされました。

1. メインテーマは基本テンプレートとブロックを使用して構造化する必要があります。
2. baseテンプレートでは、 mainブロックとfooterブロックを定義する必要があります (前のリンクに示されています)。

メインテーマがこれらの要件を満たしていない場合は、検索を機能させるためにsearch.html部分を編集する必要があります。このコンポーネントのlayouts/_default/search.htmlにあります。

メインテーマにbaseof.htmlがない場合はどうなりますか?

次の 2 つのオプションがあります。

1. search.html編集してテーマに合うようにします。
2. 新しい「基本テンプレートとブロック」アプローチを使用するようにテーマをアップグレードします。

メインテーマにbaseof.htmlがあるが、 mainブロックやfooterブロックがない場合はどうなるでしょうか?

既存のテーマを壊すことなく、これらのブロックを追加するのは非常に簡単です。

mainブロックを追加するには、 baseof.htmlの適切な場所にこれを追加します。

 {{ block "main" . }}{{ end }}

footerブロックがない場合も同様に以下を追加します。

 {{ block "footer" . }}{{ end }}

例については、Hugo ドキュメントのbaseof.htmlスニペットを参照してください。

クレジット

• fusion.jsによる検索機能。
• mark.jsによるキーワードの強調表示。
• この要点の @eddiewebb による初期 Hugo 実装。
• @kaushalmodi による Hugo テーマ コンポーネントのパッケージ化。
• @lpar による jQuery の削除と IE ポリフィルの統合。
• IE 互換性ポリフィル:
  • 約束
  • フェッチ
  • URLSearchParams
  • テンプレートとフラグメント API
  • ノードの削除