提示

本文中 “使用方法” 贴出来的 markdown 短代码中的 $ 符号是为了短代码不渲染而加上的。

主题自带的短代码

PaperMod 主题提供的几种短代码，这些短代码有什么功能？我该如何使用？

序号短代码说明
1collapse创建一个可折叠的内容块,用于展示隐藏的详细信息
2figure插入带标题和说明的图片
3inTextImg在文字中插入小图片
4ltr创建从左到右的文本块
5rtl创建从右到左的文本块
6rawhtml原样输出 HTML 代码,不进行任何转义或渲染

collapse

功能: 创建一个可折叠的内容块,用于展示隐藏的详细信息

使用方法: 在内容中使用

{${< collapse summary="汇总说明" >}}

1. xx
2. xxx
3. xxxx
4. xxxxx

{${< /collapse >}}

summary 参数指定折叠块的标题。

效果如下：

汇总说明
  1. xx
  2. xxx
  3. xxxx
  4. xxxxx

figure

功能: 插入带标题和说明的图片

使用方法：

# 支持的参数有 `src`、`title`、`caption`、`link`、`target`、`rel`、`width`、`height` 等
{${< figure src="https://gdhblog.com/blog-imgs/20250209/longhua-temple-02.jpg" title="上海·龙华寺" caption="说明：龙华塔" >}}
figure 属性说明
属性描述值
src指定图片的路径或 URL
title设置图片的标题
caption设置图片的说明文字
link图片成为超链接，点击后跳转到指定地址
target控制点击图片后的跳转方式_blank：在新标签页打开链接
rel定义 a 标签的 rel 属性，影响 SEO 和链接行为nofollow：告诉搜索引擎不要跟踪该链接；noopener：防止新窗口的 tabnabbing 攻击（推荐 _blank 时使用）；noreferrer：阻止 HTTP 头 Referer 信息的发送
width设置图片的宽度单位可以是 px、%、em
height设置图片的高度
align设置图片的对齐方式left / center / right

效果：

说明：龙华塔
上海·龙华寺

说明：龙华塔

inTextImg

功能: 在文字中插入小图片。

使用方法: 。

# height 参数指定图片高度,alt 参数指定图片说明
{${< inTextImg url="https://gdhblog.com/blog-imgs/20250209/longhua-temple-02.jpg" height="400" alt="上海·龙华寺" >}}

效果：

上海·龙华寺

ltr 和 rtl

功能: 创建从左到右(ltr)或从右到左(rtl)的文本块。

使用方法:

  • 从左到右的内容
{${< ltr >}}从左到右的内容{${< /ltr >}}
  • 从右到左的内容
{${< rtl >}}从右到左的内容{${< /rtl >}}

效果：

ltr

从左到右的内容

rtl

从右到左的内容

rawhtml

功能: 原样输出 HTML 代码,不进行任何转义或渲染。

使用方法:

{${< rawhtml >}}<p>原始 HTML 代码</p>{${< /rawhtml >}}

效果：

原始 HTML 代码

常用的短代码

通知

1.在 layouts/shortcodes 添加notice.html 文件，代码如下。

notice.html
{{/* Available notice types: warning, info, note, tip */}}
{{- $noticeType := .Get 0 | default "note" -}}

{{/* Workaround markdownify inconsistency for single/multiple paragraphs */}}
{{- $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 -}}

{{/* Load the css if it's the first time */}}
{{- if not ($.Page.Scratch.Get "notice-style-loaded-flag") -}}

{{- $.Page.Scratch.Set "notice-style-loaded-flag" true -}}
{{- end -}}

<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <p class="notice-title">
        <span class="icon-notice baseline">
            {{ printf "icons/%s.svg" $noticeType | readFile | safeHTML }}
        </span>
        {{- i18n $noticeType -}}
    </p>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

2.在根目录 assets/css/extended 添加 notice.css 文件，代码如下。

notice.css
/* Light theme */
.notice {
    --title-color: #fff;
    --title-background-color: #6be;
    --content-color: #444;
    --content-background-color: #e7f2fa;
}

.notice.info {
    --title-background-color: #fb7;
    --content-background-color: #fec;
}

.notice.tip {
    --title-background-color: #5a5;
    --content-background-color: #efe;
}

