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

起因

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

其实,我对能够将 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 %}

我的代码:
示例

⚠️ 注意

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vlqhu2Jq-1626268615085)(https://i.loli.net/2021/07/14/fKGS7puCMB6eUcT.png)]

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

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

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

最终效果

首页的效果如下:

image-20210714203427808

归档页效果如下:

image-20210714203456597

我的博客:
https://gagalab.tech/

原文链接:
https://gagalab.tech/2021/07/14/Next%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8Github%E8%B4%A1%E7%8C%AE%E6%97%A5%E5%8E%86%E6%95%99%E7%A8%8B/

  • 2
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

Gainii

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值