折腾了一上午算是搞定了，先来看看效果

image-20230327131605255

感觉颜色还是不够好看？算了就这样吧

自建后端 Api

首先这个组件是来源于 Akilar 大佬的，然后后端是冰老师写的

Gitcalendar | Akilarの糖果屋

https://akilar.top/posts/1f9c68c9/

但是默认的 api 是失效的，必须自建 api ，因为之前 GitHub 接口改了，所以原来的正则不能用，有大佬提了 PR ，但是一直没和进去

所以你自建后端 api 的时候应该是 fork 这个仓库

PS：2023 年 11 月 16 日 更新

今天这个规则又改了，我喂给 GPT 他帮我修好了，我也发起了 PR

不过最新的 commit 还在我的仓库

然后你就跟着教程一路走下去即可

经典域名问题

等你建好了就遇到了经典的 Vercel 被墙问题：在国内没法使用，这时候你就需要给你的 project 添加一个自己的域名

就如我在 『Twikoo』解决 Vercel.app 在国内被墙导致无法使用的问题 中的那样操作

然后你就可以测试一下能否正常访问，例如我的是 https://git-calendar.nickxu.top ，然后加个你 GitHub 用户名的参数试一下

1
https://git-calendar.nickxu.top/api?NX-Official

image-20230327134128474

好了，现在后端搭建完毕，其实如果你后端实在搭建不起来也可以用我的后端

搞定颜色

默认的配置文件里面的颜色我感觉和我的暗黑主题不太搭，我就想用 GitHub 上面的那一套配色

image-20230327113745737

但是有个问题就是 GitHub 上面只有 1 种底色 + 4 种绿色，但是配置文件里面要填 11 种颜色

尝试了几种方案之后最后还是感觉重复填充这几种颜色观感最好

下面是我的完整配置文件

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
# hexo-filter-gitcalendar
# see https://akilar.top/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: NX-Official #git用户名
  apiurl: 'https://git-calendar.nickxu.top'
  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']" #天青色调

  #color: "['#161b22','#0e4429','#006d32','#26a641','#39d353']" # GitHub 上的颜色
  color: "['#161b22','#0e4429','#0e4429','#0e4429','#006d32','#006d32','#26a641','#26a641','#39d353','#39d353','#39d353']"


  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