Hugo系列(六)：添加GitHub仓库信息短代码
通过两种方式给 Hugo 博客添加 GitHub 仓库信息短代码，一种基于 gitHub-readme-stats，另一种基于 GitHub API。
前言
Hexo Butterfly 主题的标签插件可以实现 GitHub 仓库信息和个人信息展示，使用的项目是 github-readme-stats，其实就是展示一张仓库信息或者个人信息的图片，类似于 sheild.io 的徽标。
Hugo 可以通过短代码方便的实现，这里就以 PaperMod 主题为例添加一个短代码，其他主题也通用。
另外还可以使用 GitHub API 来获取 JSON 数据，然后选择需要的信息展示。
方法一
配置
用到的仓库如下：
新建 ~/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" }}&repo={{ .Get "repo" }}&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，可以自己指定。
Important模板中只包含了仓库信息的短代码，还可以实现 GitHub 个人信息、 Gist 卡片、 Top Languages 卡片等 ，可以依照对应的添加短代码，使用的参数都类似，分开也方便使用。
方法二
配置
通过 GitHub API 来获取数据，放入下面的代码：
1{{ $repo := .Get 0 }}
2{{ $parts := split $repo "/" }}
3{{ $owner := index $parts 0 }}
4{{ $repoName := index $parts 1 }}
5{{ $apiUrl := printf "https://api.github.com/repos/%s/%s" $owner $repoName }}
6{{ $repoData := resources.GetRemote $apiUrl }}
7{{ if $repoData.Err }}
8 <p>Error: {{ $repoData.Err }}</p>
9{{ else }}
10 {{ $repo := $repoData.Content | unmarshal }}
11 <div class="github-card">
12 <div class="github-title">
13 <img src="{{ $repo.owner.avatar_url }}" alt="{{ $repo.owner.login }}" class="github-title-avatar">
14 <a href="{{ $repo.html_url }}" target="_blank" class="repo-name">{{ $repo.owner.login }}/{{ $repo.name }}</a>
15 <svg class="github-title-svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
16 <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
17 </svg>
18 </div>
19 <div class="github-description">
20 {{ $repo.description }}
21 </div>
22
23 <div class="github-footer">
24 <span class="github-footer language">
25 <svg class="github-footer-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
26 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 8l-4 4l4 4" /><path d="M17 8l4 4l-4 4" /><path d="M14 4l-4 16" />
27 </svg>
28 <span class="github-footer-content">
29 {{ $repo.language }}
30 </span>
31 </span>
32
33 <span class="github-footer stars">
34 <svg class="github-footer-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
35 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
36 </svg>
37 <span class="github-footer-content">
38 {{ $repo.stargazers_count }}
39 </span>
40 </span>
41
42 <span class="github-footer forks">
43 <svg class="github-footer-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
44 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M7 8v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2 -2v-2" /><path d="M12 12l0 4" />
45 </svg>
46 <span class="github-footer-content">
47 {{ $repo.forks }}
48 </span>
49 </span>
50 </div>
51 </div>
52
53 <style>
54 .github-card {
55 border: 1px solid #e1e4e8;
56 border-radius: 6px;
57 padding: 15px;
58 color: #24292e;
59 background-color: #fff;
60 max-width: 400px;
61 margin-top: 1rem;
62 margin-bottom: 1rem;
63 body.dark & {
64 border-color: #30363d;
65 background-color: #0d1117;
66 color: #c9d1d9;
67 }
68 }
69 .github-title {
70 display: flex;
71 align-items: center;
72 justify-content: space-between;
73 margin-bottom: 8px;
74 font-weight: bold;
75 }
76 .github-title-avatar {
77 width: 20px;
78 height: 20px;
79 border-radius: 50%;
80 margin-right: 8px;
81 }
82 .post-content .github-title a {
83 color: inherit;
84 text-decoration: none;
85 box-shadow: none;
86 &:hover {
87 background: none;
88 text-decoration: underline;
89 }
90 body.dark & {
91 color: #c9d1d9;
92 }
93 }
94 .repo-name {
95 font-weight: 600;
96 flex-grow: 1;
97 margin-left: 8px;
98 }
99 .github-icon {
100 fill: #24292e;
101 }
102 .github-description {
103 margin-bottom: 16px;
104 }
105 .github-footer {
106 display: flex;
107 justify-content: space-between;
108 color: #586069;
109 align-items: center;
110 body.dark & {
111 color: #8b949e;
112 }
113 }
114 .github-footer-content {
115 margin-left: 4px;
116 }
117 .github-title-svg {
118 width: 20px;
119 height: 20px;
120 fill: currentColor;
121 }
122 </style>
123{{ end }}
使用
1{\{< github "gohugoio/hugo" >}\}