本文介绍如何在博客添加GitHub贡献日历(github calendar),中间踩了一些坑,特写此篇,以作记录,效果如下

image-20240619113843887

需要用到的插件及API (这是博主 百里飞洋 基于原开源插件hexo-github-calendar及APIpython_github_calendar_api改造后的,截至目前原项目工具仍有问题,避个雷)

前端Hexo插件:https://github.com/Barry-Flynn/hexo-github-calendar

后端API部署:https://github.com/Barry-Flynn/python_github_calendar_api

作者: 百里飞洋 Barry-Flynn
链接: https://blog.meta-code.top/2022/03/15/2022-41/
来源: 百里飞洋

安装依赖

1
npm i @barry-flynn/hexo-github-calendar --save

或者 使用 cnpm ,速度更快

1
cnpm i @barry-flynn/hexo-github-calendar --save

添加配置

在 Hexo 项目根目录的 _config.yml 文件最后面添加如下配置(注意是在 Hexo 的配置文件中添加,而不是主题的配置文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-github-canlendar
# 贡献度热力图插件 https://github.com/Barry-Flynn/hexo-github-calendar
githubcalendar:
enable: true # 是否启用本插件
enable_page: / # 要生效的页面,如 / 首页,/about/ 介绍页等
user: shiguang-coding # GitHub 用户名
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', '#a2f7af', '#6ce480', '#54ad63', '#469252', '#31753c', '#1f5f2a', '#13531f', '#084111', '#032b09', '#000000']"
# 推荐填写你自建的API接口,公用api随时可能会失效
# api: https://github-calendar-api.meta-code.top/api
api: https://githubcalendarapi.shiguang666.eu.org/api
# 推荐下载后使用本地文件
# calendar_js: https://cdn.jsdelivr.net/gh/barry-flynn/hexo-github-calendar/hexo_githubcalendar.js # 在线文件,容易加载失败
calendar_js: /js/hexo_githubcalendar.js # 本地文件,请下载到主题文件夹的source目录下
plus_style: ""

下载 hexo_githubcalendar.js 到主题文件夹 source目录,例如 themes\butterfly\source\js

然后执行三连命令即可

1
hexo clean && hexo g && hexo s

自建API接口

由于我以及其他博主提供的公共API随时可能失效,所以推荐自建API接口,使用Vercel部署完全免费喔。

新用户可以直接用Github登录,建议重新用google账号或者其他国外账号重新注册个Github账号,因为我之前使用自己的Github账号登录时好像被拒绝了,可能是绑定了国内的邮箱,有地域限制之类的。

先将 python_github_calendar_api By Barry-Flynn Fork 到自己的Github

登录 Vercel Add New.. => Project

image-20240619121501241

搜索刚才导入的项目,当然如果仓库不是很多的话可以直接看到最近创建的仓库,点击 import导入

image-20240619121729024

然后点击Deploy 进行部署

image-20240619121855674

等待片刻出现撒花即部署成功

image-20240619122030706

然后可以绑定自己的域名,否则服务可能会因为DNS污染导致被墙无法正常使用

可直接点击 Add Domain

image-20240619122212573

或者到 Settings => Domains 添加域名

image-20240619122451971

例如此处我要添加的域名为 shiguangcalendarapi.shiguang666.eu.org

添加后提示需要添加一条CNAME记录指向cname.vercel-dns.com

image-20240619130253564

按照提示添加一条CNAME记录

image-20240619130120327

为了提升访问速度也可以使用加速节点 vercel.cdn.yt-blog.top 或者 vercel.cdn.cyfan.top

image-20240619125919198

关于加速节点的介绍可参考文章 推一下 Vercel 加速节点

或者使用IP进行解析,我们可以Ping一下 cname.vercel-dns.com 的ip为 76.76.21.22

image-20240619124936025

可以添加一条A记录指向 76.76.21.22 或者 76.76.21.21

image-20240619125234763

添加解析记录后页面会自动刷新,等待片刻校验即可通过

image-20240619125959076

检验通过后可直接点击域名进行预览

image-20240619130516643

如果刷新多次访问均提示无法访问可尝试更换其他域名

image-20240619124751368

提示404错误页面,可以忽略,我们实际访问的路径其实是 /api?user=xxxxx

如果依然提示 INTERNAL_SERVER_ERROR 500错误,错误码 FUNCTION_INVOCATION_FAILED则说明当前

Node的版本不支持。

image-20240619131151146

将默认Node版本从20.x 改为 18.x

image-20240619131459785

保存后 打开 Deployments 页面 选择 Redeploy 进行重新部署

image-20240619131607548

重新部署成功后再次刷新刚才的页面可以显示数据即代表部署完成

image-20240619131816432

然后修改配置文件就可以使用你自己的API了

1
2
githubcalendar:
api: https://shiguangcalendarapi.shiguang666.eu.org/api

问题处理

最近发现重新加载npm依赖后可能会出现一个空白框

image-20240621195552906

后台报错

1
2
TypeError: Cannot read properties of undefined (reading 'length')
at hexo_githubcalendar.js:192:49

解决方法:

删除博客根目录 node_moduleshexo-github-calendar 文件夹以及博客根目录下 package.json 文件里 dependencies 引入的hexo-github-calendar 依赖

然后重新安装依赖

1
npm i @barry-flynn/hexo-github-calendar --save

推荐使用 cnmp 安装

1
cnpm i @barry-flynn/hexo-github-calendar --save

重新生成网页文件

1
hexo g