Swiftype搜索最近停了,开始收费,不想收费又想有这个站内搜索功能怎么办?
可以用Algolia免费版!不仅免费,感觉上要比Swiftype要快,下面简单说下集成步骤。
第一步:到官网注册帐号(可以用github登录)
官网地址注册帐号
新建一个INDEX如图
来到API-KEYS页面,上面有后面需要的信息(记得还有上面的INDEX名)。
第二步:上传数据到Algolia
在Hexo工程目录的根目录下执行
npm install hexo-algolia --sav
在根目录的_config.yml中加入如下配置,注意改成前面第一步注册成果数据
algolia:
applicationID: 'your applicationID'
apiKey: 'your apiKey'
adminApiKey: 'your adminApiKey'
indexName: 'your indexName'
chunkSize: 5000
接着执行,确保得到提交成功提示
hexo algolia
第三步:修改Hexo主题集成Algolia
确保在head.swig文件中加入如下配置,注意改成自己的
在要搜索的页面加入如下div
在要触发搜索的HTML节点加入一个CLASS名为popup-trigger,如图
Search
确保要搜索页包含如下JS代码(可以单独建立一个.swig文件,然后在整体layout的swig文件中加入)
确保要搜索页包含如下CSS代码(可以单独建立一个.styl文件,然后在整体css的styl文件中加入,注意确保生成正确,必要时可以执行hexo clean)
ul.search-result-list {
padding-left: 0px;
margin: 0px 5px 0px 8px;
}
p.search-result {
border-bottom: 1px dashed #ccc;
padding: 5px 0;
}
a.search-result-title {
font-weight: bold;
}
a.search-result {
border-bottom: transparent;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-keyword {
border-bottom: 1px dashed #4088b8;
font-weight: bold;
}
#local-search-result {
height: 90%;
overflow: auto;
}
.popup {
display: none;
position: fixed;
top: 10%;
left: 50%;
width: 700px;
height: 80%;
margin-left: -350px;
padding: 3px 0 0 10px;
background: #fff;
color: #333;
z-index: 9999;
border-radius: 5px;
}
@media (max-width: 767px) {
.popup {
padding: 3px;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
border-radius: 0px;
}
}
.popoverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 2080;
background-color: rgba(0,0,0,0.3);
}
#local-search-input {
margin-bottom: 10px;
width: 50%;
}
.popup-btn-close {
position: absolute;
top: 6px;
right: 14px;
color: #4ebd79;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
#no-result {
position: absolute;
left: 44%;
top: 42%;
color: #ccc;
}
.busuanzi-count:before {
content: " ";
float: left;
width: 260px;
min-height: 25px;
}
@media (min-width: 768px) and (max-width: 991px) {
.busuanzi-count {
width: auto;
}
.busuanzi-count:before {
display: none;
}
}
@media (max-width: 767px) {
.busuanzi-count {
width: auto;
}
.busuanzi-count:before {
display: none;
}
}
.site-uv,
.site-pv,
.page-pv {
display: inline-block;
}
.site-uv .busuanzi-value,
.site-pv .busuanzi-value,
.page-pv .busuanzi-value {
margin: 0 5px;
}
.site-uv {
margin-right: 10px;
}
.site-uv::after {
content: "|";
padding-left: 10px;
}
.algolia-popup {
overflow: hidden;
padding: 0;
}
.algolia-popup .popup-btn-close {
padding-left: 15px;
border-left: 1px solid #eee;
top: 10px;
}
.algolia-popup .popup-btn-close .fa {
color: #999;
font-size: 18px;
}
.algolia-popup .popup-btn-close:hover .fa {
color: #222;
}
.algolia-search {
padding: 10px 15px 5px;
max-height: 50px;
border-bottom: 1px solid #ccc;
background: #f5f5f5;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.algolia-search-input-icon {
display: inline-block;
width: 20px;
}
.algolia-search-input-icon .fa {
font-size: 18px;
}
.algolia-search-input {
display: inline-block;
width: calc(90% - 20px);
}
.algolia-search-input input {
padding: 5px 0;
width: 100%;
outline: none;
border: none;
background: transparent;
}
.algolia-powered {
float: right;
}
.algolia-powered img {
display: inline-block;
height: 18px;
vertical-align: middle;
}
.algolia-results {
position: relative;
overflow: auto;
padding: 10px 30px;
height: calc(100% - 50px);
}
.algolia-results hr {
margin: 10px 0;
}
.algolia-results .highlight {
font-style: normal;
margin: 0;
padding: 0 2px;
font-size: inherit;
color: #f00;
}
.algolia-hits {
margin-top: 20px;
}
.algolia-hit-item {
margin: 15px 0;
}
.algolia-hit-item-link {
display: block;
border-bottom: 1px dashed #ccc;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.algolia-pagination .pagination {
margin-top: 40px;
border-top: none;
padding: 0;
}
.algolia-pagination .pagination-item {
display: inline-block;
}
.algolia-pagination .page-number {
border-top: none;
}
.algolia-pagination .page-number:hover {
border-bottom: 1px solid #222;
}
.algolia-pagination .disabled-item {
visibility: hidden;
}
将下面这张图片拷贝到你的source目录的images目录下
OK,终于完成了,样子可以参照本站的搜索功能!


