lanbos'blog

hexo装饰(一)

简单的部署完博客之后对博客需要进行一些装饰:

主页文章显示摘要

编辑md文件的时候,在要作为摘要的文字后面添加html的more注释即可。

引入站内搜索模块 swiftype

先看一下引入swifttype后的最终效果:


swiftype官网进行注册,忽略30天试用,基础服务是可以永久免费使用的。
按照指引输入网址、输入引擎名称、创建搜索引擎,之后点击左侧的install Search开始生成代码

复制代码后开始设置_config.yml和ejs模板文件。

1
2
3
4
关于ejs模板
ejs模板是早先nodejs著名网站框架express的默认模板引擎,虽然后来express不知出于什么样的考虑
把ejs更换成了反人类的jade,但是ejs一直是js开发者首选的模板引擎,light主题同样采用了ejs,ejs的语法
简单说来就是在 <% %> 中填写js内容,外部填写html内容。

不同的主题需要更改的模板文件是不同的,只要找到search模块所在的地方就可以更改了,我用的是
light主题,search模块是在/themes/light/layout/_widget/search.ejs中进行更改,找到form标签改为:

1
2
3
4
<form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
<label>站内搜索</label>
<input type="text" id="search" class="st-default-search-input" maxlength="20" placeholder="Search" />
</form>

之后找到处于body底部的模板文件,我的是/themes/light/layout/_partial/after_footer.ejs,把之前从
swiftype网站上拷贝下来的代码添加到文件最后即可。

引入评论模块“多说”

博客中添加评论模块是必不可少的,一些hexo主题中已经默认添加了“多说”评论模块,我的主题light
没有默认添加,需要手动更改ejs文件进行添加。
第一步进入多说官网注册账号,并按照指引点击安装,输入站点名称地址等信息。

点击创建后,得到js代码。然后进入/themes/light/layout/_partial/comment.ejs中把代码改为:

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
<% if ( page.comments){ %>

<nav id="pagination" >
<% if (page.prev) { %>
<a href="<%- config.root %><%- page.prev.path %>" class="alignleft prev" ><%= __('prev') %></a>
<% } %>
<% if (page.next) { %>
<a href="<%- config.root %><%- page.next.path %>" class="alignright next" ><%= __('next') %></a>
<% } %>
<div class="clearfix"></div>
</nav>



<section id="comment">


<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"chillax"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->


</section>
<% } %>

其中short_name记得改成自己的,在之前获得的多说通用代码里有自己的short_name。

网站标签页icon设置

先从网站或者运用ps制作好icon的图片格式最好为png,但是通常网站标签页上的icon格式为ico格式,
很多网站又在线转换工具,可以把png格式的图片转换为ico格式的icon,我这里用的是:http://www.ico.la/,尺寸为32*32
把制作好的ico文件拷贝到/source目录下,然后打开/themes/light/layout/_partial/head.ejs找到:

1
<link href="<%- config.root %>favicon.png" rel="icon">

替换为:

1
<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">

参考引用

hexo干货系列:(五)hexo添加站内搜索
使用swiftype实现站内搜索
hexo搭建博客的实用功能(上)(基于hexo3.0)