.notice.warning {
    --title-background-color: #c33;
    --content-background-color: #fee;
}

/* Dark theme */
@media (prefers-color-scheme:dark) {
    .notice {
        --title-color: #fff;
        --title-background-color: #069;
        --content-color: #ddd;
        --content-background-color: #023;
    }

    .notice.info {
        --title-background-color: #a50;
        --content-background-color: #420;
    }

    .notice.tip {
        --title-background-color: #363;
        --content-background-color: #121;
    }

    .notice.warning {
        --title-background-color: #800;
        --content-background-color: #400;
    }
}

body.dark .notice {
    --title-color: #fff;
    --title-background-color: #069;
    --content-color: #ddd;
    --content-background-color: #023;
}

body.dark .notice.info {
    --title-background-color: #a50;
    --content-background-color: #420;
}

body.dark .notice.tip {
    --title-background-color: #363;
    --content-background-color: #121;
}

body.dark .notice.warning {
    --title-background-color: #800;
    --content-background-color: #400;
}

/* Content */
.notice {
    padding: 18px;
    line-height: 24px;
    margin-bottom: 24px;
    border-radius: 4px;
    color: var(--content-color);
    background: var(--content-background-color);
}

.notice p:last-child {
    margin-bottom: 0
}

/* Title */
.notice-title {
    margin: -18px -18px 12px;
    padding: 4px 18px;
    border-radius: 4px 4px 0 0;
    font-weight: 700;
    color: var(--title-color);
    background: var(--title-background-color);
}

/* Icon */
.icon-notice {
    display: inline-flex;
    align-self: center;
    margin-right: 8px;
}

.icon-notice img,
.icon-notice svg {
    height: 1em;
    width: 1em;
    fill: currentColor;
}

.icon-notice img,
.icon-notice.baseline svg {
    top: .125em;
    position: relative;
}

3.在 ./i18n/ 文件夹下，为 zh.yaml 和 en.yaml 添加翻译内容

zh.yaml
# ----- Begin. Notice 短代码翻译 -----
- id: warning
  translation: "警告"
- id: note
  translation: "注释"
- id: info
  translation: "信息"
- id: tip
  translation: "提示"
# ----- End. Notice 短代码翻译 -----

en.yaml
# ----- Begin. Notice Short code translation -----
- id: warning
  translation: "Warning"
- id: note
  translation: "Note"
- id: info
  translation: "Info"  
- id: tip
  translation: "Tip"
# ----- End. Notice Short code translation -----

4.添加 info/note/tip/warning svg 图标

在根目录新建 icons 文件夹（和 content 文件夹同级），添加 info/note/tip/warning 对应的 svg 图标，图标请到 hugo-notice 项目进行下载。

使用方法：

{${< notice info >}}
我是信息。
{${< /notice >}}

{${< notice note >}}
我是注释。
{${< /notice >}}

{${< notice tip >}}
我是提示。
{${< /notice >}}

{${< notice warning >}}
我是警告。
{${< /notice >}}

效果：

信息

我是信息。

注释

我是注释。

提示

我是提示。

警告

我是警告。

通知(简版)

在 layouts/shortcodes添加simple-notice.html文件，代码如下。

