前言

之前就在用algolia,但是搜索却有一点点问题——只能搜索标题,不能搜索内容。
今天看群里在聊algolia,于是就问了问,从 @CC 的文章里得到了答案:我用的插件不对
好家伙,之前没怎么详细了解,完全不知道插件的区别。

hexo-algolia不能将文章内容作为索引上传,hexo-algoliasearch 可全文上传

于是就卸载换装了一下插件,因为有文章内容的原因,之前写的css不适用,所以就决定删除重新写。
考虑到覆盖不如直接改源码来的方便,所以不像之前一样使用自定义css了。

教程

algolia配置等问题就不写了,之前弄的快忘完了。可以找找大佬的教程,百度也有很多教程,自行搜索即可。这里只说前端的内容。

注意事项

配置文件时必须填adminApiKey,不然报错,如果你直接在配置文件填写并将原文件上传到仓库,请注意将仓库设为私有!
fields按我下面的填写即可,基本就足够使用。

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

修改algolia.styl

路径: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
157
#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 #49b1f5;
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(--leonus-blue)

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(--leonus-blue)
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)

#algolia-info
display: flex
justify-content: space-between
align-items: center
height: 30px

.algolia-stats
font-size: 14px

.algolia-poweredBy .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(--leonus-blue);

.apple
#algolia-search
#algolia-hits
> div
+maxWidth768()
height: calc(90vh - 260px)

修改algolia.js

如果你懒得改可以直接用我的链接,往下看即可。

路径:butterfly\source\js\search\algolia.js
搜索searchBox快速定位,按注释内容进行修改

1
2
3
4
5
6
7
8
const searchBox = instantsearch.widgets.searchBox({
container: '#algolia-search-input',
showReset: false,
showSubmit: true, // 设为true 可以通过按钮搜索
searchAsYouType: false, // 新增 可以实现回车或点击按钮搜索,不会每次输入都搜索
placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder,
showLoadingIndicator: true
})

修改之后可以通过jsd加速,也可以使用本地文件。
如果你设置的是local,应该可以直接用。如果你设置的custom,可以在配置文件里找到algolia_js取消注释并填写链接(别忘了空格)
当然,你也可以直接复制使用我的链接。

1
2
3
4
5
6
7
option:
# main_css:
# main:
# utils:
# translate:
# local_search:
algolia_js: https://cdn.jsdelivr.net/gh/Lea321/cdn/js/algolia.min.js

改进

上面的css其实已经够用,但是手机端有的浏览器会显示不全(说的就是edge!)而如果为了迎合edge减小显示高度,chrome等又会显示太少,下面会留下空白。
想了很久也想不出怎么使用css解决这个问题,干脆用js解决吧。

添加js

如果你没有自定义js文件,请先查看此文章:Hexo博客添加自定义css和js文件
在自定义js文件中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
searchSize();
window.addEventListener('resize', searchSize)
// 搜索窗口自适应
function searchSize() {
// 只需要适应手机端
if (document.body.clientWidth > 768) return
let div = document.querySelector('#algolia-hits')
// 监听插入,如果有插入则根据可视高度动态设置最大高度
div.addEventListener('DOMNodeInserted', () => {
div.children[0].style.maxHeight = (document.documentElement.clientHeight - 210) + 'px'
})
}

后记

好像就这些东西了,折腾了这么久写出来就这么一丁点的东西。
如果有什么问题或者BUG反馈在下面评论即可,看到之后会第一时间回复。