自定义hugo短代码

1
2
3
4
5

<!-- 文件位置：~/layouts/shortcodes/align.html -->

<p style="text-align:{{ index .Params 0 }}">
  {{ index .Params 1 | markdownify }}
</p>

1

{{< align left "文字居左" >}}

1

{{< align center "文字居中" >}}

1

{{< align right "文字居右" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 文件位置：~/layouts/shortcodes/github.html -->

<div class="github">
    <div class="logo">
        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
    </div>
    <div class="description">{{ .Get "description" }}</div>
    <div class="language">
        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
        <span class="language-name">{{ .Get "language" }}</span>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// 文件位置：~/assets/scss/custom/_custom.scss

.github {
  border: 1px solid var(--color-contrast-low);
  border-radius: 3px;
  margin: 0 auto;
  margin-bottom: 1em;
  padding: 1em;
  .github-icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
    margin-bottom: 0.2em;
    fill: var(--color-contrast-high);
    transition: all 0.5s;
  }
  .name {
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
  }
  .description {
    margin-top: 0.5em;
    margin-bottom: 1em;
    color: var(--color-contrast-high);
    text-align: justify;
    font-size: 90%;
    transition: all 0.5s;
  }
  .language-color {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
  }
  .language-name {
    color: var(--color-contrast-high);
    font-size: 90%;
    margin-left: 0.5em;
    transition: all 0.5s;
  }
}

1
2
3
4

# 文件位置：~/data/SVG.toml

# GitHub Icon
repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

1

{{< github name="webgis-cli" link="https://github.com/jikekaifa/webgis-cli" description="一个快速构建webgis项目的手脚架，目标是利用前端热门框架和地图库集成常见的gis功能。A scaffolding for quickly building webgis projects, the goal is to use front-end popular frameworks and map libraries to integrate common gis functions." color="#F1E05A" language="JavaScript" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!-- 文件位置：~/layouts/shortcodes/notice.html -->

<!--https://github.com/martignoni/hugo-notice-->
{{- $noticeType := .Get 0 -}} {{- $raw := (markdownify .Inner | chomp) -}} {{-
$block := findRE
"(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b"
$raw 1 -}} {{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon
notice-icon") }}
<div
  class="notice {{ $noticeType }}"
  {{
  if
  len
  .Params
  |
  eq
  2
  }}
  id="{{ .Get 1 }}"
  {{
  end
  }}
>
  <div class="notice-title">{{ $icon | safeHTML }}</div>
  {{- if or $block (not $raw) }}{{ $raw }}{{ else }}
  <p>{{ $raw }}</p>
  {{ end -}}
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

// 文件位置：~/assets/scss/custom/_custom.scss
.notice {
  position: relative;
  padding: 1em 1em 1em 2.5em;
  margin-bottom: 1em;
  border-radius: 4px;

  p {
    margin-top: 0;
  }

  p:last-child {
    margin-bottom: 0;
  }

  .notice-title {
    position: absolute;
    left: 0.8em;

    .notice-icon {
      width: 1.2em;
      height: 1.2em;
    }
  }

  &.primary {
    background: hsla(200, 65%, 65%, 0.15);
    border-left: 5px solid hsl(200, 65%, 65%);

    .notice-title {
      color: hsl(200, 65%, 65%);
    }
  }

  &.warning {
    background: hsla(30, 80%, 70%, 0.15);
    border-left: 5px solid hsl(30, 80%, 70%);

    .notice-title {
      color: hsl(30, 80%, 70%);
    }
  }

  &.danger {
    background: hsla(0, 65%, 65%, 0.15);
    border-left: 5px solid hsl(0, 65%, 65%);

    .notice-title {
      color: hsl(0, 65%, 65%);
    }
  }

  &.success {
    background: hsla(140, 65%, 65%, 0.15);
    border-left: 5px solid hsl(140, 65%, 65%);

    .notice-title {
      color: hsl(140, 65%, 65%);
    }
  }
}

[data-theme='dark'] .notice {
  &.primary {
    background: hsla(200, 25%, 35%, 0.15);
    border-left: 5px solid hsl(200, 25%, 35%);

    .notice-title {
      color: hsl(200, 25%, 35%);
    }
  }

  &.warning {
    background: hsla(30, 25%, 35%, 0.15);
    border-left: 5px solid hsl(30, 25%, 35%);

    .notice-title {
      color: hsl(30, 25%, 35%);
    }
  }

  &.danger {
    background: hsla(0, 25%, 35%, 0.15);
    border-left: 5px solid hsl(0, 25%, 35%);

    .notice-title {
      color: hsl(0, 25%, 35%);
    }
  }

  &.success {
    background: hsla(140, 25%, 35%, 0.15);
    border-left: 5px solid hsl(140, 25%, 35%);

    .notice-title {
      color: hsl(140, 25%, 35%);
    }
  }
}

1
2
3

{{<  notice primary >}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /notice >}}

1
2
3

{{<  notice success  >}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /notice >}}

1
2
3

{{<  notice warning  >}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /notice >}}

1
2
3

{{< notice danger >}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /notice  >}}

1
2
3
4
5
6
7
8
9

<!-- 文件位置：~/layouts/shortcodes/quote.html -->

<blockquote class="quote{{ range .Params }} {{ . }}{{ end }}">
  {{- $content := .Inner | markdownify -}} {{- if not (strings.HasPrefix
  $content "
  <p>") }} {{ printf `</p>
  <p>%s</p>
  ` $content | safeHTML }} {{- else }} {{- $content }} {{- end -}}
</blockquote>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// 文件位置：~/assets/scss/custom/_custom.scss

blockquote.quote {
  position: relative;
  margin: 2em auto;
  padding-left: 3em;
  border: none;
  &::before {
    position: absolute;
    left: 0;
    content: '“';
    color: var(--color-contrast-low);
    font-family: 'JetBrains Mono', 'Amstelvar', 'Noto Serif SC', serif;
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
  }
  &.poetry {
    display: table;
    padding: 0;
    &::before {
      left: -1em;
    }
    p:last-child {
      margin: 0;
    }
  }
  &.en {
    p {
      line-height: 1.618;
      text-align: left;
      hyphens: auto;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
    }
  }
}
@media (max-width: $maxWidth) {
  blockquote.quote {
    &.poetry {
      padding-left: 3em;
      &::before {
        left: 0;
      }
    }
  }
}

1
2
3

{{< quote >}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /quote >}}

1
2
3

{{< quote en>}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /quote >}}

1
2
3

{{< quote poetry>}}
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
{{< /quote >}}