手把手教你在Hexo中使用Github贡献日历（以Next主题为例）

发表于 分类于 阅读次数：
本文字数： 2.3k 阅读时长 ≈ 2 分钟
本文以 Next 主题为例，手把手教你如何在 Hexo 个人博客中使用 Github 贡献日历。除此之外，你当然也可以在任何地方使用它。

起因

以下都是废话，可以直接跳到下一节~

其实，我对能够将 Github 贡献日历（Contribution Calendar）放进自己的博客这件事，早就垂涎久矣。当初尝试了各种方法，都没有能够在我的 Next 主题上实现，得知 sakuraplus主题 已经融合了这个功能实在是羡慕。

最近准备校招，压力有些大，不想学习，就开始琢磨着折腾一下自己的博客，妄想能给面试官留个特别的印象（bushi）。今天，打开 Github 看见贡献日历，又动了试试看的念头。百度一下，发现了小冰大神写的 hexo-githubcalendar 插件，他实现的效果实在是太棒了，引入方法也很简单，而且很多主题都能使用。

小冰的插件效果

但是，我按照他的教程一步步做了，却总是显示不出。于是，我在 Github Zfour/hexo-github-calendar 中的 Next theme Issue 下，看见了叶叶菜的回复，试图和他取得联系，问问他是怎么做的。很幸运，叶叶菜不久就加了我 QQ，他说，他嫌麻烦没有用这个插件，并且热心地推荐了一个老外实现的方法。

Github 地址：https://github.com/2016rshah/githubchart-api

这个方法最绝的地方是，将你自己的贡献日历变成了图片，只需要使用一行 HTML 语句，就可以在任何地方使用贡献日历。

<img src="https://ghchart.rshah.org/2016rshah" alt="2016rshah's Github chart" />

但缺点是，不像小冰的插件那样可以显示上传日期以及提交次数等等。

现在开始！

此方法的 Github 地址：https://github.com/2016rshah/githubchart-api

最简单的方法

如果你想以最简单方法使用贡献日历，那么只需要在你的 Markdown 文本中，使用：

<img src="https://ghchart.rshah.org/你的Github用户名" alt="???'s Github chart" />

例如，若你想在“关于”页面使用贡献日历，那么可以在 Blog\source\about 目录下，打开 index.md，在需要的位置插入上面的语句即可。

示例

注意，要使用自己的 Github 用户名哦！

效果如下：

image-20210714201121590

自定义贡献日历的配色方案

这个方法的作者很贴心地允许我们自定义贡献日历的配色方案。

我们只需要将 src 属性改为 https://ghchart.rshah.org/<HEX-COLOR>/你的Github用户名，其中 <HEX_COLOR> 为任意的十六进制颜色代码。它将根据这个颜色，自动为日历修改配色。

完整语句如下：

<img src="https://ghchart.rshah.org/409ba5/你的Github用户名" alt="???'s Blue Github Chart" />

效果图：

Gainii's Blue Github Chart

放进首页和归档页（以Next主题为例）

首先，打开 Blog\themes\next\layout 目录下的 _layout.njk 文件。

找到 {%- include '_partials/header/sub-menu.njk' -%}，在这条 twig 语句下方添加如下代码：

{%- if page.type !== 'categories' and page.type !== 'tags' and page.type !== 'schedule' and page.type !== 'works' and page.type !== 'about' and page.type !== 'post'%}
	<div class="post-block animated fadeIn">
		<h5 class="post-title" itemprop="name headline">
			<a href="https://github.com/你的Github用户名" class="post-title-link" itemprop="url">Github Contribution Calendar</a>
		</h5>
		<div class="post-body animated fadeInDown" itemprop="articleBody">
			<img style="width: 100%; margin-top: 30px;" src="https://ghchart.rshah.org/e77c8e/你的Github用户名" alt="???'s Blue Github Chart" />
		</div>
	</div>
{%- endif %}

我的代码：

image-20210714202715120

⚠️ 注意

☝️第一，要把黄色框框里面的代码换成你的信息！

✌️第二，绿色框框要根据你博客的情况写。

其中，page.type 是在对应页面的 index.md 文件的首部设置的，语句为 type: "对应类型"。

以 about 页面为例，page.type在 Blog\source\about 目录下的 index.md 文件的首部添加 type: "about"，如下：

image-20210714204150830

因此，如果你不想在你的每篇文章顶部都显示贡献日历，那么你将不得不在每篇文章的 Markdown 文件首部都添加 type: "post"。

没错，我也觉得很麻烦，如果你有更好的办法，请告诉我！😋

另外，如果你想让贡献日历显示在 about 页面，只需要将 page.type !== 'about' 删掉即可。

最终效果

首页的效果如下：

image-20210714203427808

归档页效果如下：

image-20210714203456597