前言
本文参考了纳斯的教程，首先先说一下两个插件的区别：
1
| hexo-algolia不能将文章内容作为索引上传，hexo-algoliasearch 可全文上传
|
你的拥有Algolia搜索账号，点击这里进行注册。注册成功之后，先进入你的邮箱去验证一下这个账号，然后返回Algolia，会进入这样一个界面：
输入你喜欢的名称就ok，然后创建；创建成功后点击左侧导航栏的小屋子那个图标，之后点击：
接下来点击：
接下来：
接下来;
点击创建即可，接下来记录一下key的值：
1
2
3
4
5
| appId: "xxxx" //在Your API Keys这里可以拿到（Application ID）
apiKey: "xxxxxx" //在All API Keys这里你刚刚新建的那个key
adminApiKey: "xxxxx" //在Your API Keys这里可以拿到
chunkSize: 5000
indexName: "xxxx" //你一开始输入的index
|
配置config
在_config.yml中添加这一段代码：
1
2
3
4
5
6
7
8
9
10
| algolia:
appId: "xxx"
apiKey: "xxxx"
adminApiKey: "xxxxx"
chunkSize: 5000
indexName: "xxx"
fields:
- path
- title
- content:strip
|
在_config.butterfly.yml中配置以下内容：
1
2
3
4
5
6
|
algolia_search:
enable: true
hits:
per_page: 6
|
在_config.butterfly.yml中配置以下内容：
1
2
3
4
5
6
7
| option:
algolia_js: https://cdn.jsdelivr.net/gh/Lea321/cdn/js/algolia.min.js
|
在vscode中新建一个bash终端，在终端中输入以下指令：
1
2
| export HEXO_ALGOLIA_INDEXING_KEY="你刚才新创建的APIKEY"
hexo algolia
|
美化
找到[Blog]\themes\butterfly\source\js\search\algolia.js，在里面找到下面这段代码，并按照这段代码修改这个js：
1
2
3
4
5
6
7
8
| const searchBox = instantsearch.widgets.searchBox({
container: '#algolia-search-input',
showReset: false,
showSubmit: true,
searchAsYouType: false,
placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder,
showLoadingIndicator: true
})
|
找到[Blog]\themes\butterfly\source\css\_search\algolia.styl这个文件，并把以下代码替换原来的代码（全选替换）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
| #algolia-search
hr
display:none
.search-nav
height:40px
margin:0
.search-dialog
+maxWidth768()
border: none
border-radius: 0
.ais-SearchBox
.ais-SearchBox-form
height: 35px
width: 100%
overflow: hidden
margin-bottom: 10px
display: flex
input
padding: 0 14px
height: 100%
width: calc(100% - 50px)
outline: none
border: 2px solid $search-color
border-right: 0
border-radius: 40px 0 0 40px
background: transparent
color: var(--search-input-color)
input::-webkit-search-cancel-button
-webkit-appearance: none
button.ais-SearchBox-submit
display: flex
align-items: center
justify-content: center
height: 100%
width: 50px
border: 2px solid var(--hackcr-purple)
border-left: 0
border-radius: 0 40px 40px 0
svg
width: 50%
height: 50%
path
fill: var(--search-input-color)
&:hover svg path
fill: var(--hackcr-purple)
span.ais-SearchBox-loadingIndicator
position: absolute
left: 50%
top: 93px
transform: translate(-50%)
.ais-Hits-list
margin: 0
padding: 0
@extend .list-beauty
a
color: var(--search-result-title)
font-weight: bold
&:hover
color: $search-color
mark
background: transparent
color: $search-keyword-highlight
font-weight: bold
.algolia-hit-item-content
margin: 0 0 5px
word-break: break-all
.ais-Pagination
margin: 10px 0
height: 35px
padding: 0
text-align: center
.ais-Pagination-list
margin: 0
padding: 0
list-style: none
.ais-Pagination-item
display: inline
margin: 0 4px
padding: 0
.ais-Pagination-link
display: inline-block
min-width: 24px
height: 24px
text-align: center
line-height: 24px
.ais-Pagination-item--selected
a
background: var(--hackcr-purple)
color: #eee
cursor: default
border-radius: 5px
.ais-Pagination-item--disabled
visibility: hidden
.algolia-logo
padding-top: 2px
width: 80px
height: 30px
#algolia-hits
> div
overflow-y: scroll
+minWidth768()
max-height: calc(80vh - 240px)
+maxWidth768()
max-height: calc(100vh - 260px)
max-height: calc(100dvh - 200px)
#algolia-info
display: flex
justify-content: space-between
align-items: center
height: 30px
.algolia-stats
font-size: 14px
.algolia-poweredBy
display: flex;
justify-content: right;
width: 90px
overflow: hidden;
.ais-PoweredBy a
display:flex
justify-content: space-between
align-items: center
.ais-PoweredBy-logo path:first-child
display: none
.ais-PoweredBy-logo path:nth-child(2),
.ais-PoweredBy-logo path:nth-child(4)
fill: var(--hackcr-purple)
|
至此，你的search就美化好啦。
