经过上篇博客,我们搭建起了自己的博客,接下来我们对它做些个性化的定制.
在hexo中,配置文件一共两个(我的hexo安装在F:/blog/),分别是F:/blog/_config.yml
和F:/blog/themes/light/_config.yml
.第一个是全局的配置文件,第二个是主题的配置文件,在继续说之前,我们先来说一下主题安装.
主题安装
这个很简单,在hexo的Github的主页上有个主题栏目,https://github.com/hexojs/hexo/wiki/Themes,里面列出了很多主题.
安装方法很简单1
$ git clone <repository> themes/<theme-name>
举个简单例子,我安装的主题名为light
,请在F:/blog/
目录下执行以下代码1
$ git clone https://github.com/hexojs/hexo-theme-light themes/light
如果你不是在F:/blog/
中执行,请修改后面的路径themes/light为你的路径.基本原理就是把主题下下来,放在themes目录下就OK了,主题安装完毕.
修改全局配置文件 F:/blog/_config.yml
1 | # Hexo Configuration |
至此,全局配置文件修改完毕,你可以hexo g
和hexo s
进行查看.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
39menu:# 导航栏的设置默认只有这两个,还可以添加更多的导航
Home: /
Archives: /archives
# 它就是你页面右边的侧边项目,比如搜索之类,你可以根据自己的需求进行修改,你能用几个widgets可以在F:\blog\themes\light\layout\_widget中进行查看
widgets:# 我这里使用了所有的widgets
- search
- category
- tag
- recent_posts
- tagcloud
excerpt_link: Read More # 可以换成中文的 阅读全文
twitter:
username:
show_replies: false
tweet_count: 5
//默认的一个分享组件,因为主要针对国外,不适合国内我们不使用它
addthis:
enable: false # 把true改为false
pubid:
facebook: true
twitter: true
google: true
pinterest: true
fancybox: true
google_analytics:
rss:
duoshuo_shortname: jackroyal # 多说的用户名
comment_provider:
# Facebook comment
facebook:
appid: 123456789012345
comment_count: 5
comment_width: 840
comment_colorscheme: light
至此,配置文件修改完毕,上面提到了我们不适用disqus的评论组件,使用多说,下面教大家来配置多说
创建多说
首先我们去多说注册一个账号,点击这里
我们点击我要安装,界面如下
shortname就是jackroyal,创建完成后,跳转到如下界面
我们选择通用代码
,点击复制,就行了
配置多说
这里说一个前提,我使用的是light主题,如果你用的是其他主题,接下来的设置可能给我有点区别,但是原理差不多,参考看看
- 我们打开
F:\blog\themes\light\layout\_partial\comment.ejs
这个文件,然后修改后代码如下(如果你不是light主题,可能跟这个不一样,你去找下包含comment的section在哪里,改法还是这样.例如系统默认的landscape主题,下面这段代码就是在article.ejs,它没有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<% if (page.comments){ %>
<!-- 这里添加了一个导航,页面的下面会有一个上一篇,下一篇 -->
<nav id="pagination" >
<% if (page.prev) { %>
<a href="<%- config.root %><%- page.prev.path %>" class="alignleft prev" > <%=page.prev.title %> </a>
<% } %>
<% if (page.next) { %>
<a href="<%- config.root %><%- page.next.path %>" class="alignright next" > <%=page.next.title %> </a>
<% } %>
<div class="clearfix"></div>
</nav>
<!-- 导航结束 -->
<section id="comments">
<!-- 这里是多说的代码,直接把你的代码粘贴到这里就行 -->
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= page.layout %>-<%= page.slug %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
(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>
<% } %>
眼尖的同学可能已经看到我的上面第16行代码与你们的不同,这行代码包括了页面的标题和url,它会根据hexo的配置,由hexo动态生成,所以你把你的代码替换成我的这行代码.1
<div class="ds-thread" data-thread-key="<%= page.layout %>-<%= page.slug %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
至此,多说添加完毕
修复bug
我发现light的主题貌似有个小bug,在F:\blog\themes\light\layout\_partial\article.ejs
中间第27行有这样一行代码1
<if (item.comment && config.disqus_shortname){ >
首先我们,替换config.disqus_shortname为config.duoshuo_shortname.
然后修改item.comment
为item.comments
,因为系统中没有comment这个变量,只有comments这个变量,如果不修改comments,那么item.comment
一直为假,所以一直不成立,就不会显示comments字段了.修改后代码如下1
<if (item.comments && config.duoshuo_shortname){ >
产生的效果如图.
至此,配置hexo,打完收工
enjoy it
参考文献
1 http://zipperary.com/2013/05/29/hexo-guide-3/
2 duoshuo官方Hexo使用教程