分享一个精致实用的HEXO博客小插件：日历云

2018-10-26 by Liuqingwen | Tags: Hexo | Hits

一、前言

最近更新文章的频率比以前高了，在翻阅之前文章的时候发现我的博客页面有一个缺陷：不能快速浏览或者查看与日期相关的文章数据！我的博客主题使用已接近两年，整体来说还是偏于简洁实用型，基本上没有什么其他扩展功能，既然在官方网站没找到合适的插件，也不会自己打造一个插件，就一直保持了下来，现在用起来不便，才到网上搜索查找与日历相关的插件，还真发现了一个精致实用的日历云小插件，捣鼓了一番，用上后感觉非常实用，所以晾出来分享给大家，有需要的朋友可以拿去。 smile

calendar_widget.jpg

另外，如果你还没有创建博客，推荐使用 Hexo 搭建；如果刚创建博客，还在搜寻可用插件，那么可以参考我之前的两篇文章：

Hexo 博客主题非常丰富，根据不同的主题，相应的插件安装和配置都会有稍许差别，我的博客主题是： Phantom Blog Hexo ，并不支持 Widget 功能，如果你是以下两款主题，可以参考原文作者文章：

  • Hexo-theme-light_cn 主题，那么可以直接参考这篇文章： Hexo 主题中添加日历云功能，文章解说非常详细，按步照班即可。
  • Landscape-F 主题，你可以参考这篇文章： Hexo 日历插件 ，博主正是插件的作者：净土。
  • 其他主题，没有日历功能的，可以参考我的方法，在上面两篇文章的基础上加以修改，快速打造一款好用的精美日历云插件，请继续往下看。 smiley

二、正文

安装过程稍许繁杂，大致需要完成以下几个步骤：

  1. 插件的安装，使用插件生成数据文件
  2. 插件的安装位置，即页面显示位置，由你来决定
  3. 插件的表现形式，也就是 CSS 样式，自由修改

准备几个代码文件，已备好下载链接：日历云相关文件，解压后复制到相应位置：

  • calendar.ejs 为 HTML 脚本，放在博客主题的布局文件夹下： [blog_root]/themes/[your_theme]/laout/_widget/calendar.ejs ，我的主题没有 _widget 文件夹的，手动创建即可。
  • calendar.js 和 languages.js 脚本文件，我直接放在了主题的 js 文件夹下： [blog_root]/themes/[your_theme]/source/js/calendar.js ，两个文件一样，用于动态生成日历 HTML 代码。
  • calendar.css 为日历的样式文件，我放在 [blog_root]/themes/[your_theme]/source/css/calendar.css 目录下，如果你使用的是 styl 格式的样式文件，你也可以转化为 CSS 文件或者参考上面提到的博主的文章。

1. 安装插件

和其他插件安装一样，首先需要安装 Calendar 日历插件 hexo-generator-calendar 的渲染源文件，在博客根目录下运行如下命令：

1
cnpm install git://github.com/howiefh/hexo-generator-calendar.git --save

插件安装好之后，如果你使用 hexo g 重新生成博客代码同时，会产生一个 calendar.json 文件在博客的根目录，这也是最重要的数据文件，保存了你的所有文章的标题、链接、日期等信息，内容格式大致如下：

calendar.json
1
2
3
4
5
6
7
{"2018-10":[
    {"title":"Godot3游戏引擎入门之六：制作TileMap瓦片地图","date":"2018-10-19T12:16:24.000Z","link":"/2018/10/19/introduction-of-godot-3-part-6-make-tile-map-in-godot/"},
    {"title":"Godot3游戏引擎入门之七：地图添加碰撞体制作封闭的游戏世界","date":"2018-10-22T12:23:17.000Z","link":"/2018/10/22/introduction-of-godot-3-part-7-add-collision-and-move-player-in-map/"}
    ],
"...":["..."],
"...":["..."]
}

PS: 这里有一个小 BUG ，如果你的博客配置了根目录 root 属性值，也就是说你的博客内容并不是放在服务器根目录，而是某个文件夹，那么 Calendar 插件生成的 JSON 数据文件中的链接 link 将全部无效，这时候需要手动 Hack 一下插件的源代码，当然你的配置是默认值 root: / 可以直接跳过。

以我的博客为例，我在全局配置文件 _config.yml 中配置了博客根目录： root: / 所以内容放在服务器下名为 / 的文件夹下，因此日历上的链接路径也应该加上 / 才能正常跳转，打开安装的插件源码，位置为： [blog_root]/node_modules/_hexo-generator-calendar@0.0.1@hexo-generator-calendar/lib/generator.js 修改代码如下注释部分：

