hexo next主题添加日历云

前言

本文使用theme-next-calendar插件实现日历云模块,具体效果点击链接查看

theme-next-calendar插件官方文档

准备

1.安装theme-next-calendar插件

npm install --save git://github.com/icecory/theme-next-calendar#hexo

2.下载相关文件

注意:按照官方文档中的

git clone --depth=1 git@github.com/icecory/theme-next-calendar themes/next/source/lib/calendar

我的git显示没有此仓库,可以直接去下载压缩包

下载压缩包

趁着下载,找到如下目录

themes/next/source/lib/

在该目录下新建文件夹,名字为calendar.

下载完毕后解压,把里面的文件直接复制到calendar文件夹,如下图

配置

按照官方文档给出方法,我失败了,下面是官方给出的方法:

步骤一:
把sidebar.swig, calendar.styl放到${root}/source/_data目录下,在themes/next/layout/_layout.swig最后加入下面代码
{% include '../source/lib/calendar/calendar.swig' %}
步骤二:
在next主题配置文件_config.yml配置
custom_file_path:
  sidebar: source/_data/sidebar.swig
  styles: source/_data/calendar.styl

CloudCalendar:
  enable: true
  language: zh-CN
  single: true
  root: /calendar/

我的方法:

依据上述步骤二中的在next主题配置文件_config.yml中配置

custom_file_path:
  sidebar: source/_data/sidebar.swig
  styles: source/_data/calendar.styl

我发现我的之前已经配置过了

所以我不打算使用官方的步骤一,由上图看出我的style已经启用,然后我将calendar.styl中的代码直接复制到source/_data/styles.styl中._

依据官方文档,在themes/next/layout/_layout.swig最后加入下面代码

{% include '../source/lib/calendar/calendar.swig' %}

我发现仍然失败,我直接将calendar.swig文件复制到themes/next/layout目录下

然后在themes/next/layout/_layout.swig最后加入下面代码

{% include 'calendar.swig' %}

接下来在next主题配置文件最后加入下面代码

CloudCalendar:
  enable: true
  language: zh-CN #设置语言
  single: true
  root: /calendar/

最后,在你想添加日历云的位置添加下面代码

<!-- CloudCalendar -->
<div class="widget-wrap" style="width: 90%;margin-left: auto;margin-right: auto; opacity: 0.97;">
<div class="widget" id="CloudCalendar"></div>
</div>