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

前言

上一节讲到了很多个博客使用的功能,这一节将继续介绍其他的使用功能。

正文

添加RSS

1.安装RSS插件:$ npm install hexo-generator-feed --save
2.对E:\hexo\_config.yml添加如下配置

1
2
3
4
feed:
type: atom
path: atom.xml
limit: 20

3.对E:\hexo\themes\light\_config.yml进行如下配置

1
rss: /atom.xml

4.如果已经有RSS一栏,则不用执行此步。在E:\hexo\themes\light\layout\_partial\header.ejs中,找到<ul></ul>,在<ul></ul>之间添加<li> <a href="/atom.xml">RSS</a> </li>
5.将E:\hexo\_config.yml中的url添加为自己的网址。

1
url: http://opiece.me

添加sitemap

1.安装sitemap插件:$ npm install hexo-generator-sitemap --save
2.对E:\hexo\_config.yml添加如下配置

1
2
sitemap:
path: sitemap.xml

3.访问opiece.me/sitemap.xml,此处记得将opiece.me改成你的域名

添加最新评论

1.在E:\hexo\themes\light\_config.yml的widgets下添加- recent_comments
2.在E:\hexo\themes\light\layout\_widget下添加recent_comments.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
<div class="widget tag">
<h3 class="title">最新评论</h3>
<div class="entry">
<!-- 多说最新评论 start -->
<div class="ds-recent-comments" data-num-items="5" data-show-avatars="1" data-show-time="1" data-show-title="1" data-show-admin="1" data-excerpt-length="70"></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 -->
</div>
</div>

3.在E:\hexo\themes\light\languages\zh-CN.yml添加recent_comments: 最新评论
4.此步是针对本主题的界面优化,其他主题可以自由选择是否合适。在E:\hexo\themes\light\source\css\_partial中添加文件recent_comment.styl,并填入如下代码

1
2
3
4
.ds-recent-comments
li.ds-comment
&:first-child
border-top none !important

5.在E:\hexo\themes\light\source\css\style.styl添加@import '_partial/recent_comment'

添加文章导航

1.在E:\hexo\themes\light\layout\_partial\post\article.ejs找到<%- item.content %>,在<%- item.content %>上方插入如下代码

1
2
3
4
5
6
<% if(!index && item.toc == true){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(item.content) %>
</div>
<% } %>

2.在E:\hexo\themes\light\source\css\_partial\article.styl的最后填入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.toc-article
float right

#toc
background #eee
margin 0 0 10px 20px
padding 12px
line-height 18px
font-size 10px
strong
font-size 15px
ol
margin-top 5px
margin-left 0
.toc
padding 0
li
list-style-type none
.toc-child
padding-left 20px

3.在要使用文章导航的文章首部加入toc: true

添加返回顶部

1.在E:\hexo\themes\light\layout\_partial中添加文件totop.ejs,在文件中添加以下代码,如果你对返回顶部按钮的位置不满意,可以在下面这段代码的style里面进行参数修改,bottom是按钮相对于窗口底部的位置,right是按钮相对于窗口右部的位置。

1
2
3
<div id="totop" style="position:fixed;bottom:150px;right:20px;cursor: pointer;">
<a title="返回顶部"><img src="/imgs/scrollup.png"/></a>
</div>

2.在E:\hexo\themes\light\source\js中添加文件totop.js,在文件中添加以下代码

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
(function($) { 
// When to show the scroll link
// higher number = scroll link appears further down the page:显示返回顶部的位置
var upperLimit = 1000;

// Our scroll link element
var scrollElem = $('#totop');

// Scroll to top speed:回滚速度
var scrollSpeed = 500;

// Show and hide the scroll to top link based on scroll position
scrollElem.hide();
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
if ( scrollTop > upperLimit ) {
$(scrollElem).stop().fadeTo(300, 1); // fade back in
}else{
$(scrollElem).stop().fadeTo(300, 0); // fade out
}
});

// Scroll to top animation on click
$(scrollElem).click(function(){
$('html, body').animate({scrollTop:0}, scrollSpeed); return false;
});
})(jQuery);

3.添加对以上两段代码的引用,在E:\hexo\themes\light\layout\_partial\after_footer.ejs中的最下面,添加以下代码

1
2
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>

4.添加返回顶部按钮的图片,选择自己想要用的图片,将图片复制到E:\hexo\themes\light\source\imgs目录下,并将图片名字改为scrollup.png即可。
5.使用$ hexo ghexo d发布,查看效果。

参考

Hexo折腾笔记(二)博客优化与定制
Hexo博客优化:添加返回顶部功能

如果在搭建过程中,出现任何问题,欢迎留言,我会尽力帮您解决。

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