静态网站的最大缺点就是搜索的缺失,采用 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" . }}
然后发布,效果如本站右上角。