继上一篇Hexo3.2+GitHub搭建静态博客

1.主题

Hexo提供了很多主题,具体可参见Themes|Hexo,这里我选择默认主题landscape(此主题默认已安装)。

1.1安装主题

将Git Shell切换到根目录,执行下列命令,将主题下载到themes/spfk目录下:

1
$ git clone https://github.com/hexojs/hexo-theme-landscape.git themes/landscape

获取landscape主题的最新版本:

1
2
$ cd themes/landscape
$ git pull

修改在根目录下_config.yml 配置:

1
theme: landscape

2.修改添加分享链接

2.1原生分享的修改

themes\landscape\source\js\script.js中,57行 <div class="article-share-links">下面的四个链接就是 Facebook 等社交网站的分享链接。将其替换或添加如下代码,即可实现分享到国内社交网站:

1
2
3
4
'<a href="http://service.weibo.com/share/share.php?&title=好东西就要一起分享&language=zh_cn&url=' + encodedUrl + '" class="article-share-sina" target="_blank" title="微博"></a>',
'<a href="http://share.renren.com/share/buttonshare.do?link=' + encodedUrl + '" class="article-share-renren" target="_blank" title="人人"></a>',
'<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodedUrl + '" class="article-share-qq" target="_blank" title="QQ空间"></a>',
'<a href="http://qr.liantu.com/api.php?text=' + encodedUrl + '" class="article-share-wechat" target="_blank" title="微信"></a>',

同时,还需要替换图标。本主题使用 Font Awesome 来显示图标,但内置的 Font Awesome 版本较旧,无法显示 QQ、微信等图标,所以,需要下载最新版 Font Awesome,替换掉 themes\landscape\source\css\fonts中相关文件,并在themes\landscape\source\css\_variables.styl中27行的 font-icon-version 修改为最新的 Font Awesome 版本号。

然后,在 themes\landscape\source\css\_partial\article.styl 中,找到四段以 .article-share-***开头的代码(273行起),添加如下内容:

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
.article-share-sina
@extend $article-share-link
&:before
content: "\f18a"
&:hover
background: color-sina
text-shadow: 0 1px darken(color-sina, 20%)
.article-share-qq
@extend $article-share-link
&:before
content: "\f1d6"
&:hover
background: color-qq
text-shadow: 0 1px darken(color-qq, 20%)
.article-share-renren
@extend $article-share-link
&:before
content: "\f18b"
&:hover
background: color-renren
text-shadow: 0 1px darken(color-renren, 20%)
.article-share-wechat
@extend $article-share-link
&:before
content: "\f1d7"
&:hover
background: color-wechat
text-shadow: 0 1px darken(color-wechat, 20%)

最后,找到 themes\landscape\source\css\_variables.styl 中 Colors 部分(16行),最后四行分别为社交网站图标的背景色,可根据这些网站的主题色修改。

1
2
3
4
color-sina = #ff8140
color-qq = #ffcc33
color-renren = #227dc5
color-wechat = #44b549

2.2加入百度分享

首先在_config.yml中增加bdshare_shortname: 你站点的short_name,这里的short_name也就是你的二级域名。

1
bdshare_shortname: http://chaooo.github.io/

在百度分享获取代码后,代码可分为两部分。
themes\landscape\layout\_partial\article.ejs中第26行插入第一段代码并添加判断条件,若当前页为文章展开页则显示百度分享框,若是缩略则采用原生分享链接,避免百度分享框获取的 URL 错误:

1
2
3
4
5
6
7
8
<% if ((page.layout == 'post'|| page.layout == 'page')){ %>
<div class="bdsharebuttonbox"><span style="float:left;line-height:16px;height:16px;margin: 6px 6px 6px 0;">分享到:</span><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到Facebook" href="#" class="bds_fbook" data-cmd="fbook"></a><a title="分享到一键分享" href="#" class="bds_mshare" data-cmd="mshare"></a><a href="#" class="bds_more" data-cmd="more"></a></div>
<% } else { %>
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
<% } %>
<!-- Baidu Share Start -->
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"好东西就要一起分享~","bdMini":"2","bdMiniList":["mshare","qzone","tsina","weixin","sqq","douban","tqq","renren","kaixin001","tqf","linkedin","ty","fbook","twi","copy","print"],"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{},"image":{"viewList":["mshare","weixin","qzone","tsina"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["mshare","weixin","qzone","tsina"]}};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>
<!-- Baidu Share End -->

3.加入多说评论

首先在_config.yml中增加duoshuo_shortname: 你站点的short_name,这里的short_name也就是你的二级域名。

1
duoshuo_shortname: http://chaooo.github.io/

如果使用的是默认的landscape主题只需要修改themes\landscape\layout\_partial\article.ejs中的disqus评论:

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.path %>" data-title="<%= post.title %>" data-url="<%= post.url %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"chaooo"};
(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>
<% } %>

如果是其他主题,也只需要修改主题\layout_partial\comment.ejs
注意多说的Thread Key一定不要改变,Thread Key相当于是识别码;如果改变了的话,评论清空。

4. 侧栏微博秀

登录新浪微博开放平台来获取微博秀的代码,将其样式调整与主题一致,关掉各种边框和标题栏。然后新建themes/landscape/layout/_widget/weibo.ejs这个文件,将刚刚获取到的代码添加到这个文件中。最后编辑themes/landscape/_config.yml,在widgets:标签后面的适当位置添加- weibo。这样微博秀应该就可以显示在你的博客上了。

1
2
3
4
5
6
<div class="widget-wrap">
<h3 class="widget-title">微博</h3>
<div class="widget" style="padding: 0">
<iframe width="100%" height="400" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=400&fansRow=2&ptype=1&speed=0&skin=2&isTitle=0&noborder=0&isWeibo=1&isFans=0&uid=1700139362&verifier=85be6061&colors=d6f3f7,dddddd,555555,837f86,cccccc&dpc=1"></iframe>
</div>
</div>

其中,<iframe...></iframe>为获取微博秀的代码。