预览

upload successful

安装依赖

执行命令

1
npm i hexo-githubcalendar --save

添加配置

要放到hexo根目录下_config.yml文件，非主题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
githubcalendar:
  enable: true        # 是否启用本插件
  enable_page: /      # 要生效的页面，如 / 首页，/about/ 介绍页等
  user: w00123   # 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: "['rgba(255, 255, 255, 0.3)', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" 
  # 推荐填写你自建的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: ""

源代码的不足

我本地测试部署的窗口有的时候会闪过去一些窗口，直到我缩放浏览器后发现原来是浏览器分辨率不一样，每天更新次数的显示数据会飘的很远，以下方式可以修复这个问题

但是这么解决之后，又会有新的bug，所以我决定就这样吧，但是记录一下

修改信息窗口位置

把 tooltip 直接插到 下，而不是插到 #git_tooltip_container 里，这样它一定相对于视口定位：
修改这一行：

1
append_div_gitcalendar(git_tooltip_container, html)

替换为：
1
append_div_gitcalendar(document.body, html)

再让窗口自动消失

替换这段if里面的内容：

1
2
3
4
5
if (document.querySelector('.gitmessage')) {
  git_tooltip_container.innerHTML = "";
}
# 也就是
git_tooltip_container.innerHTML = "";

为这段：
1
2
const old = document.querySelector('.gitmessage');
if (old) old.remove();

注意有两个if，都要替换

自建api

github作者：https://github.com/Zfour/python_github_calendar_api?tab=readme-ov-file
测试方法未根据作者提供的url，在建好的url后加上/api?user=

如果报错500，可根据这位时光大佬的操作修改：https://www.cnblogs.com/an-shiguang/p/18269053

记录500错误处理方法

进入项目选择setting

下拉找到Node.js Version修改版本为18.0
upload successful

重新部署

项目中选择Deployments点击Redeploy即可
upload successful