Hugo 实现搜索功能小白教程

这是我的博客地址->神州部落格
欢迎来访哦······

前言

Hugo 这种静态站点默认没有搜索功能，大概因为没了数据库实现反而不方便。Search for your Hugo Website 列出了一些可选项，要么自己生成索引用开源的工具搜索，要么用第三方搜索服务如 algolia。

自己来的方案里我选择 Github Gist for Fuse.js integration，因为它不需要另外引入 Node.js、 Grunt 或 Gulp，而是利用 Hugo 内置的功能在 build 的时候生成索引输出到 JSON，看起来更简单的样子。

输出索引文件

第一步

修改配置文件 Config.toml，添加以下内容

[outputs]
  home = ["HTML", "RSS", "JSON"]

第二步

{
  {- $.Scratch.Add "index" slice -}}
{
  {- range .Site.RegularPages -}}
    {
  {- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
{
  {- end -}}
{
  {- $.Scratch.Get "index" | jsonify -}}

完成后可以从 /index.json 打开索引文件

注：layouts/ 目录里保存的是 Hugo 的模板文件。layouts/ 是站点级别的模板， themes/<theme name>/layouts/ 是主题级别的模板，站点级别模板的设置优先于主题级别的模板。

创建搜索页面

第一步

创建 content/search.md

---
title: "搜索功能"
sitemap:
  priority : 0.1
---

根据 URL 规则，Hugo 会生成 /search/index.html 或 /search.html。但是因为 content/</