從博客園還有wordpress站點(diǎn)中都能看到類似于下圖所示的小模塊，方便查看日歷以及文章發(fā)表的日期。
之前查看每月寫的文章都是通過歸檔的功能來實(shí)現(xiàn)的，顯示年月以及對應(yīng)月份的文章數(shù)量，如下圖。
但是隨著時(shí)間的不斷增長，頁面這塊也會(huì)不斷的增長，于是就想到要用日歷云的小模塊來替代掉目前的歸檔顯示在站點(diǎn)widget區(qū)域。最終顯示效果如下：
很清晰的看到4月份寫了5篇文章，分別在6、7、12、13以及23號。點(diǎn)擊對應(yīng)的日期能直接定位到該日期下的文章，嘗試一下效果請點(diǎn)擊這里。
這里使用了凈土大哥開發(fā)的小插件，然后「厚顏無恥」的移植到了自己的博客里，如果使用的是正好凈土大哥的Hexo主題，那么請移步到它的站點(diǎn)-Hexo日歷插件 | 凈土。
如果使用的Hexo-theme-light_cn主題或者想移植到其他主題下，接著往下看。
1. 安裝hexo-generator-calendar插件
npm install --save git://github.com/howiefh/hexo-generator-calendar.git
目的是為了產(chǎn)生文章日期信息的calendar.json文件,后續(xù)通過前端Ajax取得日歷數(shù)據(jù)，最終展示成日歷表格。
2. 添加相關(guān)文件
不想看我啰嗦的，直接看這次commit:Hexo-theme-light_cn@8f1bae1，相信你對著源碼能添加上相關(guān)文件。
2.1 js文件
添加JS實(shí)現(xiàn)的日歷模塊外框。在主題目錄下source/js目錄下添加下面兩個(gè)文件。
2.2 ejs文件
我們要在widget區(qū)域顯示該模塊，那么在主題目錄layout/_widget目錄下添加calendar.ejs文件，代碼如下：
<div class="widget tag">
<h3 class="title"><%= __('calendar') %></h3>
<div id="calendar"></div>
</div>
提供一個(gè)div來顯示日歷云模塊。注意title那塊可以直接寫成日歷云，如果想實(shí)現(xiàn)多語言，那么去主題languages目錄下配置對應(yīng)語言的calendar字段即可
2.3 styl樣式文件
在主題source/css/_partial/目錄下添加calendar.styl文件。具體代碼拷貝calendar.styl。其中用到兩個(gè)樣式變量確保在source/css/_base/variable.styl文件中已經(jīng)定義好。一個(gè)是color-link，一個(gè)是color-calendar-post-bg。
3. 修改相關(guān)配置
添加完一些必要的文件后，現(xiàn)在需要對一些現(xiàn)有文件進(jìn)行修改。
3.1 引入js文件
添加完js文件，然后在layout/_partial/after_footer.ejs文件中引入js代碼。添加內(nèi)容如下：
<!-- add 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 || config.language %>', $.extend(<%- JSON.stringify(theme.calendar.options ) %>, {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'});
<% }else{ %>
$('#calendar').aCalendar('<%= theme.calendar.language || config.language %>',{single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'});
<% } %>
});
</script>
<% } %>
3.2 主題配置文件_config.yml
在widgets下添加calendar，位置自定。然后在最后添加上calendar插件的配置代碼：
calendar:
language: zh-CN
只定義了語言language為中文，這樣的配置就足夠了。如果想自定義的話，可以修改calendar.js文件最后一段代碼的相關(guān)參數(shù)，或者將參數(shù)填寫在主題_config.yml里。例如：
calendar:
language: zh-CN
options:
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
這樣，應(yīng)該就OK了。通過Hexo g重新生成以下，然后hexo s看看效果是否如上圖所示。
