從博客園還有wordpress站點中都能看到類似于下圖所示的小模塊迫肖，方便查看日歷以及文章發(fā)表的日期迎卤。
之前查看每月寫的文章都是通過歸檔的功能來實現(xiàn)的，顯示年月以及對應月份的文章數(shù)量摩泪，如下圖吼鱼。
但是隨著時間的不斷增長，頁面這塊也會不斷的增長谆奥，于是就想到要用日歷云的小模塊來替代掉目前的歸檔顯示在站點widget區(qū)域眼坏。最終顯示效果如下：
很清晰的看到4月份寫了5篇文章，分別在6酸些、7宰译、12、13以及23號魄懂。點擊對應的日期能直接定位到該日期下的文章沿侈，嘗試一下效果請點擊這里。
這里使用了凈土大哥開發(fā)的小插件市栗，然后「厚顏無恥」的移植到了自己的博客里缀拭，如果使用的是正好凈土大哥的Hexo主題，那么請移步到它的站點-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. 添加相關文件
不想看我啰嗦的，直接看這次commit:Hexo-theme-light_cn@8f1bae1哀蘑，相信你對著源碼能添加上相關文件诚卸。
2.1 js文件
添加JS實現(xiàn)的日歷模塊外框。在主題目錄下source/js目錄下添加下面兩個文件绘迁。
2.2 ejs文件
我們要在widget區(qū)域顯示該模塊合溺，那么在主題目錄layout/_widget目錄下添加calendar.ejs文件，代碼如下：
<div class="widget tag">
<h3 class="title"><%= __('calendar') %></h3>
<div id="calendar"></div>
</div>
提供一個div來顯示日歷云模塊缀台。注意title那塊可以直接寫成日歷云棠赛，如果想實現(xiàn)多語言，那么去主題languages目錄下配置對應語言的calendar字段即可
2.3 styl樣式文件
在主題source/css/_partial/目錄下添加calendar.styl文件膛腐。具體代碼拷貝calendar.styl睛约。其中用到兩個樣式變量確保在source/css/_base/variable.styl文件中已經(jīng)定義好。一個是color-link哲身，一個是color-calendar-post-bg辩涝。
3. 修改相關配置
添加完一些必要的文件后，現(xiàn)在需要對一些現(xiàn)有文件進行修改勘天。
3.1 引入js文件
添加完js文件怔揩，然后在layout/_partial/after_footer.ejs文件中引入js代碼捉邢。添加內容如下：
<!-- 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文件最后一段代碼的相關參數(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'],
這樣潦匈，應該就OK了阱高。通過Hexo g重新生成以下，然后hexo s看看效果是否如上圖所示茬缩。
