Hexo 折腾记之站内搜索、百度统计、代码高亮

备注:以下内容均基于yilia主题样式的修改。

站内搜索

1. 添加搜索框

修改left-col.ejs文件,在<header id="header" class="inner">代码下面添加:

1
2
3
4
<form class="search" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="text" id="chillax-search-input" class="st-search-input_my" maxlength="30" placeholder="search" autocomplete="off" autocorrect="off" autocapitalize="off">
</form>

修改main.styl文件,在.intrude-less配置下面添加:

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
.search {
padding: 1em 0 0 2.5em;
}
.search input {
line-height: 1.8em;
border: 1px solid color-white;
color: color-white;
background: transparent;
padding-left: 4em;
}
@media tablet {
.search input {
width: 4em;
-webkit-transition: 0.5s width;
-moz-transition: 0.5s width;
-ms-transition: 0.5s width;
transition: 0.5s width;
}
.search input:focus {
width: 8em;
}
}
.search label {
display: none;
}
form input.st-search-input_my {
font-size: 12px;
padding: 4px 9px 4px 27px;
height: 20px;
width: 190px;
position: absolute;
left: 32px;
top: 70px;
color: #666;
border: 1px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
-moz-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
-webkit-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
outline: none;
background: #fcfcfc url("/img/search.png") no-repeat 7px 7px;
}

2. 添加 Swiftype 搜索功能

参考博客:

百度统计

yilia主题添加百度统计的过程可以参考谷歌统计,大致流程如下:

  • 编辑 yilia/_config.yml 文件,添加如下代码:
1
baidu_tongji: true
  • 新建 yilia/layout/_partial/baidu_tongji.ejs 文件,内容如下:
1
2
3
4
5
<% if (theme.baidu_tongji) { %>
<script type="text/javascript">
#申请的百度统计代码
</script>

<% } %>
  • 编辑 yilia/layout/_partial/head.ejs文件,在 </head> 语句上面添加:
1
<%- partial("baidu_tongji") %>

代码高亮

Hexo 自动集成了 highlight.js ,所以在编辑文章时,可以在代码块的标识符号后面添加对应代码的语言标识即可,目前支持的语言及其标识可参考地址:

http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

补充:Hexo优化之使用Google Prettify高亮代码

菜单页分类

yilia 主题的菜单页分类功能,比如在 归档 下面添加 /categories/Android ,在本地服务 localhost:4000 预览时会出现错误,但是部署在远程服务器时没有这个问题,暂时不知道是何原因。