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
  • 节点删除