simple-notice.html
{{- $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 simple-notice-icon") }}
<div class="simple-notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="simple-notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

<style>
.simple-notice {
    position:relative;
    padding: 1em 0 1em 2em;
    margin-bottom: 1em;
    transition: all .5s;
    p:last-child {
        margin-bottom: 0;
    }
    .simple-notice-title {
        position: absolute;
        left: 0.8em;
        .simple-notice-icon {
            width: 1em;
            height: 1em;
            margin-left: -0.8em;
        }
    }
    &.simple-notice-warning {
        border-top: 2px solid hsl(0, 100%, 35%);
        color: hsl(0, 100%, 35%);
        .simple-notice-title {
            color: hsl(0, 100%, 35%);
        }
        a {
            color: hsl(0, 100%, 35%);
            text-decoration-color: hsl(0, 100%, 35%);
        }
    }
    &.simple-notice-info {
        border-top: 2px solid hsl(40, 80%, 45%);
        color: hsl(40, 80%, 45%);
        .simple-notice-title {
            color: hsl(40, 80%, 45%);
        }
        a {
            color: hsl(40, 80%, 45%);
            text-decoration-color: hsl(40, 80%, 45%);
        }
    }
    &.simple-notice-note {
        border-top: 2px solid hsl(210, 100%, 25%);
        color: hsl(210, 100%, 25%);
        .simple-notice-title {
            color: hsl(210, 100%, 25%);
        }
        a {
            color: hsl(210, 100%, 25%);
            text-decoration-color: hsl(210, 100%, 25%);
        }
    }
    &.simple-notice-tip {
        border-top: 2px solid hsl(150, 100%, 25%);
        color: hsl(150, 100%, 25%);
        .simple-notice-title {
            color: hsl(150, 100%, 25%);
        }
        a {
            color: hsl(150, 100%, 25%);
            text-decoration-color: hsl(150, 100%, 25%);
        }
    }
}

[data-theme="dark"] .simple-notice {
    &.simple-notice-warning {
        border-top: 2px solid hsl(0, 65%, 65%);
        color: hsl(0, 65%, 65%);
        .simple-notice-title {
            color: hsl(0, 65%, 65%);
        }
        a {
            color: hsl(0, 65%, 65%);
            text-decoration-color: hsl(0, 65%, 65%);
        }
    }
    &.simple-notice-info {
        border-top: 2px solid hsl(30, 80%, 70%);
        color: hsl(30, 80%, 70%);
        .simple-notice-title {
            color: hsl(30, 80%, 70%);
        }
        a {
            color: hsl(30, 80%, 70%);
            text-decoration-color: hsl(30, 80%, 70%);
        }
    }
    &.simple-notice-note {
        border-top: 2px solid hsl(200, 65%, 65%);
        color: hsl(200, 65%, 65%);
        .simple-notice-title {
            color: hsl(200, 65%, 65%);
        }
        a {
            color: hsl(200, 65%, 65%);
            text-decoration-color: hsl(200, 65%, 65%);
        }
    }
    &.simple-notice-tip {
        border-top: 2px solid hsl(140, 65%, 65%);
        color: hsl(140, 65%, 65%);
        .simple-notice-title {
            color: hsl(140, 65%, 65%);
        }
        a {
            color: hsl(140, 65%, 65%);
            text-decoration-color: hsl(140, 65%, 65%);
        }
    }
}

</style>

在 data 添加 SVG.toml 文件，代码如下。

# Simple-notice Icon
simple-notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/></svg>'
simple-notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z"/></svg>'
simple-notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z"/></svg>'
simple-notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/></svg>'

使用方法：

{${< simple-notice simple-notice-warning >}}
warning. warning. warning. warning. warning
{${< /simple-notice >}}

{${< simple-notice simple-notice-info >}}
info. info. info. info. info
{${< /simple-notice >}}

{${< simple-notice simple-notice-note >}}
note. note. note. note. note
{${< /simple-notice >}}


{${< simple-notice simple-notice-tip >}}
tip. tip. tip. tip. tip
{${< /simple-notice >}}

效果：

warning. warning. warning. warning. warning

info. info. info. info. info

note. note. note. note. note

tip. tip. tip. tip. tip

文本黄色背景

在 layouts/shortcodes添加text-bg.html文件，代码如下。

<span class="text-with-bg">{{ .Inner }}</span>
<style>
    .text-with-bg {
        display: inline;
        background-color: #fcfe9b;
        color: #000002;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: bold;
    }
</style>

使用方法：

{${< text-bg >}}
Hi，很高兴和你认识。
{${< /text-bg >}}

效果：
Hi，很高兴和你认识。

引用（1）

用来替代 Mardown 默认的引用样式。

在 layouts/shortcodes添加quote.html文件，代码如下。

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

<style>
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;
            }
        }
    }
}
</style>

使用方法：

{${< quote >}}
《枫桥夜泊》 唐.张继

月落乌啼霜满天，

江枫渔火对愁眠。

姑苏城外寒山寺，

夜半钟声到客船。
{${< /quote >}}

效果：

《枫桥夜泊》 唐.张继

月落乌啼霜满天，

江枫渔火对愁眠。

姑苏城外寒山寺，

夜半钟声到客船。

引用（2）

在 layouts/shortcodes添加simple-notice.html文件，代码如下。

