博客相关|主页展示Github贡献度日历

在我个人博客的首页，引入了一个名为 hexo-githubcalendar 的插件，预览效果如下：

本文只介绍最简单的使用方式。

一键部署

1	npm i hexo-githubcalendar --save

新增网站根目录 `_config.yml` 配置项

# Ice Kano Plus_in
# Hexo Github Canlendar
# Author: Ice Kano
# Modify: Lete乐特
githubcalendar:
  enable: true
  enable_page: /
  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://gitcalendar.zfe.space/api 
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
  plus_style: ""

配置项解释

参数	可选值	含义
enable	true/false	是否开启插件
enable_page	`/` or `/categories/` …	应用页面的相对路径： - 首页：`/` - 分类页：`/categories/` - 所有页面：`all`
user	wmJim	github/gitee 用户名
layout.type	id/class	挂载容器类型（不修改）
layout.name	text	挂载容器名称（不修改）
layout.index	自然数	用来选择 type 和 name 相同时的排位（不修改）
githubcalendar_html	html 模板字段	包含 loading，和挂载容器（默认，不修改）
pc_minheight	280px	电脑端插件的最小高度，减少加载带来的视觉偏移
mobile_minheight	0px	手机端插件的最小高度，减少加载带来的视觉偏移
color	配置参考见下，也可自行配置	calendar 的主题色
api	url	默认使用提供文档提供的api，但还是建议自建api
calendar_js	https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js	jsd 加速的 js，将 github calendar 挂载入容器中
plus_style	“”	提供可自定义的 style

color 可修改

# 以下色调选择喜欢的一行保留即可。
# 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']" #天青色调

[{"url":"https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311102226147.png","alt":""},{"url":"https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311110119577.png","alt":""},{"url":"https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311110120135.png","alt":""},{"url":"https://wmjia-1308526100.cos.ap-shanghai.myqcloud.com/imgs/202311110121939.png","alt":""}]

个人推荐浅紫色调，显示的深浅比较明显。