提示
本文中 “使用方法” 贴出来的 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 参数指定折叠块的标题。
效果如下:
汇总说明
figure
功能: 插入带标题和说明的图片
使用方法:
# 支持的参数有 `src`、`title`、`caption`、`link`、`target`、`rel`、`width`、`height` 等
{${< figure src="https://gdhblog.com/blog-imgs/20250209/longhua-temple-02.jpg" title="上海·龙华寺" caption="说明:龙华塔" >}}
属性 | 描述 | 值 |
---|---|---|
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" >}}
效果:
D365Github 卡片
在 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" >}}
效果:
Admonition(警告)
1.在 layouts/shortcodes
添加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 {
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 >}}
效果:
在新标签页打开链接
在 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文章内链
在 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
感谢您的耐心阅读!来选个表情,或者留个评论吧!