simple-notice.html
{{- $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 simple-notice-icon") }}
<div class="simple-notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="simple-notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

<style>
.simple-notice {
    position:relative;
    padding: 1em 0 1em 2em;
    margin-bottom: 1em;
    transition: all .5s;
    p:last-child {
        margin-bottom: 0;
    }
    .simple-notice-title {
        position: absolute;
        left: 0.8em;
        .simple-notice-icon {
            width: 1em;
            height: 1em;
            margin-left: -0.8em;
        }
    }
    &.simple-notice-warning {
        border-top: 2px solid hsl(0, 100%, 35%);
        color: hsl(0, 100%, 35%);
        .simple-notice-title {
            color: hsl(0, 100%, 35%);
        }
        a {
            color: hsl(0, 100%, 35%);
            text-decoration-color: hsl(0, 100%, 35%);
        }
    }
    &.simple-notice-info {
        border-top: 2px solid hsl(40, 80%, 45%);
        color: hsl(40, 80%, 45%);
        .simple-notice-title {
            color: hsl(40, 80%, 45%);
        }
        a {
            color: hsl(40, 80%, 45%);
            text-decoration-color: hsl(40, 80%, 45%);
        }
    }
    &.simple-notice-note {
        border-top: 2px solid hsl(210, 100%, 25%);
        color: hsl(210, 100%, 25%);
        .simple-notice-title {
            color: hsl(210, 100%, 25%);
        }
        a {
            color: hsl(210, 100%, 25%);
            text-decoration-color: hsl(210, 100%, 25%);
        }
    }
    &.simple-notice-tip {
        border-top: 2px solid hsl(150, 100%, 25%);
        color: hsl(150, 100%, 25%);
        .simple-notice-title {
            color: hsl(150, 100%, 25%);
        }
        a {
            color: hsl(150, 100%, 25%);
            text-decoration-color: hsl(150, 100%, 25%);
        }
    }
}

[data-theme="dark"] .simple-notice {
    &.simple-notice-warning {
        border-top: 2px solid hsl(0, 65%, 65%);
        color: hsl(0, 65%, 65%);
        .simple-notice-title {
            color: hsl(0, 65%, 65%);
        }
        a {
            color: hsl(0, 65%, 65%);
            text-decoration-color: hsl(0, 65%, 65%);
        }
    }
    &.simple-notice-info {
        border-top: 2px solid hsl(30, 80%, 70%);
        color: hsl(30, 80%, 70%);
        .simple-notice-title {
            color: hsl(30, 80%, 70%);
        }
        a {
            color: hsl(30, 80%, 70%);
            text-decoration-color: hsl(30, 80%, 70%);
        }
    }
    &.simple-notice-note {
        border-top: 2px solid hsl(200, 65%, 65%);
        color: hsl(200, 65%, 65%);
        .simple-notice-title {
            color: hsl(200, 65%, 65%);
        }
        a {
            color: hsl(200, 65%, 65%);
            text-decoration-color: hsl(200, 65%, 65%);
        }
    }
    &.simple-notice-tip {
        border-top: 2px solid hsl(140, 65%, 65%);
        color: hsl(140, 65%, 65%);
        .simple-notice-title {
            color: hsl(140, 65%, 65%);
        }
        a {
            color: hsl(140, 65%, 65%);
            text-decoration-color: hsl(140, 65%, 65%);
        }
    }
}

</style>

使用方法：

{${< blockquote author="李健" link="https://baike.baidu.com/item/%E6%87%82%E5%BE%97/22699721" title="《懂得》" >}}
花开花谢 白天黑夜<br />
一切自然 又不尽然<br />
春夏秋冬 经过才懂<br />
世间冷暖 无非自然
{${< /blockquote >}}

效果：

花开花谢 白天黑夜
一切自然 又不尽然
春夏秋冬 经过才懂
世间冷暖 无非自然

任务列表

在 layouts/shortcodes添加tasklist.html文件，代码如下。

tasklist.html
<div class="task-list">
    <ul>
      {{ $status := .Get "status" }}
      {{ $description := .Get "description" }}
  
      {{ if or (not $status) (not $description) }}
        <li>参数缺失，请确保传递正确的 status 和 description。</li>
      {{ else }}
        <li class="task-{{ $status }}">
          <ul class="task-icon">
            {{ if eq $status "uncompleted" }}<li>🔲</li>
            {{ else if eq $status "completed" }}<li>✔️</li>
            {{ else if eq $status "underWay" }}<li>🟩</li>
            {{ else if eq $status "cancelled" }}<li>❌</li>
            {{ else if eq $status "havePlaned" }}<li>⌛</li>
            {{ else if eq $status "haveBeenReplanned" }}<li>〰️</li>
            {{ end }}
          </ul>
          <label class="{{ if or (eq $status "completed") (eq $status "cancelled") }}completed-or-cancelled{{ end }}">{{ $description }}</label>
        </li>
      {{ end }}
    </ul>
  </div>
  
  <style>
    .task-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  
    .task-list li {
      margin: 2px 0;
      font-size: 1rem;
    }
  
    .task-icon {
      list-style: none;
      padding: 0;
      margin: 0;
      display: inline-block;
    }
  
    .task-icon li {
      display: inline-block;
      margin-right: 5px;
    }
  
    .task-uncompleted {
      color: black;
    }
  
    .task-completed {
      color: blue;
    }
  
    .task-underWay {
      color: green;
    }
  
    .task-cancelled {
      color: gray;
    }
  
    .task-havePlaned {
      color: orange;
    }
  
    .task-haveBeenReplanned {
      color: purple;
    }
  
    label {
      font-weight: normal;
      margin-left: 8px;
    }
  
    /* 为已完成和已取消状态添加删除线 */
    .completed-or-cancelled {
      text-decoration: line-through;
      color: gray; /* 删除线任务文字颜色可以是灰色 */
    }
  </style>

使用方法：

{${< tasklist status="uncompleted" description="未完成" >}}
{${< tasklist status="completed" description="已完成" >}}
{${< tasklist status="underWay" description="进行中" >}}
{${< tasklist status="cancelled" description="已取消" >}}
{${< tasklist status="havePlaned" description="已计划" >}}
{${< tasklist status="haveBeenReplanned" description="已重新计划" >}}

效果：

    • 🔲
    • ✔️
    • 🟩
    • ❌
    • ⌛
    • 〰️

abbr 缩写

在 layouts/shortcodes添加abbr.html文件，代码如下。

<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>

使用：

{${< abbr title="Microsoft Dynamics 365" text="D365" >}}

效果：

D365

Github 卡片

在 layouts/shortcodes添加github.html文件，代码如下。

github.html
<style>
.github {
    border: 0px solid;
    border-radius: 5px;
    width: 95%;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 1em;
    background-color: var(--code-bg);

    .github_bar {
      margin-top: -0.6em;
      margin-left: 0;
    }

    .github_name {
      font-weight: bold;
      text-decoration: none;
      font-size: 24px;
      position: relative;
      top: -0.6em;
      left: 0.3em;
    }

    .github_description {
      margin-top: -0.3em;
      margin-bottom: 1em;
      color: var(--color-contrast-high);
      text-align: justify;
      font-size: 90%;
      width: 95%;
      transition: all 0.5s;
    }

    .github_language {
      margin-top: -0.6em;
    }
    
    .github_language_name {
      color: var(--color-contrast-high);
      font-size: 90%;
      margin-left: 0.5em;
      transition: all 0.5s;
    }
  }
</style>
<div class="github">
    <div class="github_bar">
        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
        <a class="github_name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
    </div>
    <div class="github_description">{{ .Get "description" }}</div>
    <div class="github_language">
        {{ .Get "language" }}
    </div>
</div>

使用：

{${< github name="gdhblog_d365_example_code" link="https://github.com/rickeygong/gdhblog_d365_example_code" description="The code written in the Rickey's Blog post" language="C#、JS、HTML" >}}

效果：

gdhblog_d365_example_code
The code written in the Rickey's Blog post
C#、JS、HTML

Admonition(警告)

1.在 layouts/shortcodes添加admonition.html文件，代码如下。

admonition.html
{{- $inner := .Inner | .Page.RenderString -}}

{{- $iconMap := dict "note" "fas fa-pencil-alt fa-fw" -}}
{{- $iconMap  = dict "abstract" "fas fa-list-ul fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "info" "fas fa-info-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "tip" "fas fa-lightbulb fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "success" "fas fa-check-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "question" "fas fa-question-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "warning" "fas fa-exclamation-triangle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "failure" "fas fa-times-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "danger" "fas fa-skull-crossbones fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "bug" "fas fa-bug fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "example" "fas fa-list-ol fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "quote" "fas fa-quote-right fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "code" "fas fa-solid fa-code" | merge $iconMap -}}
{{- $iconDetails := "fas fa-angle-right fa-fw" -}}


{{- if .IsNamedParams -}}
    {{- $type := .Get "type" | default "note" -}}
    <div class="details admonition {{ $type }}{{ if .Get `open` | ne false }} open{{ end }}">
        <div class="details-summary admonition-title">
            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">
                {{- $inner -}}
            </div>
        </div>
    </div>
{{- else -}}
    {{- $type := .Get 0 | default "note" -}}
    <div class="details admonition {{ $type }}{{ if .Get 2 | ne false }} open{{ end }}">
        <div class="details-summary admonition-title">
            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">
                {{- $inner -}}
            </div>
        </div>
    </div>
{{- end -}}

2.在 ./assets/css/extended 添加 admonition.css 文件，代码如下。

admonition.css
.admonition {
    position: relative;
    margin: 1rem 0;
    padding: 0 0.75rem;
    background-color: rgba(68, 138, 255, 0.1);
    border-left: 0.25rem solid #448aff;
    border-radius: var(--radius);
    /* overflow: auto; */
  }
  
  .admonition .admonition-title {
    font-weight: bold;
    margin: 0 -0.75rem;
    padding: 0.25rem 1.8rem;
    border-bottom: 1px solid rgba(68, 138, 255, 0.1);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-top-left-radius: 4.5px;
    border-bottom-left-radius: 4.5px;
    background-color: rgba(68, 138, 255, 0.25);
  }
  
  .admonition.open .admonition-title {
    background-color: rgba(68, 138, 255, 0.1);
  }
  
  .admonition .admonition-content {
    padding: 0.5rem 0;
  }
  
  .admonition i.icon {
    font-size: 0.85rem;
    color: #448aff;
    position: absolute;
    top: 0.6rem;
    left: 0.4rem;
  }
  
  .admonition i.details-icon {
    position: absolute;
    top: 0.6rem;
    right: 0.3rem;
  }
  
  .admonition.note {
    border-left-color: #448aff;
  }
  
  .admonition.note i.icon {
    color: #448aff;
  }
  
  .admonition.abstract {
    border-left-color: #00b0ff;
  }
  
  .admonition.abstract i.icon {
    color: #00b0ff;
  }
  
  .admonition.info {
    border-left-color: #00b8d4;
  }
  
  .admonition.info i.icon {
    color: #00b8d4;
  }
  
  .admonition.tip {
    border-left-color: #00bfa5;
  }
  
  .admonition.tip i.icon {
    color: #00bfa5;
  }
  
  .admonition.success {
    border-left-color: #00c853;
  }
  
  .admonition.success i.icon {
    color: #00c853;
  }
  
  .admonition.question {
    border-left-color: #64dd17;
  }
  
  .admonition.question i.icon {
    color: #64dd17;
  }
  
  .admonition.warning {
    border-left-color: #ff9100;
  }
  
  .admonition.warning i.icon {
    color: #ff9100;
  }
  
  .admonition.failure {
    border-left-color: #ff5252;
  }
  
  .admonition.failure i.icon {
    color: #ff5252;
  }
  
  .admonition.danger {
    border-left-color: #ff1744;
  }
  
  .admonition.danger i.icon {
    color: #ff1744;
  }
  
  .admonition.bug {
    border-left-color: #f50057;
  }
  
  .admonition.bug i.icon {
    color: #f50057;
  }
  
  .admonition.example {
    border-left-color: #651fff;
  }
  
  .admonition.example i.icon {
    color: #651fff;
  }

  .admonition.code {
    border-left-color: #717175;
  }
  
  .admonition.code i.icon {
    color: #20a0f1;
  }

  .admonition.quote {
    border-left-color: #9e9e9e;
  }
  
  .admonition.quote i.icon {
    color: #9e9e9e;
  }
  
  .admonition.note {
    background-color: rgba(68, 138, 255, 0.1);
  }
  
  .admonition.note .admonition-title {
    border-bottom-color: rgba(68, 138, 255, 0.1);
    background-color: rgba(68, 138, 255, 0.25);
  }
  
  .admonition.note.open .admonition-title {
    background-color: rgba(68, 138, 255, 0.1);
  }
  
  .admonition.abstract {
    background-color: rgba(0, 176, 255, 0.1);
  }
  
  .admonition.abstract .admonition-title {
    border-bottom-color: rgba(0, 176, 255, 0.1);
    background-color: rgba(0, 176, 255, 0.25);
  }
  
  .admonition.abstract.open .admonition-title {
    background-color: rgba(0, 176, 255, 0.1);
  }
  
  .admonition.info {
    background-color: rgba(0, 184, 212, 0.1);
  }
  
  .admonition.info .admonition-title {
    border-bottom-color: rgba(0, 184, 212, 0.1);
    background-color: rgba(0, 184, 212, 0.25);
  }
  
  .admonition.info.open .admonition-title {
    background-color: rgba(0, 184, 212, 0.1);
  }
  
  .admonition.tip {
    background-color: rgba(0, 191, 165, 0.1);
  }
  
  .admonition.tip .admonition-title {
    border-bottom-color: rgba(0, 191, 165, 0.1);
    background-color: rgba(0, 191, 165, 0.25);
  }
  
  .admonition.tip.open .admonition-title {
    background-color: rgba(0, 191, 165, 0.1);
  }
  
  .admonition.success {
    background-color: rgba(0, 200, 83, 0.1);
  }
  
  .admonition.success .admonition-title {
    border-bottom-color: rgba(0, 200, 83, 0.1);
    background-color: rgba(0, 200, 83, 0.25);
  }
  
  .admonition.success.open .admonition-title {
    background-color: rgba(0, 200, 83, 0.1);
  }
  
  .admonition.question {
    background-color: rgba(100, 221, 23, 0.1);
  }
  
  .admonition.question .admonition-title {
    border-bottom-color: rgba(100, 221, 23, 0.1);
    background-color: rgba(100, 221, 23, 0.25);
  }
  
  .admonition.question.open .admonition-title {
    background-color: rgba(100, 221, 23, 0.1);
  }
  
  .admonition.warning {
    background-color: rgba(255, 145, 0, 0.1);
  }
  
  .admonition.warning .admonition-title {
    border-bottom-color: rgba(255, 145, 0, 0.1);
    background-color: rgba(255, 145, 0, 0.25);
  }
  
  .admonition.warning.open .admonition-title {
    background-color: rgba(255, 145, 0, 0.1);
  }
  
  .admonition.failure {
    background-color: rgba(255, 82, 82, 0.1);
  }
  
  .admonition.failure .admonition-title {
    border-bottom-color: rgba(255, 82, 82, 0.1);
    background-color: rgba(255, 82, 82, 0.25);
  }
  
  .admonition.failure.open .admonition-title {
    background-color: rgba(255, 82, 82, 0.1);
  }
  
  .admonition.danger {
    background-color: rgba(255, 23, 68, 0.1);
  }
  
  .admonition.danger .admonition-title {
    border-bottom-color: rgba(255, 23, 68, 0.1);
    background-color: rgba(255, 23, 68, 0.25);
  }
  
  .admonition.danger.open .admonition-title {
    background-color: rgba(255, 23, 68, 0.1);
  }
  
  .admonition.bug {
    background-color: rgba(245, 0, 87, 0.1);
  }
  
  .admonition.bug .admonition-title {
    border-bottom-color: rgba(245, 0, 87, 0.1);
    background-color: rgba(245, 0, 87, 0.25);
  }
  
  .admonition.bug.open .admonition-title {
    background-color: rgba(245, 0, 87, 0.1);
  }
  
  .admonition.example {
    background-color: rgba(101, 31, 255, 0.1);
  }
  
  .admonition.example .admonition-title {
    border-bottom-color: rgba(101, 31, 255, 0.1);
    background-color: rgba(101, 31, 255, 0.25);
  }
  
  .admonition.example.open .admonition-title {
    background-color: rgba(101, 31, 255, 0.1);
  }

  .admonition.code {
    background-color: rgba(245, 245, 245, 0.1); /* 背景颜色 */
  }
  
  .admonition.code .admonition-title {
    border-bottom-color: rgba(101, 31, 255, 0.1);
    background-color: rgba(245, 245, 245, 0.25);
  }
  
  .admonition.code.open .admonition-title {
    background-color: rgba(245, 245, 245, 0.1);
  }
  
  .admonition.quote {
    background-color: rgba(60, 60, 60, .1);
  }
  
  .admonition.quote .admonition-title {
    border-bottom-color: rgba(60, 60, 60, 0.1);
    background-color: rgba(60, 60, 60, 0.25);
  }
  
  .admonition.quote.open .admonition-title {
    background-color: rgba(60, 60, 60, 0.1);
  }
  
  .admonition:last-child {
    margin-bottom: 0.75rem;
  }
  
  .details .details-summary:hover {
    cursor: pointer;
  }
  
  .details i.details-icon {
    color: var(--content);
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
  }
  
  [class=dark] .details i.details-icon {
    color: var(--content);
  }
  
  .details .details-content {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
    -moz-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
    -o-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
    transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
  }
  
  .details.open i.details-icon {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .details.open .details-content {
    max-height: 12000px;
    -webkit-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
    -moz-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
    -o-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
    transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
  }

3.将主题 layouts/partials 文件夹下的 extend_footer.html 文件拷贝到博客项目下的 layouts/partials ，然后在最底部添加如下代码。

{{- /* admonition toggle */ -}}
<script>
  let details = document.getElementsByClassName('details')
  details = details || [];
  for (let i = 0; i < details.length; i++) {
    let element = details[i]
    const summary = element.getElementsByClassName('details-summary')[0];
    if (summary) {
      summary.addEventListener('click', () => {
        element.classList.toggle('open');
      }, false);
    }
  }
</script>

使用：

{${< admonition node "笔记" true >}}这里填写描述信息{${< /admonition >}}
{${< admonition abstract "摘要" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition info "信息" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition tip "提示" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition success "成功" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition question "问题" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition warning "警告" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition failure "失败" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition danger "危险" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition bug "Bug" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition example "示例" false >}}这里填写描述信息{${< /admonition >}}
{${< admonition quote "引用" false >}}这里填写描述信息{${< /admonition >}}

效果：

笔记
这里填写描述信息
摘要
这里填写描述信息
信息
这里填写描述信息
提示
这里填写描述信息
成功
这里填写描述信息
问题
这里填写描述信息
警告
这里填写描述信息
失败
这里填写描述信息
危险
这里填写描述信息
Bug
这里填写描述信息
示例
这里填写描述信息
引用
这里填写描述信息

在新标签页打开链接

方式 1

在 layouts/shortcodes添加blanklink.html文件，代码如下。

<a href="{{ .Get "url" }}" target="_blank" rel="noopener noreferrer">
    {{ .Get "des" }}
</a>

使用：

{${< blanklink url="https://gdhblog.com" des="Rickey's Blog" >}}

效果：

Rickey's Blog

方式 2

参考：

Hugo PaperMod - 设置基本链接（新标签页打开）

文章内链

在 layouts/shortcodes 添加 xrelref.html 文件，代码如下。

{{ with .Site.GetPage (.Get 0) }}<a href="{{ .RelPermalink }}" title="{{ .Title }}" target="_blank" class="xrelref-custom-link">{{ .Title }}</a>{{ end }}

<style>
    .xrelref-custom-link {
        font-weight: bold;
        color: rgb(247, 138, 47);
        transition: color 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
        text-decoration-thickness: 1px;  /* 初始下划线细一点 */
    }

    .xrelref-custom-link:hover {
        font-style: oblique;
        color:rgb(196, 10, 177); /* 悬停时变为紫色 */
        text-decoration-color: rgb(196, 10, 177); /* 悬停时下划线颜色变化 */
        text-decoration-thickness: 2px; /* 悬停时加粗下划线 */
    }
</style>

使用：

{${< xrelref "DynamicsCRM-UseConsoleAppConnCRMUsingOffice365AuthType.zh.md"  >}}

效果：

Dynamics CRM - 使用 Console App 连接 CRM —— Office365 AuthType