2.11 添加日历云挂件

这是个比较实用的小挂件，类似于归档的功能。之前一篇文章介绍过它，这里再旧文重谈一遍。

在这个主题下的最终显示效果如图所示：

这里使用的是净土大哥开发的小插件，然后「厚颜无耻」的移植到了自己的博客里，下面就教大家如何主题中自定义这个小挂件。

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/目录下，点击下面链接可以查看。

• landscape-x/calendar.js

• landscape-x/languages.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/目录下，点击下面链接查看。

• landscape-x/calendar.styl

添加完样式文件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一项；一个是添加日历云的简单配置。