ShortCode短代码运用

什么是Shortcode

简单来说, 就是 Hugo 为了维护 Markdown 的简洁性, 同时保证可添加 HTML 内容, 所创造的一种表达方式.

这种方式允许我们在 Markdown 文件中以一种简洁的形式写HTML.

‍

一个简单的例子：友链的html生成

 1{{- $name := .Get "name" | default (.Get 0) -}}
 2{{- $url := .Get "url" | default (.Get 1) -}}
 3{{- $avatar := .Get "avatar" | default (.Get 2) -}}
 4{{- $bio := .Get "bio" | default (.Get 3) -}}
 5
 6<a href="{{- $url -}}" title="{{- $name -}}" class="friend-link" target="_blank" rel="friend">
 7    <div class="friend-link-div">
 8        <div class="friend-link-avatar">
 9            <img src={{ .Get "avatar" }} class="friend-avatar" loading="lazy" alt="Avatar">
10        </div>
11        <div class="friend-link-info">
12            <i class="fa fa-link" aria-hidden="true"></i>
13            <i class="friend-name">{{ $name }}</i>
14            <p class="friend-bio">{{ $bio }}</p>
15        </div>
16    </div>
17</a>

使用方法：{@{< friend name="xxx" url="xxx" avatar="xxx" bio="xxx" >}}

1{{- 和 -}}: 这对标记用来去除模板语法前后的空白字符。它确保定义变量时不会在输出中留下多余的空白字符。
2
3$name :=: 定义一个变量$name。在Go模板中，变量以$开头。
4
5.Get "name": 这是调用当前数据对象的Get方法，尝试获取键为"name"的值。.代表当前数据对象（在模板执行时传入的数据）。
6
7| default (.Get 0): 管道操作符|用于将前面的输出作为后面函数的输入。default是一个模板函数，如果.Get "name"返回的值为空或不存在，则使用default后面的值作为默认值。这里的默认值是.Get 0，即尝试获取索引为0的值。

bilibili视频

 1{{ $vid := (.Get 0) }}
 2{{ $videopage := default 1 (.Get 1) }}
 3{{ $basicQuery := querify "page" $videopage "high_quality" 1 "as_wide" 1 }}
 4{{ $videoQuery := "" }}
 5
 6{{ if strings.HasPrefix (lower $vid) "av" }}
 7{{ $videoQuery = querify "aid" (strings.TrimPrefix "av" (lower $vid)) }}
 8{{ else if strings.HasPrefix (lower $vid) "bv" }}
 9{{ $videoQuery = querify "bvid" $vid }}
10{{ else }}
11<p>Bilibili 视频av号或BV号错误！请检查视频av号或BV号是否正确</p>
12<p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
13{{ end }}
14
15<div class="video-wrapper" style="margin-left: 0px; padding-bottom: 36.25%;">
16    <iframe
17        src="https://player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}&autoplay=0"
18        scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"
19        style="border-radius: 40px; position:absolute; height: 100%; width: 75%;">
20    </iframe>
21</div>

使用方法：{@{< bilibili BV1LG4y117w6 >}}

会转化为：

1vid = BV1LG4y117w6
2videopage = 1
3basicQuery = page=1&high_quality=1&as_wide=1
4videoQurty = bvid=1LG4y117w6