Hugo-stackの美化 IV

标签短代码

新建短代码文件

在 Hugo 项目中创建：

1layouts/shortcodes/tag-badge.html

内容如下：

 1{{- $text := .Get "text" | default (.Get 0) -}}
 2{{- $href := .Get "href" -}}
 3{{- $target := .Get "target" -}}
 4{{- $color := .Get "color" -}}
 5{{- $bg := .Get "bg" -}}
 6{{- $border := .Get "border" -}}
 7
 8{{/* 如果显式指定了 target，或者链接以 http/https 开头，则默认新窗口打开 */}}
 9{{- $isExternal := or (eq $target "_blank") (and (not $target) (or (hasPrefix $href "http://") (hasPrefix $href "https://"))) -}}
10
11{{/* 动态拼接 inline style */}}
12{{- $styles := slice -}}
13{{- if $color -}}{{- $styles = $styles | append (printf "color: %s;" $color) -}}{{- end -}}
14{{- if $bg -}}{{- $styles = $styles | append (printf "background-color: %s;" $bg) -}}{{- end -}}
15{{- if $border -}}{{- $styles = $styles | append (printf "border-color: %s;" $border) -}}{{- end -}}
16{{- $styleAttr := delimit $styles " " -}}
17
18{{- if $href -}}
19<a class="tag-badge" href="{{ $href | safeURL }}" {{- if $isExternal }} target="_blank" rel="noopener noreferrer" {{- end }} {{- if $styleAttr }} style="{{ $styleAttr | safeCSS }}" {{- end -}}>
20{{- else -}}
21<span class="tag-badge" {{- if $styleAttr }} style="{{ $styleAttr | safeCSS }}" {{- end -}}>
22{{- end -}}
23
24<svg
25  class="tag-badge__icon"
26  viewBox="0 0 24 24"
27  fill="none"
28  xmlns="http://www.w3.org/2000/svg"
29  aria-hidden="true"
30>
31  <path
32    d="M20.59 13.41L11 3.83V3H4V10H4.83L14.41 19.59C15.19 20.37 16.46 20.37 17.24 19.59L20.59 16.24C21.37 15.46 21.37 14.19 20.59 13.41Z"
33    stroke="currentColor"
34    stroke-width="1.8"
35    stroke-linecap="round"
36    stroke-linejoin="round"
37  />
38  <circle
39    cx="7.5"
40    cy="6.5"
41    r="1.2"
42    fill="currentColor"
43  />
44</svg>
45
46<span class="tag-badge__text">{{ $text }}</span>
47
48{{- if $href -}}
49</a>
50{{- else -}}
51</span>
52{{- end -}}

添加 CSS 样式

把下面的样式放入博客主题的自定义 CSS 文件中：assets/scss/custom.scss

 1.tag-badge {
 2  display: inline-flex;
 3  align-items: center;
 4  gap: 0.35em;
 5
 6  padding: 0.3em 0.65em;
 7  margin: 0 0.15em;
 8
 9  color: #eeeeee;
10  background-color: #363636;
11  border: 1px solid #4a4a4a;
12  border-radius: 999px;
13
14  font-size: 0.9em;
15  font-weight: 400;
16  line-height: 1.2;
17  vertical-align: middle;
18
19  text-decoration: none;
20  white-space: nowrap;
21
22  transition:
23    background-color 0.2s ease,
24    border-color 0.2s ease,
25    transform 0.2s ease;
26}
27
28.tag-badge__icon {
29  width: 1.05em;
30  height: 1.05em;
31  flex-shrink: 0;
32}
33
34.tag-badge__text {
35  line-height: 1;
36}
37
38a.tag-badge:hover {
39  color: #ffffff;
40  background-color: #484848;
41  border-color: #606060;
42  text-decoration: none;
43  transform: translateY(-1px);
44}

在 Markdown 中使用

使用命名参数

这是一个人工智能标签。

1{{< tag-badge text="人工智能" >}}

添加跳转链接

这是一个 Python 标签。

1{{< tag-badge text="Python" href="/tags/python/" >}}

也可以链接到站外：

这是一个 GitHub 标签。

1{{< tag-badge text="GitHub" href="https://github.com/" >}}

自定义边框文字和标签颜色

自定义文字与图标颜色 (color)：

这是一个警告标签。

1{{< tag-badge text="警告" color="#ff4d4f" >}}

同时自定义文字、背景 (bg) 与边框 (border)：

这是一个 Vue.js 标签。

1{{< tag-badge text="Vue.js" color="#42b883" bg="rgba(66, 184, 131, 0.1)" border="#42b883" >}}

带有链接并自定义颜色：

这是一个 React 标签。

1{{< tag-badge text="React" href="https://react.dev/" color="#61dafb" bg="#20232a" border="#61dafb" >}}