generator.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = function(locals) {
  var rootConfig = this.config; // 添加部分
  //省略代码……

  var posts = locals.posts.sort('date').filter(function(post) {
    return post.published;
  }).map(function(post) {
    return {
      title: post.title,
      date: post.date,
      // 修改链接生成代码
      link: rootConfig.root + post.path // 添加博客根目录
    };
  }).reduce(function(prev, cur, index, array) {
    var key = generateKey(cur.date);

    if (!prev.hasOwnProperty(key)) {
      prev[key] = [];
    }

    prev[key].push(cur);
    return prev;
  }, {});
  //省略代码……

2. 添加JS代码

插件和文件都安装配置好之后，需要添加一段 js 代码，用于渲染页面，在 [blog_root]/themes/[your_theme]/layout/_partial/after_footer.ejs 文件中，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Calendar -->
<% if (config.calendar){ %>
    <script src="<%- config.root %>js/calendar.js"></script>
    <script src="<%- config.root %>js/languages.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#calendar').aCalendar(
                '<%= theme.calendar.language || config.language %>',
                {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'}
            );
            // 下面的代码用于页面测试，可以不添加
            <% if(config.calendar.sample_id){ %>
                $('#<%= config.calendar.sample_id %>').aCalendar(
                    '<%= theme.calendar.language || config.language %>',
                    {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'}
                );
            <% } %>
        });
    </script>
<% } %>

PS: 这里又遇到一个坑，我发现原版 JS 代码并不能正常解析我在主题目录下的配置文件中的相关参数，所以在这里我删除了与配置相关的代码： theme.config.calendar.options ，忽略相关配置参数，然后在 calendar.js 中修改代码如下：

calendar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//省略代码……
$.fn.aCalendar.defaults = {
    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/', //这里我添加了我的博客根目录 blog
    headArrows: {previous: '<span class="cal-prev"></span>', next: '<span class="cal-next"></span>'},
    footArrows: {previous: '« ', next: ' »'},
    weekOffset: 0,
    single: true,
    root: '/calendar/',
    url: '/calendar.json' //这里我添加了我的博客根目录 blog
};

特别注意代码中的两行注释，因为我的博客根目录 root 是在服务器的 / 文件夹下，所以添加了相应的路径，这和博客根目录下的配置文件 _config.yml 相符，可以参考一下我的部分配置：

1
2
3
4
5
6
7
# URL
## If your site is put in a subdirectory, 
## set url as 'http://yoursite.com/child' and root as '/child/'
url: http://liuqingwen.me/blog
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

3. 相关配置

首先在博客根目录下的配置文件 _config.yml 中添加配置参数：

1
2
3
4
5
# Calendar
calendar:
  single: true
  root: calendar/ # only used when single=false
  sample_id: calendar-sample # only for samples in page content

这里最后一个参数 sample_id 是我自己添加的，用于渲染日历插件在某些特定页面上，可以做测试和展示，可以不用添加。

然后在主题根目录下的配置文件 [blog_root]/themes/[your_theme]/_config.yml 中添加配置参数：

1
2
3
4
5
# Calendar
calendar:
  language: zh-CN
  options:
    # 参数忽略

可以看到，因为我修改了 calendar.js 中的代码，这里的 options 参数配置直接忽略了。

4. 展示位置

基本工作都完成了，最后一步就是日历云的页面摆放位置了。这里你可以自由发挥，找到相应位置的源代码添加日历云插件即可！

以我的博客为例，我选择在菜单栏中显示日历最佳，所以找到博客主题的 .../layout/_partial/menu/ejs 菜单栏文件，添加日历云控件代码：

1
2
3
4
5
6
7
8
9
<!-- Menu -->
<nav id="menu">
    <!-- 原代码，省略…… -->

    <!-- 增加日历代码 -->
    <div id="widget-calender-xxx">
        <%- partial('_widget/' + "calendar") %>
    </div>
</nav>

好了，工作全部完成，直接使用 hexo s 启动并查看效果吧！

Calendar Sample

最后，记得修改样式文件 calendar.css ，打造一款完全属于你自己的日历云样式哦！ grin

三、总结

实用！精致！简单！当然，有几个小 BUG 还是需要手动 Hack 一下的，如果有朋友愿意修改一下源代码并提交 PR 更新插件，请告知，非常感谢！

Hexo 中的日历云插件，安装和分享，希望大家喜欢！最后附上文中提到的主要的源文件，下载链接：日历云相关文件。

参考：
Hexo 主题中添加日历云功能： https://www.jianshu.com/p/b9665a8e8282
Hexo 日历插件： http://howiefh.github.io/2016/04/29/hexo-s-calendar-plugin/
我的博客地址： http://liuqingwen.me ，欢迎关注我的微信公众号： IT自学不成才

Hexo
  

Comments: