前言
该教程与原教程 大同小异 。
原教程源自 小冰 大佬
效果展示
教程
公共 api
- 插件的原理和部署的教程 小冰 大佬 在 原文 已经说得很详细了,这里直接演示 简化版 。
下载 插件
1
npm i hexo-githubcalendar --save
在 博客 根目录
_config.yml
配置文件,增加以下内容 (2024.3.31更新)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
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: ""- 修改配置 (2024.3.31更新)
改为自己的 github / gitee 的用户名
1
user: user=zfour
默认 github ,如用 gitee 换成下面的Vercel域名被墙,推荐 自搭 api (2024.3.31更新)1
由于github规则频繁修改,所以还是自搭吧......
由于cdn的原因我换了个cdn 哪个速度快用哪个
1
2calendar_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颜色 配置源自 店长 大佬
1
2
3
4color: "['#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']" #天青色调保存配置后,三连
1
hexo clean && hexo g && hexo s
自搭 api
- 除了用提供的 公共api 外,还可以 自搭api 。小冰 大佬 在 github 仓库 也发布了详细的教程,这里也是 简化版 。
注册一个 Vercel 账号
点击 + New Project
选择 Import Third-Party Git Repository →
填入
https://github.com/Zfour/python_github_calendar_api
,点击 Continue1
https://github.com/Zfour/python_github_calendar_api
选择 储存库 ,这里我以 Github 为例,选择 Github
默认 勾选 Create private Git Repository ,点击 Create ,部署需等待几分钟
部署完毕后在 DOMAINS 会出现提供的域名,访问域名:访问格式
域名/api?user=用户名
(2024.3.31更新)1
域名/api?user=用户名
有数据反馈 ,则表示搭建成功
把 公共 api 改为 自搭 api 即可, 注意:Vercel域名被墙,需自行绑定自己域名
1
2- api: https://python-github-calendar-api.vercel.app/api
+ api: 域名/api如搭建的是 gitee ,则把填入 链接 换成
https://github.com/Zfour/python_gitee_calendar_api
,其余步骤同上 。1
https://github.com/Zfour/python_gitee_calendar_api
保存配置后,三连
1
hexo clean && hexo g && hexo s
补充
自搭 api 的 域名 是可以 自定义的,需绑定好 vercel 提供的 cn
如果无法访问github可以看下这个 如何优雅的加速Github
HY Group , Entertainment first , Just be happy . SuiXing Originality Parking Iot . Ruan Fan Ying Chi Herbal Tea Shop .
Internet Of Things .