hexo搭建博客的实用功能(上)(基于hexo3.0)

前言

在上一节中,我们已经学会了使用hexo搭建博客,并且可以使用hexo发布博文。在这一节中,将介绍一些实用的功能,有了这些功能,博客系统看起来会更好用、好看和充实。

使用工具来写文章

如果您还在使用记事本,或者是notepad++来写您的博客文章,那么我强烈建议您使用MarkdownPad,界面图如下,您可以边写边看到效果。不过这个效果对于有些命令并不管用,但这不影响MarkdownPad成为一款出色的Markdown编辑软件。

添加“多说”评论

正如你们看到的,我的每篇文章最下面都有一个用于评论的功能,如果要自己搞一个评论系统,估计得费不少功夫,但是多说已经帮我们实现了这个功能,我们只需要拿来用即可。步骤如下:
1、进入多说,注册一个帐号,然后点击安装创建一个站点,获得通用代码(建议使用稳定版)。
2、两种情况。
第一种情况:如果您是使用的是light主题和基于light改善的主题,或者说您的E:\hexo\themes\light\layout\_partial文件夹下有comment.ejs,则将E:\hexo\themes\light\layout\_partial\comment.ejs的代码改成如下代码,其中short_name记得改成您自己的,在通用代码里可以看得到您的short_name。

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>
<% } %>

第二种情况:如果您的E:\hexo\themes\light\layout\_partial文件下没有comment.ejs,则首先在E:\hexo\themes\landscape\_config.yml中添加多说的配置:

1
duoshuo_shortname: 你站点的short_name

然后修改E:\hexo\themes\landscape\layout\_partial\article.ejs模板,修改如下。
把(在article.ejs文件的底部)

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.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>
<% } %>

此处short_name不需要更改。

添加百度分享

打开E:\hexo\themes\light\layout\_partial\article.ejs,找到<%- partial('post/tag') %>,然后看<%- partial('post/tag') %>下面有没有一行代码为<%-partial('post/share')%>,如果有则删除。然后在<%- partial('post/tag') %>下方添加如下代码,或者您也可以选择自己去百度分享获取代码。

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
<div class="bdsharebuttonbox">
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_count" data-cmd="count"></a>
</div>
<script>
window._bd_share_config=
{
"common":{
"bdSnsKey":{},
"bdText":"",
"bdMini":"2",
"bdMiniList":false,
"bdPic":"",
"bdStyle":"0",
"bdSize":"24"
},
"share":{},
"image":{
"viewList":["qzone","tsina","tqq","renren","weixin","fbook","twi"],
"viewText":"分享到:",
"viewSize":"24"
},
"selectShare":{
"bdContainerClass":null,
"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin","fbook","twi"]
}
};
with(document)0[
(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)
];
</script>

添加小图标

本博客为海贼王图标。打开E:\hexo\themes\light\layout\_partial\head.ejs,搜索<link href="<%- config.root %>favicon.png" rel="icon">,如果找不到,就搜索<link rel="icon" href="<%- theme.favicon %>">,替换为<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">,然后将名字为favicon.ico的图标放在E:\hexo\themes\light\source目录下。

添加分类、标签云widget

E:\hexo\themes\light\_config.yml中,添加如下代码:

1
2
3
widgets:
- category
- tagcloud

添加友情链接和简介widget

添加简介
1、在E:\hexo\themes\light\layout\_widget下新建名为intro.ejs的文件,编辑内容如下(可根据自身情况修改)。

1
2
3
4
5
6
7
8
9
10
11
<div class="widget tag">
<h3 class="title">简介</h3>
<ul class="entry">
<li>本体:黄俊辉</li>
<li>外文:chillax | grace</li>
<li>现状:上海实习ing</li>
<li>职位:Java开发工程师</li>
<li>QQ :123411739</li>
<li>邮箱:jhhuang1993@foxmail.com</li>
</ul>
</div>

2、在E:\hexo\themes\light\_config.yml中,添加如下代码:

1
2
widgets:
- intro

添加友情链接
E:\hexo\themes\light\layout\_widget下新建名为blogroll.ejs的文件,编辑内容如下(可根据自身情况修改)。

1
2
3
4
5
6
<div class="widget tag">
<h3 class="title">友情链接</h3>
<ul class="entry">
<li><a href="http://huangjunhui.gitcafe.io/" title="Chillax's Blog">Chillax</a></li>
</ul>
</div>

2、在E:\hexo\themes\light\_config.yml中,添加如下代码:

1
2
widgets:
- blogroll

添加新浪微博秀widget

1、在新浪微博开发平台设置自己想要的微博秀样式,并复制生成的代码。
2、在E:\hexo\themes\light\widget中新建名为weibo.ejs的文件,并将刚才微博秀获得的代码直接保存在该文件下。
3、在E:\hexo\themes\light\_config.yml中,添加如下代码:

1
2
widgets:
- weibo

添加导航栏中的“关于”

1、在Git Bash下执行命令$ hexo new page "about"
2、到E:\hexo\source\about下找到index.md,编辑自己想要的内容,格式和发普通文章一样。
3、在E:\hexo\themes\light\_config.yml中,添加如下代码:

1
2
menu:
关于: /about

参考

hexo系列教程:(四)hexo博客的优化技巧

结束语

在下一节中,我们将介绍其他几种实用的功能,欢迎跟随。

版权声明:本文为博主原创文章,转载请注明出处 Chillax’s Blog