PaperMod 主题 - 短代码

2025-02-08 · 8 分钟 · 3699 字 · 龚东海 | 语言：

English

· 阅读量：

提示

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

主题自带的短代码

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

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

collapse

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

使用方法: 在内容中使用

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

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

{${< /collapse >}}

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

效果如下：

汇总说明

xx
xxx
xxxx
xxxxx

figure

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

使用方法：

# 支持的参数有 `src`、`title`、`caption`、`link`、`target`、`rel`、`width`、`height` 等
{${< figure src="https://gdhblog.com/blog-imgs/20250209/longhua-temple-02.jpg" title="上海·龙华寺" caption="说明：龙华塔" >}}

效果：

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 -}} class=cl>{{- $raw := (markdownify .Inner | chomp) -}} class=cl>{{- $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 -}} class=cl>{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon simple-notice-icon") }} class=cl><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 -}} class=cl></div> class=cl><style> class=cl>.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%); } } class=cl>} class=cl>[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%); } } class=cl>} class=cl></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

主题自带的短代码#

collapse#

figure#

inTextImg#

ltr 和 rtl#

rawhtml#

常用的短代码#

通知#

通知(简版)#

文本黄色背景#

引用（1）#

引用（2）#

任务列表#

abbr 缩写#

主题自带的短代码

collapse

figure

inTextImg

ltr 和 rtl

rawhtml

常用的短代码

通知

通知(简版)

文本黄色背景

引用（1）

引用（2）

任务列表

abbr 缩写