在Hexo博客中添加Github贡献日历

之前看到过小冰的博客，被他主页的Github贡献日历吸引了。

于是我按照他给的方法进行尝试，最后虽然成功了，但是也出现了一些问题，导致页面不是太美观。如下图，上面一行日期无法显示完整，这令我很头疼我试图上网查找解决方法，可惜没有找到，并且许多用户都反应遇到了同样的问题。

既然解决不了，那咱就换一种方法。于是我又在Github上寻找新的方法，终于，我在一位老外大神那里找到了一种方法。

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

我觉得这个方法非常的牛，他将你自己的贡献日历变成了图片，只需要使用一行 HTML 语句，就可以在任何地方使用贡献日历。但他也有自己的缺点，就是不能像小冰的插件那样可以显示上传日期和提交次数等。

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

现在开始介绍怎么用这种方法实现！

1 最简单的一种方法

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

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

比如说，你想在关于页面使用贡献日历，那么只需要在blog\source\about目录下，打开index.md文件，在需要的位置插入上面的语句即可。

注意一定要是自己的Github用户名！

效果如下

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

我们还可以自定义自己的贡献日历配色方案，原作者是不是很贴心！

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

如下

1	<img src="https://ghchart.rshah.org/E623D1/tqb-web" alt="???'s Blue Github Chart" />

效果图

3 放进首页和归档页（Next主题）

打开Dblog\themes\next\layout目录下的_layout.swig文件。
找到 {% include '_partials/header/sub-menu.swig' %}，在下面添加如下代码

{%- 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 %}

如下图(用的别人的)

⚠注意

🍦首先，要把黄色框框里面的代码换成自己的信息！！！

🍦其次，绿色框框要根据你博客的情况写

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

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

我目前没有想到其他更好的方法，如果你们想到了，可以在下面留言告诉我。

最后看一下效果