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

2016-09-10

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

站内搜索

1. 添加搜索框

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

<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配置下面添加：

.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 文件，内容如下：

<% 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 预览时会出现错误，但是部署在远程服务器时没有这个问题，暂时不知道是何原因。

本文由亦枫创作并首发于 亦枫的个人博客 ，同步推送微信公众号：安卓笔记侠（androidnotebyyifeng）。

欢迎各种形式地交流与转载，注明作者、出处和微信公众号即可。

本文标题为: Hexo 折腾记之站内搜索、百度统计、代码高亮

本文链接为：https://woyifeng.com/2016/09/10/Hexo-search-baidutongji-highlight/