点击查看更新记录
更新记录
2021-06-24:插件版1.0.8
- 新增配置项
gitcalendar_css,gitcalendar_js - CDN迁移至
npm.elemecdn.com
2021-06-24:插件版1.0.4
- 已发布插件版
- 移除了vue依赖，现已成为完全独立的脚本
- 新增了多主题适配方案，理论上可以适配任何主题
2021-02-04:正式版v3.2.2
- 源码无变动。针对2021-02-04当天，gitcalendar大面积失效的问题进行统一回复
- 因为
github calendar本身dom结构变动，api爬取不到信息。冰老师已经修复，请2021-02-04前配置的读者重新fork冰老师的python_github_calendar_api项目并重新构建。
2021-1-31:正式版v3.2.1
- 更新butterfly_v3.6.0适配方案提示
2021-01-22:正式版v3.2
- 应@Nesxc建议进行优化。
- 提取apiurl配置项，不想自建API的默认使用公共API
- 改动了
gitcalendar-js.pug1
2
3- var githubapiurl = "https://python-github-calendar-api.vercel.app/api?" + gitcalendar.user;
+ var apiurl = '!{theme.gitcalendar.apiurl}' ? 'https://!{theme.gitcalendar.apiurl}/api?' : 'https://githubapi.ryanchristian.dev/user/'
+ var githubapiurl = apiurl + gitcalendar.user; - 新增配置项
apiurl1
2
3
4
5
6gitcalendar:
enable: true
simplemode: true
user: 测试lxh
+ apiurl: github-calendar-api.vercel.app
color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"
2021-01-19:正式版v3.1
- 基于冰老师的gitcalendar方案进行微调(1.0，2.0，2.1,3.0为冰老师编写)
- 修改了样式，转为styl，使用配置项开关样式引入
- 新增配置项，直接通过主题配置文件控制各个变量参数
- 适配pjax,删除冗余代码
- 根据@卓越科技提示，新增判断机制，避免因为切换
simplemode导致反复报错。 - 补全自建API的部署教程。
点击查看参考教程
| 参考方向 | 教程原贴 |
|---|---|
| 基于冰老师方案的售后配置 | 教程：基于Butterfly主题的gitcalendar3.0 |
| 冰老师编写的api项目 |  |
| 站内教程：Vercel部署教程 | 使用Vercel来加速Hexo博客 |
新版插件方案
安装
安装插件,在博客根目录
[Blogroot]下打开终端，运行以下指令：1
npm install hexo-filter-gitcalendar --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件如_config.butterfly.yml中添加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
36
37
38# hexo-filter-gitcalendar
# see /posts/1f9c68c9/
gitcalendar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
# butterfly挂载容器
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
# volantis挂载容器
# layout:
# type: class
# name: l_main
# index: 0
# matery挂载容器
# layout:
# type: id
# name: indexCard
# index: 0
# mengd挂载容器
# layout:
# type: class
# name: content
# index: 0
user: 测试lxh #git用户名
apiurl: 'https://gitcalendar.'
minheight:
pc: 280px #桌面端最小高度
mibile: 0px #移动端最小高度
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']" #天青色调
container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug语法
gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js- 参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘ |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| user | text | 【必选】git用户名 |
| apiurl | url | 【可选】默认使用提供文档提供的api，但还是建议自建api，参考教程：自建API部署 |
| minheight.pc | 280px | 【可选】桌面端最小高度，默认为280px |
| minheight.mobile | 0px | 【可选】移动端最小高度，默认为0px |
| color | list | 【可选】一个包含11个色值的数组，文档给出了四款预设值 |
| container | pug | 【可选】预留的父元素容器，用以适配多主题，需要用pug语法填写，目前已适配butterfly，volantis，matery，mengd主题，这四个主题，插件会自自动识别_config.yml内填写的theme配置项。其余主题需要自己填写父元素容器。 |
| gitcalendar_css | URL | 【可选】自定义CSS样式链接 |
| gitcalendar_js | URL | 【可选】自定义js链接 |
旧版源码修改配置方案
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
魔改步骤
- 新建
[Blogroot]\themes\butterfly\layout\includes\gitcalendar.pug: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
36
37
38
39
40
41
42
43
44
45
46#gitcalendar.gitcalendar
#gitmessage(:style='{top:y+px,left:x+px,position: fixed,zIndex:9999}')
.angle-wrapper
span {{span1}}
span {{span2}} 次上传
.position-relative
.border.py-2.graph-before-activity-overview
.js-gitcalendar-graph.mx-md-2.mx-3.d-flex.flex-column.flex-items-end.flex-xl-items-center.overflow-hidden.pt-1.is-graph-loading.graph-canvas.gitcalendar-graph.height-full.text-center
#gitcalendarcanvasbox(v-if='simplemode')
canvas#gitcanvas(style='animation: none;')
svg.js-gitcalendar-graph-svg(width='100%', viewBox='0 0 770 128', v-if='!simplemode')
text.month(:x='32 + monthindex*64', y='20', v-for='(month,monthindex) in monthchange') {{month}}
text.wday(text-anchor='start', dx='0', dy='40') 日
text.wday(text-anchor='start', dx='0', dy='65') 二
text.wday(text-anchor='start', dx='0', dy='90') 四
text.wday(text-anchor='start', dx='0', dy='115') 六
g(v-for='(weekitem,weekIndex) in data', :transform='\'translate(\'+ (16 + weekIndex*14) + \',\' + \'0)\'')
rect(@mouseover="selectStyle(dayitem,$event)" @mouseleave="outStyle()" v-for='(dayitem,dayIndex) in weekitem', :style='{fill:thiscolor(dayitem.count),shapeRendering:crispedges}', :data-score='dayitem.count', :data-date='dayitem.date', x='0', :y=' 30 + dayIndex*13 ', width='11', height='11')
.contrib-footer.clearfix.mt-1.mx-3.px-3.pb-1
.float-left.text-gray
| 数据来源
a(:href="'https://github.com/'+ user ", target='blank') @{{user}}
.contrib-legend.text-gray
| Less
ul.legend
li(:style='{backgroundColor:color[0]}')
li(:style='{backgroundColor:color[2]}')
li(:style='{backgroundColor:color[4]}')
li(:style='{backgroundColor:color[6]}')
li(:style='{backgroundColor:color[8]}')
| More
.contrib-column.contrib-column-first.table-column
span.text-muted 过去一年提交
span.contrib-number {{total}}
span.text-muted {{oneyearbeforeday}} - {{thisday}}
.contrib-column.table-column
span.text-muted 最近一月提交
span.contrib-number {{thisweekdatacore}}
span.text-muted {{amonthago}} - {{thisday}}
.contrib-column.table-column
span.text-muted 最近一周提交
span.contrib-number {{weekdatacore}}
span.text-muted {{aweekago}} - {{thisday}} - 新建
[Blogroot]\themes\butterfly\layout\includes\gitcalendar-js.pug: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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245script.
var gitcalendar = new Vue({
el: '#gitcalendar',
data: {
simplemode: !{theme.gitcalendar.simplemode},
user: '!{theme.gitcalendar.user}',
fixed: 'fixed',
px: 'px',
x: '',
y: '',
span1: '',
span2: '',
month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthchange: [],
oneyearbeforeday: '',
thisday: '',
amonthago: '',
aweekago: '',
weekdatacore: 0,
datacore: 0,
total: 0,
datadate: '',
data: [],
positionplusdata: [],
firstweek: [],
lastweek: [],
beforeweek: [],
thisweekdatacore: 0,
mounthbeforeday: 0,
mounthfirstindex: 0,
crispedges: 'crispedges',
thisdayindex: 0,
amonthagoindex: 0,
amonthagoweek: [],
firstdate: [],
first2date: [],
montharrbefore: [],
monthindex: 0,
color: !{theme.gitcalendar.color}
},
methods: {
selectStyle(data, event) {
document.querySelector('.angle-wrapper').style.display = 'block'
this.span1 = data.date;
this.span2 = data.count;
this.x = event.clientX - 100;
this.y = event.clientY - 60
},
outStyle() {
document.querySelector('.angle-wrapper').style.display = 'none'
},
thiscolor(x) {
if (x === 0) {
let i = parseInt(x / 2);
return this.color[0]
} else if (x < 2) {
return this.color[1]
} else if (x < 20) {
let i = parseInt(x / 2);
return this.color[i]
} else {
return this.color[9]
}
},
}
});
var apiurl = '!{theme.gitcalendar.apiurl}' ? 'https://!{theme.gitcalendar.apiurl}/api?' : 'https://githubapi.ryanchristian.dev/user/'
var githubapiurl = apiurl + gitcalendar.user;
//canvas绘图
function responsiveChart() {
let c = document.getElementById("gitcanvas");
if (c) {
let cmessage = document.getElementById("gitmessage");
let ctx = c.getContext("2d");
c.width = document.getElementById("gitcalendarcanvasbox").offsetWidth;
let linemaxwitdh = 0.96 * c.width / gitcalendar.data.length;
c.height = 9 * linemaxwitdh;
let lineminwitdh = 0.8 * linemaxwitdh;
let setposition = {
x: 0.02 * c.width,
y: 0.025 * c.width
};
for (let week in gitcalendar.data) {
weekdata = gitcalendar.data[week];
for (let day in weekdata) {
let dataitem = {
date: "",
count: "",
x: 0,
y: 0
};
gitcalendar.positionplusdata.push(dataitem);
ctx.fillStyle = gitcalendar.thiscolor(weekdata[day].count);
setposition.y = Math.round(setposition.y * 100) / 100;
dataitem.date = weekdata[day].date;
dataitem.count = weekdata[day].count;
dataitem.x = setposition.x;
dataitem.y = setposition.y;
ctx.fillRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh);
setposition.y = setposition.y + linemaxwitdh
};
setposition.y = 0.025 * c.width;
setposition.x = setposition.x + linemaxwitdh
};
ctx.font = "600 Arial";
ctx.fillStyle = '#aaa';
ctx.fillText("日", 0, 1.9 * linemaxwitdh);
ctx.fillText("二", 0, 3.9 * linemaxwitdh);
ctx.fillText("四", 0, 5.9 * linemaxwitdh);
ctx.fillText("六", 0, 7.9 * linemaxwitdh);
let monthindexlist = c.width / 24;
for (let index in gitcalendar.monthchange) {
ctx.fillText(gitcalendar.monthchange[index], monthindexlist, 0.7 * linemaxwitdh);
monthindexlist = monthindexlist + c.width / 12
};
cmessage.onmousemove = function(event) {
document.querySelector('.angle-wrapper').style.display = 'none'
};
c.onmousemove = function(event) {
document.querySelector('.angle-wrapper').style.display = 'none'
getMousePos(c, event);
};
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left * (canvas.width / rect.width);
var y = event.clientY - rect.top * (canvas.height / rect.height);
//console.log("x:"+x+",y:"+y);
for (let item of gitcalendar.positionplusdata) {
let lenthx = x - item.x;
let lenthy = y - item.y;
//console.log(lenthx,lenthy);
if (0 < lenthx && lenthx < lineminwitdh) {
if (0 < lenthy && lenthy < lineminwitdh) {
//console.log(item.date,item.count)
document.querySelector('.angle-wrapper').style.display = 'block'
gitcalendar.span1 = item.date;
gitcalendar.span2 = item.count;
gitcalendar.x = event.clientX - 100;
gitcalendar.y = event.clientY - 60
}
}
//if(0< x - item.x <lineminwitdh&&0< y - item.y <lineminwitdh){
//console.log(item.count,item.date);
//}
}
}
}
}
//数据统计算法
function addlastmonth() {
if (gitcalendar.thisdayindex === 0) {
thisweekcore(52);
thisweekcore(51);
thisweekcore(50);
thisweekcore(49);
thisweekcore(48);
gitcalendar.thisweekdatacore += gitcalendar.firstdate[6].count;
gitcalendar.amonthago = gitcalendar.firstdate[6].date
} else {
thisweekcore(52);
thisweekcore(51);
thisweekcore(50);
thisweekcore(49);
thisweek2core();
gitcalendar.amonthago = gitcalendar.first2date[gitcalendar.thisdayindex - 1].date
}
};
function thisweek2core() {
for (let i = gitcalendar.thisdayindex - 1; i < gitcalendar.first2date.length; i++) {
gitcalendar.thisweekdatacore += gitcalendar.first2date[i].count
}
};
function thisweekcore(index) {
for (let item of gitcalendar.data[index]) {
gitcalendar.thisweekdatacore += item.count
}
};
function addlastweek() {
for (let item of gitcalendar.lastweek) {
gitcalendar.weekdatacore += item.count
}
};
function addbeforeweek() {
for (let i = gitcalendar.thisdayindex; i < gitcalendar.beforeweek.length; i++) {
gitcalendar.weekdatacore += gitcalendar.beforeweek[i].count
}
};
function addweek(data) {
if (gitcalendar.thisdayindex === 6) {
gitcalendar.aweekago = gitcalendar.lastweek[0].date;
addlastweek()
} else {
lastweek = data.contributions[51];
gitcalendar.aweekago = lastweek[gitcalendar.thisdayindex + 1].date;
addlastweek();
addbeforeweek()
}
}
fetch(githubapiurl)
.then(data => data.json())
.then(data => {
gitcalendar.data = data.contributions;
gitcalendar.total = data.total;
gitcalendar.first2date = gitcalendar.data[48];
gitcalendar.firstdate = gitcalendar.data[47];
gitcalendar.firstweek = data.contributions[0];
gitcalendar.lastweek = data.contributions[52];
gitcalendar.beforeweek = data.contributions[51];
gitcalendar.thisdayindex = gitcalendar.lastweek.length - 1;
gitcalendar.thisday = gitcalendar.lastweek[gitcalendar.thisdayindex].date;
gitcalendar.oneyearbeforeday = gitcalendar.firstweek[0].date;
gitcalendar.monthindex = gitcalendar.thisday.substring(5, 7) * 1;
gitcalendar.montharrbefore = gitcalendar.month.splice(gitcalendar.monthindex, 12 - gitcalendar.monthindex);
gitcalendar.monthchange = gitcalendar.montharrbefore.concat(gitcalendar.month);
addweek(data);
addlastmonth();
responsiveChart();
})
.catch(function(error) {
console.log(error);
});
//手机版更换为svg绘制
if (document.getElementById("gitcalendarcanvasbox").offsetWidth < 500) {
gitcalendar.simplemode = false
}
//当改变窗口大小时重新绘制canvas
window.onresize = function() {
if (gitcalendar.simplemode) responsiveChart()
}
//解决滚动滑轮时出现的标签显示
window.onscroll = function() {
if (document.querySelector('.angle-wrapper')) {
document.querySelector('.angle-wrapper').style.display = 'none'
}
}; - 新建
[Blogroot]\themes\butterfly\source\css\_layout\gitcalendar.styl: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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178if hexo-config('gitcalendar.enable')
.gitcalendar
font-family SourceHanSans-Medium
border 1px solid #DDDDDD
border-radius 3px
min-height 120px
text-align center
margin 0 auto
border-width 0px
width 100%
display flex
display -webkit-flex
justify-content center
align-items center
flex-wrap wrap
img
&.spinner
width 70px
margin-top 50px
min-height 70px
.gitcalendar-graph text.wday,
.gitcalendar-graph text.month
font-size 10px
fill #aaa
.contrib-legend
text-align right
padding 0 14px 10px 0
display inline-block
float right
.legend
display inline-block
list-style none
margin 0 5px
position relative
bottom -1px
padding 0
li
display inline-block
width 10px
height 10px
.text-small
font-size 12px
color #767676
.gitcalendar-graph
padding 15px 0 0
text-align center
.contrib-column
text-align center
border-left 1px solid #ddd
border-top 1px solid #ddd
font-size 11px
.contrib-column-first
border-left 0
.table-column
padding 10px
display table-cell
width 33%
vertical-align top
.contrib-number
font-weight 300
line-height 1.3em
font-size 24px
display block
.monospace
text-align center
color #000
font-family monospace
a
color #1D75AB
text-decoration none
.contrib-footer
font-size 11px
padding 0 10px 12px
text-align left
width 100%
box-sizing border-box
height 26px
.left
&.text-muted
float left
margin-left 9px
color #767676
a
color #4078c0
text-decoration none
.left.text-muted a:hover,
.monospace a:hover
text-decoration underline
h2
&.f4
&.text-normal
&.mb-3
display none
.float-left
&.text-gray
float left
#user-activity-overview
display none
.day-tooltip
white-space nowrap
position absolute
z-index 99999
padding 10px
font-size 12px
color #959da5
text-align center
background rgba(0,0,0,.85)
border-radius 3px
display none
pointer-events none
strong
color #dfe2e5
&.is-visible
display block
&:after
position absolute
bottom -10px
left 50%
width 5px
height 5px
box-sizing border-box
margin 0 0 0 -5px
content " "
border 5px solid transparent
border-top-color rgba(0,0,0,.85)
.position-relative
width 100%
padding-left 20px
padding-right 20px
@media screen and (max-width: 650px)
.contrib-column
display none
.angle-wrapper
z-index 9999
display inline
display none
width 200px
height 40px
position relative
padding 5px 0
background rgba(0, 0, 0, 0.8)
border-radius 8px
text-align center
color white
span
padding-bottom 1em
&:before
content ''
width 0
height 0
border 10px solid transparent
border-top-color rgba(0, 0, 0, 0.8)
position absolute
left 47.5%
top 100%
.angle-box
position fixed
padding 10px - 修改
[Blogroot]\themes\butterfly\layout\index.pug,引入gitcalendar结构，注意butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}：1
2
3
4
5
6
7
8
9
10extends includes/layout.pug
block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
+ if theme.gitcalendar.enable
+ .recent-post-item(style='width:100%;overflow:hidden;')
+ !=partial('includes/gitcalendar', {}, {cache:theme.fragment_cache})
+postUI
include includes/pagination.pug为了整体美观，如果你还添加了其他首页魔改，需要调整卡片之间的间隔。此处以
gitcalendar为例。需要添加margin-bottom:20px;样式属性。(也可能不需要，视情况而定)1
2
3
4
5
6
7
8
9
10
11
12
13extends includes/layout.pug
block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
if theme.gitcalendar.enable
.recent-post-item(style='width:100%;margin-bottom:20px;overflow:hidden;')
!=partial('includes/gitcalendar', {}, {cache:theme.fragment_cache})
if theme.catalogMagnet.enable
.recent-post-item.photo-tag(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row;margin-bottom:20px;')
!=partial('includes/catalogMagnet', {}, {cache:theme.fragment_cache})
+postUI
include includes/pagination.pug - 修改
[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,引入vue依赖和gitcalendar脚本,这里为了保证依赖顺序，必须把vue放在gitcalendar-js之前。同时这里为了便于适配pjax重载，需要把gitcalendar-js.pug放到js-pjax下。vue引入项配置（butterfly_v3.4.0+版本没有jquery这行，无需在意）：1
2
3
4
5div
script(src=url_for(theme.CDN.jquery))
+ script(src=url_for(theme.CDN.vue))
script(src=url_for(theme.CDN.utils))
script(src=url_for(theme.CDN.main))gitcalendar-js引入项配置:1
2
3
4
5
6
7
8
9
10
11
12
13.js-pjax
if theme.subtitle.enable && is_home() && theme.index_img !== false
include ./third-party/subtitle.pug
include ./third-party/math/index.pug
if commentsJsLoad
include ./third-party/comments/js.pug
if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
script(defer src=url_for(theme.CDN.busuanzi))
+ if theme.gitcalendar.enable
+ !=partial('includes/gitcalendar-js', {}, {cache:theme.fragment_cache})
- 修改
[Blogroot]\_config.butterfly.yml添加gitcalendar配置项和vue的CDN链接：- 添加
gitcalendar配置项：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15#gitcalendar
gitcalendar:
enable: true
simplemode: true
#设为true时使用canvas绘制gitgitcalendar，
#设为false时使用svg绘制gitgitcalendar
#canvas：dom数少，但图像会发生模糊，自适应一般
#svg：dom数多，图像清晰，自适应更佳
user: 测试lxh #这里填写你的github用户名
apiurl: # 留空为默认公共API，自建api内容详见下节
# 以下色调选择喜欢的一行保留即可。其余注释。
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']" #天青色调 - 添加
vue的CDN链接1
2
3
4
5
6
7
8
9
10
11# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
# main
main_css: /css/index.css
jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
main: /js/main.js
utils: /js/utils.js
# custom
+ vue: https://npm.elemecdn.com/vue@2.6.11 # vue.js依赖
- 添加
hexo clean && hexo g && hexo s即可查看预览。
自建API部署
点击查看自建API部署
虽然Vercel的访问应当没有次数限制，但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建API。使用Vercel部署，完全免费。且无需服务器。
以下是具体部署教程。与部署静态网站基本一致。因此配图沿用了站内教程使用Vercel来加速Hexo博客的内容。
注册时极有可能遇到的bug
若注册时提示Error:This user account is blocked.Contact support@vercel.com for more information.
这是由于Vercel不支持大部分国内邮箱。可以将github账号主邮箱改为Gmail邮箱。
但是根据群友反应，将github账号主邮箱切换为Gmail以后，Vercel又会提示需要使用手机号码验证。然而github并没有提供手机号码绑定的内容。
综上，建议一开始注册github账号时就使用Gmail等国外邮箱进行注册。
- 国内访问
Gmail的方案：- 直接使用QQ邮箱手机版，它提供
Gmail的访问路线，可以直接注册并使用。 - 使用
Ghelper等浏览器插件访问。详情可以参考这篇文章：玩转Microsoft-Edge
- 直接使用QQ邮箱手机版，它提供
- 若是执着于当前
Github账号，可以参考以下方案进行尝试:- 完成了
Gmail等国外邮箱的注册，打开github->头像->settings->Emails->Add email address,并完成邮箱验证。 - 在Add email address下方的Primary email address选项中将
Gmail设置为主邮箱。
- 完成了
访问Vercel官网，点击右上角的sign up进行注册
注册完成后选择新建一个项目
填入@冰老师提供的自建API项目地址
1
https://github.com/Zfour/python_github_calendar_api.git
此时会提示这是否是你的仓库。
选
No，Vercel会自动帮你fork这个仓库到你的Github账号里。
</li>导入静态页面仓库之前，需要为你的
Github安装Vercel，此处建议选择All repositories，意为为所有仓库安装，当然，你也可以选择只为当前仓库安装，也就是Only select repositories。如果哪天反悔了，可以在github->头像(右上角)->settings->Applications（列表下数上第四个）->Installed Github Apps里修改。
</li>之后会识别出项目文件，单击
ContinueVercel的PROJECT NAME可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除PROJECT以后重建一个了。下方三个选项保持默认就好。
</li>到此时，
Vercel的部署已经完成，可以使用Vercel提供的默认域名来访问api链接。例如我获取到的默认域名为github-calendar-api.vercel.app,则用它来替换冰老师教程中的自建API，填写到[Blogroot]\_config.butterfly.yml中关于gitcalendar的apiurl中。注意源码修改版不要带协议，不要带后缀。就填写给你的默认域名就好。而插件版需要带协议1
2
3
4
5
6gitcalendar:
enable: true
simplemode: true
user: 测试lxh
apiurl: github-calendar-api.vercel.app
color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"
可能遇到的BUG
2021年2月4日，因为github本身的dom变动，导致原有api爬取不到信息，冰老师已经加急修复。请发现日历失效的读者重新fork 上述的python_github_calendar_api项目并采用自建API方案。
Invitation
测试
created:14/10/2022
Welcome to Candyhome
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to 测试's candyhome,wish you a nice day .
评论
