在任意hexo主题博客中添加github日历

前言：在博客中添加github的commit的日历，在我博客中的使用的效果如下图：

与其说在任意hexo主题博客中添加github日历，倒不如说是hexo-githubcalendar的使用。

安装hexo-githubcalendar

1
2
3
npm i hexo-githubcalendar --save
# 或者
cnpm i hexo-githubcalendar --save

注意，一定要加 --save，不然本地预览的时候可能不会显示！！！

新增根目录_config 配置项 (不是主题的)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete乐特
githubcalendar:
  enable: true  # true/false,是否开启插件
  enable_page: /blog/about/ # 路由地址，如我的 /blog/是代表网站的root主页。/blog/about/代表的是关于页等等
  user: helloworld # github 或者 gitee 用户名
  layout:
    type: id
    name: recent-posts
    index: 0
  githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
  pc_minheight: 280px
  mobile_minheight: 0px
  color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
  api: https://python-github-calendar-api.vercel.app/api
  # api: https://python-gitee-calendar-api.vercel.app/api
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
  plus_style: ""

更多主题配置请前往：https://github.com/Zfour/hexo-github-calendar/issues
也欢迎共享自己的配置和进行修改。

接下来来简单说明其他一些配置项的含义：

layout

参数：type; （class&id）
参数：name;
参数：index；（数字）
含义：如果说 gihubcalendar 是一幅画，那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。
最后墙的名字即是 name;

1
2
3
4
5
6
7
8
<div name="我是墙" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载githubcalendar，也就是画画-->
    </div>
  </div>
</div>

githubcalendar_html

参数：html 模板字段
含义：包含 loading，和挂载容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="recent-post-item" style="width:100%;height:auto;padding:10px;">
  <!--这个是画框，顾名思义就是借用文章样式给加个框-->
  <!--这个是loading的样式，可自行调整-->
  <div
    id="github_loading"
    style="width:10%;height:100%;margin:0 auto;display: block"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 50 50"
      style="enable-background:new 0 0 50 50"
      xml:space="preserve"
    >
      <path
        fill="#d0d0d0"
        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
        transform="rotate(275.098 25 25)"
      >
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="rotate"
          from="0 25 25"
          to="360 25 25"
          dur="0.6s"
          repeatCount="indefinite"
        ></animateTransform>
      </path>
    </svg>
  </div>

  <!--这个是github_containner容器，也就是纸-->
  <div id="github_container"></div>
</div>

PS：已经配置过早期版本 GitHubcalendar 的用户该如何适配？
其实很简单，首先将原有的 js 去除。然后只需 layout_id 改为原先挂载的 idgitcalendar，再将 html模板字段中的画框的 class="recent-post-item" 去除，即可适配新版的 npm 版插件。或者你可以采用后续介绍的方案二进行更新。

pc_minheight

参数：280px
含义：电脑端插件的最小高度，减少加载带来的视觉偏移

mobile_minheight

参数：0px
含义：手机端插件的最小高度，减少加载带来的视觉偏移

color

参数：“[‘#ebedf0’, ‘#fdcdec’, ‘#fc9bd9’, ‘#fa6ac5’, ‘#f838b2’, ‘#f5089f’, ‘#c4067e’, ‘#92055e’, ‘#540336’, ‘#48022f’, ‘#30021f’]”
含义：calendar 的主题色

1
2
3
4
5
# 以下色调选择喜欢的一行保留即可。其余注释。—————akilar的糖果色
color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
# color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
# color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
# color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调

api

参数：https://python-github-calendar-api.vercel.app/api
或 https://python-gitee-calendar-api.vercel.app/api
含义：这里提供的是公用的 api，仅供日常使用，请不要滥用。如果想搭建自用 api，具体的部署方案可看考 python_github_calendar_api 及 python_gitee_calendar_api 的文档说明，这里不多加赘述。

calendar_js

参数：https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
含义：jsd 加速的 js，将 github calendar 挂载入容器中
目前已知 bug：在 1.21 适配 retina 屏幕后虽解决了模糊问题，但部分用户的 tooltip 会出现数据错误。降级到 @1.16 使用即可解决。

plus_style

参数：“”
含义：提供可自定义的 style

挂载

如果你想在友链或者个人介绍挂载，你可以在 md 中增加墙 —— 也就是具有某一的 id 的 div。因为是在 md 中所以通过去掉 class 隐藏画框的样式，即可。同时需要调整 enable_page 来限定展示的页面。如我的配置如下，同理可扩展至其他主题。总的来说就是，如果你是 butterfly 主题，你需要修改用户名即可，如果你是其他主题用户，你可以尝试使用墙 > 画框 > 画的方式挂载，也可以通过修改主题模板来挂载。如给萌典主题加上 git-calendar 的方法。

执行hexo clean && hexo g && hexo s，你就能看到效果惹。

参考：https://zfe.space/post/hexo-githubcalendar.html

#Hexo
在任意hexo主题博客中添加github日历
https://www.gishai.top/blog/posts/91dc324b.html
作者
Hai
发布于
2021年4月18日
更新于
2022年6月10日
许可协议