这是个比较实用的小挂件，类似于归档的功能。之前一篇文章介绍过它，这里再旧文重谈一遍。
在这个主题下的最终显示效果如图所示：
这里使用的是净土大哥开发的小插件，然后「厚颜无耻」的移植到了自己的博客里，下面就教大家如何主题中自定义这个小挂件。
1. 安装hexo-generator-calendar插件
安装插件很简单，在Hexo博客目录下，输入下面一条命令即可。
npm install --save git://github.com/howiefh/hexo-generator-calendar.git
这个小模块的作用是在你hexo g的时候，同时生成一个包含文章日期信息的json文件，你可以在public目录下找到这个文件，就是calendar.json文件。
2. 添加相关文件
这个日历小挂件是通过js来实现的，首先添加两个js文件，放在主题目录下source/js/目录下，点击下面链接可以查看。
添加完js文件后，需要在页面中引用，打开layout/_partial/after-footer.ejs文件，添加下面一段代码引用到页面中。
<!-- calendar widget -->
<% if (theme.widgets.indexOf('calendar') != -1){ %>
<script src="<%- config.root %>js/calendar.js"></script>
<script src="<%- config.root %>js/languages.js"></script>
<script type="text/javascript">
$(function() {
<% if (theme.calendar.options){ %>
$('#calendar').aCalendar('<%= theme.calendar.language %>', $.extend(<%- JSON.stringify(theme.calendar.options ) %>, {single:<%= theme.calendar.single %>, root:'<%= theme.calendar.root %>'});
<% }else{ %>
$('#calendar').aCalendar('<%= theme.calendar.language %>',{single:<%= theme.calendar.single %>, root:'<%= theme.calendar.root %>'});
<% } %>
});
</script>
<% } %>
然后添加一个日历挂件的样式文件calendar.styl，保存在主题目录下source/css/_partial/目录下，点击下面链接查看。
添加完样式文件calendar.styl后，需要在source/css/style.styl文件中引用一下，添加下面一句代码：
@import "_partial/calendar"
最后添加页面代码，以小挂件的形式展现，在layout/_widget/下新建calendar.ejs文件，添加代码如下；
<div class="widget-wrap">
<h3 class="widget-title">日历云</h3>
<div class="widget">
<div id="calendar"></div>
</div>
</div>
3. 添加相关配置
添加完页面文件，样式文件等等之后，简单做下配置就完成了。打开主题配置文件_config.yml添加如下配置：
widgets:
- weixin
- calendar
# 日历云
calendar:
language: zh-CN
一个是在widgets中添加calendar一项；一个是添加日历云的简单配置。
