使用Hugo自搭博客系列三：algolia搜索
847 words
2 minutes
algolia
预备工作
本地项目创建/修改文件
添加前端UI
layouts/partials/head.html添加
1
2
3
| {{- if .Site.Params.algolia.appId -}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
{{- end -}}
|
layouts/partials/scripts.html添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| {{- if .Site.Params.algolia.appId -}}
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: {{ .Site.Params.algolia.searchOnlyKey }},
indexName: {{ .Site.Params.algolia.indexName }},
appId: {{ .Site.Params.algolia.appId }},
inputSelector: '.docsearch-input',
debug: false,
});
docsearch({
apiKey: {{ .Site.Params.algolia.searchOnlyKey }},
indexName: {{ .Site.Params.algolia.indexName }},
appId: {{ .Site.Params.algolia.appId }},
inputSelector: '.mob-docsearch-input',
debug: false,
});
</script>
{{- end -}}
|
layouts/partials/header.html , menu那里添加
1
2
3
4
5
| {{- if .Site.Params.algolia.appId -}}
<li style="display:inline-block;margin-right:10px;">
<input type="search" class="docsearch-input" placeholder="Search" />
</li>
{{- end -}}
|
layouts/partials/slideout.html, menu那里添加
1
2
3
4
5
| {{- if .Site.Params.algolia.appId -}}
<li style="display:inline-block;margin-right:10px;">
<input type="search" class="mob-docsearch-input" placeholder="Search" />
</li>
{{- end -}}
|
- assets/sass/_partial/_slideout.scss 修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .slideout-menu {
position: fixed;
top: 0;
left: 0px;
bottom: 0;
width: 180px;
min-height: 100vh;
overflow: visible;
-webkit-overflow-scrolling: touch;
z-index: 2;
display: none;
.language-selector {
padding-left: 30px;
}
}
// 这里新增
@media screen and (max-width: 500px) {
.algolia-autocomplete .ds-dropdown-menu {
min-width: 99vw;
}
}
|
layouts_default\list.algolia.json
1
2
3
4
5
6
7
8
9
| {{/* 生成Algolia搜索索引文件 */}}
{{- $.Scratch.Add "index" slice -}}
{{/* content/posts或content/post目录下的博文才生成索引 */}}
{{- range where (where .Site.Pages "Type" "in" (slice "posts" "post")) "IsPage" true -}}
{{- if and (not .Draft) (not .Params.private) -}}
{{- $.Scratch.Add "index" (dict "objectID" .File.UniqueID "url" .Permalink "content" (.Summary | plainify) "tags" .Params.Tags "lvl0" .Title "lvl1" .Params.Categories "lvl2" "摘要") -}}
{{- end -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}
|
修改 config.toml
1
2
3
4
5
6
7
8
9
10
11
12
13
| [outputs]
home = ["HTML", "RSS", "Algolia"]
[outputFormats.Algolia]
baseName = "algolia"
isPlainText = true
mediaType = "application/json"
notAlternative = true
[params.algolia]
appId = "填下" # 是id
indexName = "填下"
searchOnlyKey = "填下"
|
根目录执行 hugo 命令之后，在 public 目录下就会生成 algolia.json 文件
上传索引文件
手动
- 将生成的索引文件algolia.json，上传到Algolia的服务器。
自动
1
2
| npm init
npm install atomic-algolia --save
|
1
2
3
4
| "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"algolia": "atomic-algolia"
},
|
1
2
3
| ALGOLIA_APP_ID=你的Application ID # 注意是ID
ALGOLIA_INDEX_NAME=你的索引名字 ALGOLIA_INDEX_FILE=public/algolia.json
ALGOLIA_ADMIN_KEY=你的Admin API Key
|
本文参考：
