把github贡献日历部署到博客上(一)

原文：https://blog.c12th.cn/archives/5.html

前言

该教程与原教程 大同小异 。

原教程源自 小冰 大佬

由于github规则频繁更新，源码仓库api/index.py，会根据Github规则改动，所以最新源码可查看：小冰的issues 或者 我的仓库 我的可能不是最新=3=

---

效果展示

---

教程

公共 api

• 插件的原理和部署的教程 小冰 大佬 在 原文 已经说得很详细了，这里直接演示 简化版 。

1. 下载 插件

  npm i hexo-githubcalendar --save

2. 在 博客 根目录 _config.yml 配置文件，增加以下内容 （2024.3.31更新）

# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete乐特
githubcalendar:
  enable: true
  enable_page: /
  user: user=zfour
  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://npm.elemecdn.com/reverse-stu-allversions@1.0.1/butterfly/diy/hexo_githubcalendar.js
  plus_style: ""

3. 修改配置 （2024.3.31更新）

• 改为自己的 github / gitee 的用户名

  user: user=zfour

• 默认 github ，如用 gitee 换成下面的 Vercel域名被墙，推荐 自搭 api （2024.3.31更新）

  由于github规则频繁修改，所以还是自搭吧......

• 由于cdn的原因我换了个cdn 哪个速度快用哪个

  calendar_js: https://npm.elemecdn.com/reverse-stu-allversions@1.0.1/butterfly/diy/hexo_githubcalendar.js
  # calendar_js: https://unpkg.com/reverse-stu-allversions@1.0.1/butterfly/diy/hexo_githubcalendar.js 

• 颜色 配置源自 店长 大佬

  color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
  # color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
  # color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调

• 保存配置后，三连

  hexo clean && hexo g && hexo s

---

自搭 api

• 除了用提供的 公共api 外，还可以 自搭api 。 小冰 大佬 在 github 仓库 也发布了详细的教程，这里也是 简化版 。

1. 注册一个 Vercel 账号

2. 点击 + New Project

3. 选择 Import Third-Party Git Repository →

4. 填入 https://github.com/Zfour/python_github_calendar_api ，点击 Continue

  https://github.com/Zfour/python_github_calendar_api

5. 选择 储存库 ，这里我以 Github 为例，选择 Github

6. 默认 勾选 Create private Git Repository ，点击 Create ，部署需等待几分钟

7. 部署完毕后在 DOMAINS 会出现提供的域名，访问域名：访问格式 域名/api?user=用户名 （2024.3.31更新）

  域名/api?user=用户名

8. 有数据反馈 ，则表示搭建成功

9. 把 公共 api 改为 自搭 api 即可, 注意格式

-   api: https://python-github-calendar-api.vercel.app/api
+   api: 域名/api

10. 如搭建的是 gitee ，则把填入 链接 换成 https://github.com/Zfour/python_gitee_calendar_api ，其余步骤同上 。

  https://github.com/Zfour/python_gitee_calendar_api

11. 保存配置后，三连

  hexo clean && hexo g && hexo s

---

补充

第二篇 把github贡献日历部署到博客上(二)

自搭 api 的 域名 是可以 自定义的，需绑定好 vercel 提供的 cn

如果无法访问github可以看下这个 如何优雅的加速Github

---