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 ）。要使其成為一體，請在執行此步驟之前在網站儲存庫中執行hugo mod init <your site url or any unique string> 。

3. 建立content/search.md ， layout參數設定為“search”， output參數設定為["html", "json"] 。作為此主題元件一部分的search.html範本不使用此search.md的內容或正文。

   這是一個範例search.md ：

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

要求

您需要從 https://go.dev/doc/install 安裝最新版本的 Go，因為此主題元件需要hugo mod ..指令才能運作。

切換到使用 Hugo Modules 的此更新上次使用 Hugo v0.92.0 進行了測試。

1. 您的主題必須使用基本模板和區塊來構建，並且
2. base範本需要定義main和footer區塊（如上一個連結所示）。

如果主主題不滿足這些要求，您將需要編輯search.html部分以使搜尋正常運作。您可以在該元件的layouts/_default/search.html中找到它。

如果主主題沒有baseof.html怎麼辦？

您有兩個選擇：

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。
• Hugo 主題組件由 @kaushalmodi 封裝。
• @lpar 的 jQuery 刪除和 IE 填充整合。
• IE 相容性填充：
  • 承諾
  • 拿來
  • URL搜尋參數
  • 模板和片段API
  • 節點刪除