Fork me on GitHub

Hexo博客优化配置之--为自己博客添加站内搜索

目录

  1. 1. 前言
  2. 2. 创建网站搜索引擎
  3. 3. 配置适合 Yilia 主题的站内搜索
    1. 3.1. 配置搜索引擎
      1. 3.1.1. 配置搜索引擎布局
      2. 3.1.2. 获取搜索框代码
      3. 3.1.3. 获取搜索结果代码
    2. 3.2. 修改 Yilia 主题
      1. 3.2.1. 添加搜索按钮
      2. 3.2.2. 配置搜索页
      3. 3.2.3. 配置搜索结果样式
  4. 4. 部署测试
  5. 5. 最后

前言

在配置 Hexo 博客期间根据参考了很多网上的方法,进行站内搜索集成结果都不太满意:

  1. 百度
    搜索都是以在检索的时候加入site:www.xxx.com 方式进行搜索,体验不是很好
    而且百度这种搜索方式是你提交的 sitemap 链接到百度站内搜索收录才能在搜索结果中显示出来,结果我在测试的时候,
    使用 github 和 gitcafe 进行测试时,发现百度都抓取不了这两个网站的数据了。只能作罢,在我的另一篇文章中有亲测结果,Hexo博客优化配置之–为自己博客添加搜索引擎网页收录
  2. Hexo 自带的 Google Search
    这种和百度的搜索类似,检索的时候加入site:www.xxx.com 方式进行搜索,用起来不爽。
  3. Swiftype
    先后参考了jerryfu: 利用swiftype为hexo添加站内搜索Rimo: 静态博客如何实现站内搜索以及Mjolnir: 基于swiftype应用于Hexo Yilia 主题的站内搜索引擎 的文章,但是很奇怪,总觉得 swiftype 的接口不太稳定,在上面提到的这些博客中,只有Rimo的博客站内搜索是可
    用的,其他的弹出来的搜索结果都是空白,我自己的博客里集成后测试也是空白,只好作罢。
  1. 在 Google 搜索时,输入了site:lulee007.gitcafe.io 意外发现 Google 的另外一个产品 Google Console
    google console
    然后在配置 Google Console 的过程中发现了 Google 提供的自定义搜索,经过配置后发现挺好用(其实还是要先上得了 Google)。
    自定义搜索

创建网站搜索引擎

打开Google 自定义搜索
然后在点击左侧的新增搜索引擎,填写必要的信息:

  • 要搜索的网站->http://lulee007.gitcafe.io/*
    可选的有选择语言和修改搜索引擎名称,最后点创建
    create search engine for web
    创建好之后提示:

    恭喜!
    您已成功创建自定义搜索引擎。

create engine success

配置适合 Yilia 主题的站内搜索

配置搜索引擎

配置搜索引擎布局

点击第三个按钮,选择控制台对创建好的搜索引擎进行配置,进入控制台后点击左边的侧边栏中的外观
配置搜索引擎布局并选择第二个两页,这样会在同一窗口中显示某一网页上的搜索框以及另一网页上的搜索结果。
点击保存并获取代码
setting search engine
提示: 如果不希望搜索结果里带缩略图,点击缩略图,然后选择关闭即可:
show search web thumbnail

获取搜索框代码

点击保存并获取代码后进入设置获取搜索框的代码步骤,点击标题旁边的搜索结果详情,在弹出来的页面来指定搜索结果详情页的完整地址:http://lulee007.github.io/search,然后点保存,接着复制搜索框代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
(function() {
var cx = '015410210664254622126:e2mln2jl_yg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

临时保存起来,待会会用到。
setting search page url

获取搜索结果代码

在点击下一步:获取搜索结果代码后,复制里面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
(function() {
var cx = '015410210664254622126:e2mln2jl_yg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

修改 Yilia 主题

添加搜索按钮

打开themes/yilia/layout/_partial/left-col.ejs文件,在<% if (theme.subtitle){ %>...<%}%>后面添加刚才保存的搜索框代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<% if (theme.subtitle){ %>
<p class="header-subtitle"><%=theme.subtitle%></p>
<%}%>
<!-- 以下是新增的搜索框代码-->
<script>
(function() {
var cx = '015410210664254622126:e2mln2jl_yg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

配置搜索页

打开终端,然后转到博客的根目录下执行新建 page 操作:

1
hexo new page search

这个 page 用来做搜索结果页。打开 search 目录下的 index.md输入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
title: 搜索结果
comments: false
layout: 'page'
toc: false
---
<script>
(function() {
var cx = '015410210664254622126:iaoif_30spo';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

配置搜索结果样式

由于 Google Search 提供的默认样式太难看了,自己手动修改了一些。
打开 Yilia 主题下的source/css/style.styl文件,在文件末尾添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
//google search
.gsc-resultsHeader {
display: none !important;
}
.gsc-result .gs-title {
height: 1.5em !important;
}
.gsc-webResult .gsc-result {
padding: 0px 0 16px 0 !important;
}
.article-entry table {
margin: 0px 0 !important;
}

部署测试

生成 html 文件并部署到网站上:

1
hexo d -g

注意: 请确保能访问的了 Google ,不然搜索框加载不了,自然也搜索不到结果。
打开博客,这是在左侧边栏应该可以看到 Google 自定义搜索框和按钮,输入测试词 hexo进行检索。
google search bar
我这里使用已经配置好的 gitcafe 上的博客进行了演示,
敲回车后,应该会打开博客的新的网页http://lulee007.gitcafe.io/search/index.html?q=hexo
展示搜索到的结果了。
search result

最后

如果检索不到内容,可能需要配合 Google Console 进行提交 站点地图,让 Google 对博客 sitemap 进行抓取
内容之后才行。可以在 Google 搜索 site:lulee007.gitcafe.io 测试能不能检索到你的博客,
lulee007.gitcafe.io替换为你自己的博客。可以参考另一篇文章:Hexo博客优化配置之–为自己博客添加搜索引擎网页收录

本文总阅读量