给butterfly添加github贡献图(Gitcalendar)

安知鱼2022-08-292023-08-01

点击查看参考教程

基于店长方案进行修改

参考方向	教程原贴
店长原教程	给`hexo-theme-butterfly`添加 Gitcalendar

安装

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

1	npm install hexo-filter-gitcalendar --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件如_config.butterfly.yml中添加


# 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: anzhiyu-c #git用户名
  apiurl: 'https://github.anheyu.com'
  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://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.css
  gitcalendar_js: https://cdn.cbd.int/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 链接

注意 ⚠️Vercel 默认域名于 2022 年 8 月 27 日被 GFW 屏蔽，请绑定自定义域名使用（暂时可用）

自建 API 部署

虽然 Vercel 的访问应当没有次数限制，但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建 API。使用 Vercel 部署，完全免费。且无需服务器。

访问Vercel 官网，点击右上角的 sign up 进行注册
若注册时提示Error:This user account is blocked.Contact support@vercel.com for more information.
这是由于Vercel不支持大部分国内邮箱。可以将github账号主邮箱改为Gmail邮箱。
但是根据群友反应，将github账号主邮箱切换为Gmail以后，Vercel又会提示需要使用手机号码验证。然而github并没有提供手机号码绑定的内容。
综上，建议一开始注册github账号时就使用Gmail等国外邮箱进行注册。
1. 国内访问Gmail的方案：
  - 直接使用 QQ 邮箱手机版，它提供Gmail的访问路线，可以直接注册并使用。
  - 使用Ghelper等浏览器插件访问。详情可以参考这篇文章：玩转 Microsoft-Edge
2. 若是执着于当前Github账号，可以参考以下方案进行尝试:
  - 完成了Gmail等国外邮箱的注册，打开github->头像->settings->Emails->Add email address,并完成邮箱验证。
  - 在 Add email address 下方的 Primary email address 选项中将Gmail设置为主邮箱。
注册完成后选择新建一个项目
选择Import Third-Party Git Repository →

填入@冰老师提供的自建 API 项目地址

1	https://github.com/Zfour/python_github_calendar_api.git

选择github
新增一个github账号
登录 github 账号后在弹窗内点击 install
选择登录后 githun 账号,输入仓库名称,然后点击Create
等待 ⌛️ 部署完成 ✅ 后点击中间的区域
在打开的链接 🔗 后拼接上参数/api/?[你的github用户名]，比如我的用户名为anzhiyu-c，vercel 提供的域名为 https://python-github-calendar-api-kappa.vercel.app
所以我的测试链接为：https://python-github-calendar-api-kappa.vercel.app/api/?anzhiyu-c
打开后访问有数据即为部署成功！
到此时，Vercel的部署已经完成，可以使用Vercel提供的默认域名来访问api链接。例如我获取到的默认域名为python-github-calendar-api-kappa.vercel.app,则用它来替换冰老师教程中的自建 API，填写到[Blogroot]\_config.butterfly.yml中关于gitcalendar的apiurl中。填写值为https://python-github-calendar-api-kappa.vercel.app,
带上协议，末尾不要添加/