PaperMod theme - Shortcode

2025-02-08 · 6 min · 2763 words · Rickey | Translations：

简体中文

· Readings:

Tip

The $ symbol in the markdown shortcode posted in the “Usage” section of this article was added so that the shortcode would not be rendered.

Themes come with their own shortcodes

PaperMod theme provides several shortcodes, what are the functions of these shortcodes? How do I use them?

No.	Shortcode	Descript
1	collapse	Creates a collapsible content block to show hidden details
2	figure	Inserts an image with a title and description
3	inTextImg	Inserts a small image into the text
4	ltr	Create a right-to-left text block
5	rtl	Create a text block of text
6	rawhtml	Outputs the HTML code as is, without any escaping or rendering

collapse

Function: Creates a collapsible content block for displaying hidden details.

Usage:

{${< collapse summary="Summary notes" >}}

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

{${< /collapse >}}

Effect:

Summary notes

xx
xxx
xxxx
xxxxx

figure

Function: Insert image with title and description

Usage:

# Supported parameters are `src`, `title`, `caption`, `link`, `target`, `rel`, `width`, `height` and so on.
{${< figure src="https://gdhblog.com/blog-imgs/20250209/longhua-temple-02.jpg" title="上海·龙华寺" caption="说明：龙华塔" >}}

Effect:

inTextImg

Usage:

{${< inTextImg url="https://gdhblog.com/blog-imgs/20250209/longhua-temple-02.jpg" height="400" alt="上海·龙华寺" >}}

Effect:

ltr & rtl

Function: Creates left-to-right (ltr) or right-to-left (rtl) blocks of text.

Effect:

Content from left to right

{${< ltr >}}Content from left to right{${< /ltr >}}

Content from right to left

{${< rtl >}}Content from right to left{${< /rtl >}}

Effect:

ltr

Content from left to right

rtl

Content from right to left

rawhtml

Function: Output HTML code as is, without any escaping or rendering.

Usage:

{${< rawhtml >}}<p>Original HTML code</p>{${< /rawhtml >}}

Effect:

Original HTML code

Commonly used short codes

Notice

1.Add notice.html file to layouts/shortcodes with the following code.

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.Add the notice.css file to the root directory assets/css/extended with the following code.

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.In the . /i18n/ folder, add translations for zh.yaml and 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.Add info/note/tip/warning svg icon

Create a new icons folder in the root directory (same level as the content folder), add svg icons for info/note/tip/warning, download the icons from the hugo-notice.

Usage:

{${< notice info >}}
info info info
{${< /notice >}}

{${< notice note >}}
note note note
{${< /notice >}}

{${< notice tip >}}
tip tip tip
{${< /notice >}}

{${< notice warning >}}
warning warning warning
{${< /notice >}}

Effect:

Info

info info info

Note

note note note

Tip

tip tip tip

Warning

warning warning warning

Notification (short version)

Add the simple-notice.html file to layouts/shortcodes with the following code.

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>
Add the SVG.toml file to data with the following code.
# 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>'
Usage:
{${< 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 >}}
Effect:
warning. warning. warning. warning. warning
info. info. info. info. info
note. note. note. note. note
tip. tip. tip. tip. tip
Text yellow background#
Add a text-bg.html file to layouts/shortcodes with the following code.
<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>
Usage:
{${< text-bg >}}
Hi, nice to meet you.
{${< /text-bg >}}
Effect:
Hi, nice to meet you.
Citation (1)#
This is used to replace Mardown’s default quote style.
Add a quote.html file to layouts/shortcodes with the following code.
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>
Usage:
{${< quote >}}
a b c d

e f g h

i j k l

m n o p

q r s t

u v w x y z
{${< /quote >}}
Effect:
a b c d
e f g h
i j k l
m n o p
q r s t
u v w x y z
Citation (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>
Usage:
{${< blockquote author="Wikipedia" link="https://en.wikipedia.org/wiki/Hugo_(software)" title="Hugo (software)" >}}
Hugo is a static site generator written in Go. Steve Francia originally created Hugo as an open source project in 2013. Since v0.14 in 2015, Hugo has continued development under the lead of Bjørn Erik Pedersen with other contributors. Hugo is licensed under the Apache License 2.0.
{${< /blockquote >}}
Effect:
Hugo is a static site generator written in Go. Steve Francia originally created Hugo as an open source project in 2013. Since v0.14 in 2015, Hugo has continued development under the lead of Bjørn Erik Pedersen with other contributors. Hugo is licensed under the Apache License 2.0.
Wikipedia
Hugo (software)
Task list#
Add the tasklist.html file to layouts/shortcodes with the following code.
tasklist.html
<div class="task-list">
    <ul>
      {{ $status := .Get "status" }}
      {{ $description := .Get "description" }}
  
      {{ if or (not $status) (not $description) }}
        <li>parameters are missing, make sure to pass the correct status and 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>
  
Usage:
{${< tasklist status="uncompleted" description="uncompleted" >}}
{${< tasklist status="completed" description="completed" >}}
{${< tasklist status="underWay" description="underWay" >}}
{${< tasklist status="cancelled" description="cancelled" >}}
{${< tasklist status="havePlaned" description="havePlaned" >}}
{${< tasklist status="haveBeenReplanned" description="haveBeenReplanned" >}}
Effect:
🔲
uncompleted
✔️
completed
🟩
underWay
❌
cancelled
⌛
havePlaned
〰️
haveBeenReplanned
abbr abbreviation#
Add the abbr.html file to layouts/shortcodes with the following code.
<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>
Usage:
{${< abbr title="Microsoft Dynamics 365" text="D365" >}}
Effect:
D365

Themes come with their own shortcodes#

collapse#

figure#

inTextImg#

ltr & rtl#

rawhtml#

Commonly used short codes#

Notice#

Notification (short version)#

Text yellow background#

Citation (1)#

Citation (2)#

Task list#

abbr abbreviation#

Themes come with their own shortcodes

collapse

figure

inTextImg

ltr & rtl

rawhtml

Commonly used short codes

Notice

Notification (short version)

Text yellow background

Citation (1)

Citation (2)

Task list

abbr abbreviation