采用 Algolia 作为 Hugo 搜索方案

静态网站的最大缺点就是搜索的缺失，采用 Algolia 作为 Hugo 搜索方案是一个不错的候选方案。

Algolia

Algolia 属于商业解决方案，但是提供了免费计划。下面介绍对接使用 hugo 的使用方法。

index

在 Algolia 注册后，会自动创建 index，记下名称为 xiexianbin-blog。

API key

在 Dashboard 页面中点击侧栏API Keys，记住以下的 keys，之后都会用到。

hugo 索引生成

配置 config.yaml

outputFormats:
  Algolia:
    baseName: algolia
    isPlainText: true
    mediaType: application/json
    notAlternative: true

outputs:
  home:
  - ...
  - algolia

配置生成 algolia.json 格式

在主题 layouts 目录中建立一个list.algolia.json文件，然后粘贴以下内容保存：

[
  {{- range $index, $entry := .Data.Pages }}
  {{- if $index }}, {{ end }}
  {
    "id": "{{ .Permalink | relURL }}",
    "url": "{{ .Permalink | relURL }}",
    "title": {{ .Title | jsonify }},
    "date_published": {{ .Date.Format "2006-01-02T15:04:05Z07:00" | jsonify }}
  }
  {{- end }}
]

生成 algolia.json

使用 hugo 命令，即可在 public 文件夹下看到 aligolia.json 索引文件。

上传 Algolia

配置

在 https://github.com/xiexianbin/hugo-algolia-go 的 release 页面下载 hugo-algolia-go 并放到 blog 的根目录，并创建 .hugo-algolia-go.env 文件，内容如下：

ALGOLIA_APP_ID={{ YOUR_APP_ID }}
ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }}
ALGOLIA_INDEX_NAME={{ YOUR_INDEX_NAME }}
ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }}

说明：

• PATH/TO/algolia.json 默认应填写为 public/algolia.json

上传

一切就绪后，使用以下命令即可更新 Algolia 的 Index：

./hugo-algolia-go

主题改造

创建 layouts/partials/search.html，内容如下：

<ul class="ml-right list-unstyled mb-0">
  <li>
    <a href="#modalSearch" data-toggle="modal" data-target="#modalSearch" style="outline: none;">
      <svg height="20" class="octicon octicon-search" viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></path></svg>
    </a>
  </li>
</ul>

<div id="modalSearch" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Search</h5>
      </div>
      <div class="modal-body">
        <div class="input-group">
          <input type="text" id="search-input" class="form-control"
            placeholder="Search for titles or URIs..."
            aria-label="Search for titles or URIs..."
            name="search" autocomplete="off" />
        </div>

        <script src="/js/algoliasearch/3/algoliasearch.min.js"></script>
        <script src="/js/autocomplete.js/0/autocomplete.jquery.min.js"></script>
        <script>
          var client = algoliasearch("8T8ZMDNE3W", "6b9c7e94796cf7714a3651c01a96834a");
          var index = client.initIndex('xiexianbin-blog');
          $('#search-input').autocomplete({ hint: false }, [
            {
              source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 10 }),
              displayKey: 'name',
              templates: {
                suggestion: function(suggestion) {
                  console.log(suggestion);
                  // return suggestion.title;
                  return '<span><a href="/' + suggestion.url + '">' + suggestion._highlightResult.title.value + '</a></span>';
                }
              }
            }
          ]).on('autocomplete:selected', function(event, suggestion, dataset, context) {
            console.log(event, suggestion, dataset, context);
          });
        </script>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
      </div>
    </div>
  </div>
</div>

对应的 js 可以在 https://github.com/algolia/autocomplete.js 中下载

静态文件，static/css/algolia-search.css：

.algolia-autocomplete {
  width: 100%;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
  width: 100%;
}
.algolia-autocomplete .aa-hint {
  color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #999;
  border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
  background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}

在baseof.html 中加入：

    <link href="/css/algolia-search.css" rel="stylesheet" />

在菜单页引入：

    {{- partial "search" . }}

然后发布，效果如本站右上角。