给博客导航栏添加日历
美观的博客一般都有事件日历，如wordpress日历插件一般，使用户一眼就能看出本月有哪些天推送了博文，方便按时间查找文档。本文将详述Hexo博客侧边栏如何添加日历。
安装日历插件
使用PowerShell进入博客目录，执行以下命令：
1
| npm install --save git://github.com/howiefh/hexo-generator-calendar.git
|
即可安装calendar插件。
添加JS文件
此外还需在如下目录添加文件
\blog\themes\landscape\layout_widget\calendar.ejs
\blog\themes\landscape\source\js\languages.js
\blog\themes\landscape\source\js\calendar.js
\blog\themes\landscape\source\css_partial\calendar.styl
在\blog\themes\landscape\source\css_variables.styl中添加如下代码：
1
| color-calendar-border = #d1d1d1 color-calendar-post-bg = #007acc color-calendar-hover-bg = #686868
|
在\blog\themes\landscape\layout_partial\after-footer.ejs中添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <% if (theme.widgets.indexOf('calendar') != -1){ %>
<%- js('js/languages') %>
<%- js('js/calendar') %>
<script type="text/javascript">
$(function() {
<% if (typeof theme.calendar.options === 'object') { %>
$('#calendar').aCalendar('<%= theme.calendar.language || config.language %>', $.extend(<%- JSON.stringify(theme.calendar.options) %>, {root:'<%= config.root %>', calendarSingle:<%= config.calendar.single %>, calendarRoot:'<%= config.calendar.root %>'}));
<% } else { %>
$('#calendar').aCalendar('<%= theme.calendar.language || config.language %>', {root:'<%= config.root %>', calendarSingle:<%= config.calendar.single %>, calendarRoot:'<%= config.calendar.root %>'});
<% } %>
});
</script>
<% } %>
|
设置配置文件
在博客根目录配置文件_config.yml中添加如下代码：
1
2
3
| calendar:
single: true
root: calendar/
|
在主题\blog\themes\landscape目录下的配置文件config.yml中添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 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']
postsMonthTip: 'Posts published in LMM yyyy'
titleFormat: 'yyyy LMM'
titleLinkFormat: 'archives/yyyy/MM/'
headArrows: {previous: '<span class="cal-prev"></span>', next: '<span class="cal-next"></span>'}
footArrows: {previous: ' ', next: ' '}
weekOffset: 0
calendarSingle: false
calendarRoot: 'calendar/'
calendarUrl: 'calendar.json'
|
完成上述设置后，博客的侧边栏中就添加好了日历。
版权声明
Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于Scholar’s Blog博客，版权所有，侵权必究。
本文永久链接：https://scholargeek.github.io/2019/07/30/Hexo%E5%8D%9A%E5%AE%A2%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%E7%9A%84%E4%BF%AE%E6%94%B9%E4%B8%8E%E7%BE%8E%E5%8C%9615/