Hugo博客添加GitHub仓库信息短代码

前言

Hexo Butterfly 主题的标签插件可以实现 GitHub 仓库信息和个人信息展示，使用的项目是 github-readme-stats，其实就是展示一张仓库信息或者个人信息的图片，类似于 sheild.io 的徽标。 Hugo 可以通过短代码方便的实现，这里就以 Diary 主题为例添加一个短代码，其他主题也通用。本次用到的仓库(预览效果)如下：

配置

新建 ~/layouts/shortcodes/ghcard.html 文件，在其中添加模板代码：

 1{{ $baseURL := .Site.Params.githubStatsBaseURL | default "https://github-readme-stats.vercel.app" }}
 2{{ $theme := .Get "theme" | default "default_repocard" }}
 3<div class="ghcard">
 4  <a href="https://github.com/{{ .Get "username"}}/{{ .Get "repo" }}" style="transition: none;background-image: none;border-bottom: none; display: block;">
 5    <img align="center" src="{{ $baseURL }}/api/pin/?username={{ .Get "username" }}&amp;repo={{ .Get "repo" }}&amp;theme={{ .Get "theme" }}" alt="{{ .Get "repo" }}" style="width: 100%;" />
 6  </a> 
 7</div>
 8<style>
 9  .ghcard {
10    width: 100%;
11    margin-bottom: 20px;
12    display: inline-block;
13    vertical-align: top;
14  }
15  @media (min-width: 769px) {
16    .ghcard {
17      width: calc(50% - 10px);
18    }
19    .ghcard:nth-child(odd) {
20      margin-right: 100px;
21    }
22  }
23</style>

使用

由于默认的地址访问量大后可能会失效，因此推荐自己部署项目到 Vercel ，可以参考这个链接：自己部署

部署后在站点配置文件中添加一行配置，替换成自己的地址即可。

1[params]
2githubStatsBaseURL = "https://yourdomain.com"

使用的短代码如下：

1{\{< ghcard username="anuraghazra" repo="github-readme-stats" >}}
2{\{< ghcard username="anuraghazra" repo="github-readme-stats" theme="noctis_minimus" >}}

主题参数默认是 default_repocard，可以自己指定，最后的效果如下：

模板中只包含了仓库信息的短代码，还可以实现 GitHub 个人信息、 Gist 卡片、 Top Languages 卡片等，可以依照对应的添加短代码，使用的参数都类似，分开也方便使用。

参考

最后修改于 2024-08-20