Hugo短代码

前言

Hugo 可以通过模板文件很方便地添加短代码，紧接上一篇修改主题的文章，这里以 Diary 主题为例，记录添加短代码的过程。

准备工作

主题没有 custom.scss 文件，自定义方式可以将 ~/themes/diary/assets/scss/journal.scss 文件复制到站点根目录下 ~/assets/scss 中，在其中直接更改，也可以复制后，在末尾添加 custom.scss 引用，然后在自定义文件中修改，这里采用第二种方式，文中 ~ 均代表博客根目录。

复制 journal.scss 文件到站点根目录下。
创建两个文件 shortcodes.scss 用来放置自定义样式。
在复制的 ~/assets/scss/journal.scss 末尾添加代码引用自定义样式：

1@import "shortcodes"

在 ~/data 文件夹下创建 SVG.toml 文件，用来存放短代码引用的图标，如果添加的短代码不涉及图标引用，可以不创建。
在 ~/layouts/shortcodes/ 目录下创建 <shortcodes>.html 文件，用来存放短代码内容，<> 内表示短代码名称，后文会更换。

豆瓣条目

配置

新建 ~/layouts/shortcodes/douban.html，放入下面的代码：

 1{{ $dbUrl := .Get 0 }}
 2{{ $dbApiUrl := "https://neodb.social/api/catalog/fetch?url=" }}
 3{{ $dbFetch := getJSON $dbApiUrl $dbUrl }}
 4
 5{{ if $dbFetch }}
 6    {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
 7    <div class="db-card">
 8        <div class="db-card-subject">
 9            <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
10            <div class="db-card-content">
11                <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
12                <div class="rating"><span class="allstardark"><span class="allstarlight" style="width:{{ mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</span></div>
13                <div class="db-card-abstract">{{ $dbFetch.brief }}</div>
14            </div>
15            <div class="db-card-cate">{{ $dbFetch.category }}</div>
16        </div>
17    </div>
18{{else}}
19    <p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
20{{end}}

接下来在 ~/assets/scss/shortcodes.scss 中添加下面的样式代码：

  1/* db-card -------- start */
  2.db-card {
  3  margin: 2rem 3rem;
  4  background: #fafafa;
  5  border-radius: 8px;
  6  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
  7}
  8
  9.db-card-subject {
 10  display: flex;
 11  align-items: flex-start;
 12  line-height: 1.6;
 13  padding: 12px;
 14  position: relative;
 15}
 16
 17.db-card-content {
 18  flex: 1 1 auto;
 19}
 20
 21.db-card-post {
 22  width: 96px;
 23  margin-right: 15px;
 24  display: flex;
 25  flex: 0 0 auto;
 26}
 27
 28.db-card-title {
 29  margin-bottom: 5px;
 30  font-size: 18px;
 31}
 32
 33.db-card-title a {
 34  text-decoration: none !important;
 35}
 36
 37.db-card-abstract,
 38.db-card-comment {
 39  font-size: 14px;
 40  overflow: auto;
 41  max-height: 3rem;
 42}
 43
 44.db-card-cate {
 45  position: absolute;
 46  top: 0;
 47  right: 0;
 48  background: #f99b01;
 49  padding: 1px 8px;
 50  font-size: small;
 51  font-style: italic;
 52  border-radius: 0 8px 0 8px;
 53  text-transform: capitalize;
 54}
 55
 56.db-card-post img {
 57  width: 96px !important;
 58  height: 96px !important;
 59  border-radius: 4px;
 60  -o-object-fit: cover;
 61  object-fit: cover;
 62}
 63
 64.rating {
 65  margin: 0 0 5px;
 66  font-size: 13px;
 67  line-height: 1;
 68  display: flex;
 69  align-items: center;
 70}
 71
 72.rating .allstardark {
 73  position: relative;
 74  color: #f99b01;
 75  height: 16px;
 76  width: 80px;
 77  background-size: auto 100%;
 78  margin-right: 8px;
 79  background-repeat: repeat;
 80  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
 81}
 82
 83.rating .allstarlight {
 84  position: absolute;
 85  left: 0;
 86  color: #f99b01;
 87  height: 16px;
 88  overflow: hidden;
 89  background-size: auto 100%;
 90  background-repeat: repeat;
 91  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);
 92}
 93
 94body.night{ 
 95  .db-card {
 96    background: #212121;
 97  }
 98  .db-card-abstract,
 99  .db-card-comment {
100    color: #e6e6e6;
101  }
102 .db-card-cate {
103    color: #e6e6e6;
104  }
105  .rating_nums{
106    color: #e6e6e6
107  }
108}
109@media (max-width: 550px) {
110  .db-card {
111    margin: 0.8rem 1rem;
112  }
113
114  .db-card-comment {
115    display: none;
116  }
117}
118/* db-card -------- end */

使用

在文章中添加短代码，语法如下(将大括号中间的 \ 去掉)：

1{\{< douban "https://book.douban.com/subject/35496106/">}\}
2{\{< douban "https://movie.douban.com/subject/35267208/">}\}

样式预览：

一日三秋

8.4

刘震云2021重磅新作，人间多少事，两三笑话中。小说《一日三秋》引用民间“花二娘”的传说，以想象的故事描述“我”记忆中的六叔生前所画的画作，探讨延津人幽默的本质。从两米见方的剧团人物群像素描中挑出陈长杰、李延生、樱桃，围绕几位主人公身边出现的人物，有开车的、扫大街的、开饭馆的，串联起几个家庭的人生经历和故事，把世人被忘却的情感和心事复刻出来。后引出寻常父子二人遍尝生活辛酸后对人生至理的了悟，在不同时间和地点悟出：一个重要的的瞬间，在人生中犹如一日三秋，但这瞬间永不再来。小说充满了黑色幽默，世俗生活所包含的哲理，及打破日常生活壁垒的想象力。刘震云写出现实与想象中的人性、土地、命运。既是幽默，也是讽刺；既是魔幻，也是现实。【编辑推荐】 ★《一日三秋》是当代著名作家刘震云的现实魔幻主义新作，《一句顶一万句》的升级版，从百年延宕到千年求索。 ★从《一地鸡毛》中的一斤豆腐到《一日三秋》中的一把韭菜，我们走过三十年，心态却如同经历了三千年。 ★神界鬼界画里画外戏里戏外梦里梦外故乡他乡历史当下——“一日三秋”不止于时间体验，更是六重矛盾中的空间体验。 ★《一日三秋》是刘震云对故乡、对人生的多维反思，以笑话结构全书，以冷幽默消解严峻。 ★在人与故乡渐行渐远的年代，故乡成为一个遥远的记忆符号，然而它对人的影响却是连绵不绝的。刘震云以其独特的观察和幽默风格，写出了人类本质的命运。

book

流浪地球2

太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新的家园。然而宇宙之路危机四伏，为了拯救地球，流浪地球时代的年轻人再次挺身而出，展开争分夺秒的生死之战。

movie

样式代码中第 94 行 body.night 是 diary 主题黑暗模式的定义，如果是其他的主题，需要做对应的修改。

Notice

配置

新建 ~/layouts/shortcodes/notice.html 写入如下内容：

 1{{- $noticeType := .Get 0 -}}
 2
 3{{- $raw := (markdownify .Inner | chomp) -}}
 4
 5{{- $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 -}}
 6
 7{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
 8<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
 9    <div class="notice-title">{{ $icon | safeHTML }}</div>
10    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
11</div>

在 ~/data/SVG.toml 中引入图标：

1notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
2notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
3notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
4notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

在 ~/assets/scss/shortcodes.scss 中添加样式代码：

 1// notice 短代码
 2.notice {
 3    position:relative;
 4    padding: 1em 1em 1em 2.5em;
 5    margin-bottom: 1em;
 6    border-radius: 4px;
 7    p:last-child {
 8        margin-bottom: 0;
 9    }
10    .notice-title {
11        position: absolute;
12        left: 0.8em;
13        .notice-icon {
14            width: 1.2em;
15            height: 1.2em;
16        }
17    }
18    &.notice-warning {
19        background: hsla(0, 65%, 65%, 0.15);
20        border-left: 5px solid hsl(0, 65%, 65%);
21        .notice-title {
22            color: hsl(0, 65%, 65%);
23        }
24    }
25    &.notice-info {
26        background: hsla(30, 80%, 70%, 0.15);
27        border-left: 5px solid hsl(30, 80%, 70%);
28        .notice-title {
29            color: hsl(30, 80%, 70%);
30        }
31    }
32    &.notice-note {
33        background: hsla(200, 65%, 65%, 0.15);
34        border-left: 5px solid hsl(200, 65%, 65%);
35        .notice-title {
36            color: hsl(200, 65%, 65%);
37        }
38    }
39    &.notice-tip {
40        background: hsla(140, 65%, 65%, 0.15);
41        border-left: 5px solid hsl(140, 65%, 65%);
42        .notice-title {
43            color: hsl(140, 65%, 65%);
44        }
45    }
46}
47body.night{
48    .notice {
49        &.notice-warning {
50            background: hsla(0, 25%, 25%, 0.15);
51            border-left: 5px solid hsl(0, 25%, 35%);
52            .notice-title {
53                color: hsl(0, 25%, 35%);
54            }
55        }
56        &.notice-info {
57            background: hsla(30, 25%, 35%, 0.15);
58            border-left: 5px solid hsl(30, 25%, 35%);
59            .notice-title {
60                color: hsl(30, 25%, 35%);
61            }
62        }
63        &.notice-note {
64            background: hsla(200, 25%, 35%, 0.15);
65            border-left: 5px solid hsl(200, 25%, 35%);
66            .notice-title {
67                color: hsl(200, 25%, 35%);
68            }
69        }
70        &.notice-tip {
71            background: hsla(140, 25%, 35%, 0.15);
72            border-left: 5px solid hsl(140, 25%, 35%);
73            .notice-title {
74                color: hsl(140, 25%, 35%);
75            }
76        }
77    }
78}

使用

使用语法如下：

 1{\{< notice notice-warning >}}
 2你好。
 3{\{< /notice >}}
 4
 5{\{< notice notice-info >}}
 6你好。
 7{\{< /notice >}}
 8
 9{\{< notice notice-note >}}
10你好。
11{\{< /notice >}}
12
13{\{< notice notice-tip >}}
14你好。
15{\{< /notice >}}

预览：

你好。

友链

配置

新建 ~/layouts/shortcodes/friend.html 文件，写入：

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

在 shortcodes.scss 中添加样式：

  1// 友链
  2// 头像边框颜色
  3$avatar-border-color: lighten($color-accent, 25%);
  4$avatar-border-color-dark: #C0C0C0;
  5
  6// style-card 背景色
  7$friend-link-background-color: lighten($color-accent, 43%);
  8$friend-link-background-color-dark: #69697141;
  9
 10// 友链 name 原始色
 11$friend-link-color: #11a1a2;
 12$friend-link-color-dark: #ffffff;
 13
 14// 友链 name 气泡响应对比色
 15$friend-link-hover-color: #ea4e2f;
 16$friend-link-hover-color-dark: rgb(241, 213, 159);
 17
 18// bio 简介上下文
 19$context-color: #404040;
 20$context-color-dark: #c0c0c0;
 21
 22// 友链头像及头像边框的样式
 23.friend-avatar {
 24    width: 56px;
 25    height: 56px;
 26    padding: 2px;
 27    margin-top: 14px;
 28    margin-left: 14px;
 29    border-radius: 40px !important; 
 30    border: 3.0px inset $avatar-border-color;
 31
 32    body.night & {
 33        border: 3.6px inset $avatar-border-color-dark;
 34    }
 35}
 36
 37.friend-link-div {
 38    // 实现卡片双栏排列效果
 39    height: auto;
 40    margin-top: auto;
 41    margin-inline-start: 4.5%;
 42    width: 43%;
 43    display: inline-block !important;
 44
 45    // 控制上下连续排列的卡片之间的行距
 46    margin-bottom: 11px;
 47
 48    // 卡片圆角
 49    border-radius: 7px 7px 7px 7px;
 50
 51    // 卡片阴影
 52    -webkit-box-shadow: 0px 14px 32px 0px rgba(231, 224, 224, 0.15);
 53    -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
 54    box-shadow: 0.7px 1px 6px 0px rgba(0, 0, 0, 0.16);
 55
 56    // 卡片背景色
 57    background: $friend-link-background-color;
 58
 59    body.night & {
 60        background: $friend-link-background-color-dark;
 61    }
 62
 63    // 卡牌气泡响应动画
 64    -webkit-transition: transform 0.4s ease;
 65    -moz-transition: transform 0.4s ease;
 66    -o-transition: transform 0.4s ease;
 67    transition: transform 0.15s ease;
 68
 69    &:hover {
 70        transform: scale(1.03);
 71    }
 72}
 73
 74
 75.friend-link-avatar {
 76    width: 92px;
 77    float: left;
 78    margin-right: 2px;
 79
 80}
 81
 82// name 特效样式， hover 气泡效果,友链 name 变色
 83.friend-link-info {
 84    margin-top: 13px;
 85    margin-right: 18px;
 86    color: $friend-link-color;
 87
 88    body.night & {
 89        color: $friend-link-color-dark;
 90    }
 91
 92    &:hover {
 93        color: $friend-link-hover-color;
 94
 95        body.night & {
 96            color: $friend-link-hover-color-dark;
 97        }
 98    }
 99}
100
101// name 文字样式
102.friend-name {
103    text-overflow: ellipsis;
104    overflow: hidden;
105    white-space: nowrap;
106    font-style: normal;
107    font-family: 'Comic Sans MS', cursive;
108    font-size: 16px;
109    body.night & {
110        color: $friend-link-color-dark;
111    }
112}
113
114// bio 文字样式
115.friend-bio {
116    text-overflow: ellipsis;
117    overflow: hidden;
118    white-space: nowrap;
119    margin-top: auto;
120
121    // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
122    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
123    font-size: 14px;
124
125    color: $context-color;
126
127    body.night & {
128        color: $context-color-dark;
129    }
130
131}
132
133// 响应式页面，允许根据不同的尺寸调整样式
134@media screen and (max-width: 720px) {
135    .friend-link-div {
136        width: 92%;
137        margin-right: auto;
138    }
139
140    .friend-bio {
141        margin: auto;
142        align-content: center;
143        justify-content: left;
144    }
145
146    .friend-link-avatar {
147        width: 84px;
148        margin: auto;
149    }
150
151    .friend-link-info {
152        height: 100%;
153        margin: auto;
154        display: flex;
155        align-items: center;
156        justify-content: left;
157    }
158
159    .friend-name {
160        font-size: 14px;
161        font-style: normal;
162        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
163    }
164}

样式代码中 body.night $color-accent 是 diary 主题黑暗模式的定义，如果是其他的主题，需要做对应的修改。

使用

1{\{< friend name="名称" url="网址" avatar="头像" bio="简介" >}}

时间线

配置

新建 ~/layouts/shortcodes/timeline.html 文件，写入：

 1{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}{{- $url := .Get "url" -}}
 2
 3<div class="timeline__row">
 4    <div class="timeline__time">
 5        <div class="timeline__time">{{ $date }}</div>
 6        <div class="timeline__split-line"></div>
 7    </div>
 8    <div class="timeline__content">
 9        <div class="timeline__tags">
10            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
11            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
12            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
13            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
14            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
15        </div>
16        <a href="{{ $url }}">
17            <div class="timeline__title">{{ $title }}</div>
18        </a>
19        <!-- title 可点击，默认就是跳转时间轴所在页 -->
20        <div class="timeline__description">
21            {{ $description }}
22        </div>
23    </div>
24</div>

在 shortcodes.scss 添加样式：

  1// timeline
  2.timeline {
  3    display: flex;
  4    flex-direction: column;
  5}
  6
  7.timeline__row {
  8    display: flex;
  9    padding-left: 4%;
 10    height: 90px;
 11}
 12
 13.timeline__time {
 14    flex: 0 0 110px;
 15    color: #030100;
 16    font-size: 17px;
 17    text-transform: uppercase;
 18    position: relative;
 19    display: flex;
 20    flex-direction: column;
 21    align-items: center;
 22    padding: 0.5rem 0;
 23}
 24
 25.timeline__time-text {
 26    margin: 0;
 27}
 28
 29.timeline__split-line {
 30    position: absolute;
 31    top: 0.5rem;
 32    right: -20px;
 33    height: 100%;
 34    width: 2px;
 35    background-color: $color-accent;
 36    z-index: 0;
 37}
 38
 39.timeline__split-line:before {
 40    content: "";
 41    position: absolute;
 42    top: 24%;
 43    right: -4px;
 44    transform: translateY(-50%);
 45    width: 10px;
 46    height: 10px;
 47    background-color: $color-accent;
 48    box-shadow: 0 0 0 4px var(--theme);
 49    border-radius: 50%;
 50    border: 0px solid #84c4e2;
 51    z-index: -1;
 52}
 53
 54.timeline__content {
 55    flex: 1;
 56    margin-left: 4.5rem;
 57    padding: 0.5rem 0 1.2rem 0;
 58}
 59
 60.timeline__title {
 61    margin: 0;
 62    margin-bottom: 2px;
 63    padding-top: 3px;
 64    margin-left: 0.5rem;
 65    color: var(--content);
 66    font-family: var(--font-family-teshu);
 67    font-size: 19px;
 68    font-weight: 600;
 69    width: fit-content;
 70    display: inline-block;
 71    vertical-align: middle;
 72    /* 垂直居中对齐 */
 73}
 74
 75.timeline__tags {
 76    display: inline-block;
 77    padding: 0;
 78    margin-left: 0.3rem;
 79    align-items: center;
 80    gap: 0.3rem;
 81}
 82
 83.timeline__tag {
 84    display: inline-block;
 85    color: var(--secondary);
 86    background-color: lighten($color-accent, 25%);
 87    border: 1.5px solid $color-accent;
 88    border-radius: 999px;
 89    padding: 0rem 0.5rem;
 90    font-size: 12px;
 91    white-space: nowrap;
 92    line-height: 1.4rem;
 93    opacity: 0.8;
 94    vertical-align: middle;
 95    /* 垂直居中对齐 */
 96}
 97
 98.timeline__description {
 99    font-size: 15px;
100    line-height: 1.6;
101    color: #030100;
102    overflow: hidden;
103    text-overflow: ellipsis;
104    margin: 0.5rem 0 0.4rem 1.5rem;
105    /* 添加 1.5rem 的左侧内边距 */
106}
107body.night{
108    .timeline__time, .timeline__description{
109        color: #E6E6E6;
110    }
111}
112@media screen and (max-width: 768px) {
113    .timeline__time {
114        font-size: 14px;
115        /* 在小屏幕上使用较小的字体大小 */
116    }
117    .timeline__title {
118        font-size: 16px;
119        /* 在小屏幕上使用较小的字体大小 */
120    }
121    .timeline__description {
122        font-size: 14px;
123        /* 在小屏幕上使用较小的字体大小 */
124    }
125}

样式代码中 body.night $color-accent 是 diary 主题黑暗模式的定义，如果是其他的主题，需要做对应的修改。

使用

1{\{< timeline date="2023-10-01" title="国庆节" description="祖国生日快乐" tags="节日" url="" >}\}

预览：

2023-10-01

节日

国庆节

祖国生日快乐

块引用

配置

新建 ~/layouts/shortcodes/quote.html 文件，写入：

 1<blockquote>
 2    <p>{{ .Inner | markdownify }}</p>
 3    {{- if or (.Get "author") (.Get "source") -}}
 4    <span class="cite"><span>― </span>
 5        {{- if .Get "author" -}}
 6        <span>
 7            {{- .Get "author" -}}{{- if .Get "source" -}}, {{ end -}}
 8        </span>
 9        {{- end -}}
10        {{- with .Get "url" -}}<a href="{{ . }}">{{- end -}}
11            <cite>{{ .Get "source" }}</cite>
12        {{- if .Get "url" -}}</a>{{- end -}}
13    </span>
14    {{- end -}}
15</blockquote>
16    
17<style>
18
19    span.cite {
20        display: block;
21        margin-top: 1em;
22        font-size: 0.8em;
23        text-align: right;
24    }
25</style>

这里样式比较简单，直接写入了 HTML 文件中。

使用

1{\{< quote author="作者/说话的人" source="书名/来源" url="链接（可选）" >}}
2内容
3{\{< /quote >}}

预览：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
― A famous person, The book they wrote

按钮

配置

新建 ~/layouts/shortcodes/button.html 文件，写入：

 1<a class="custom-button"
 2  {{ with .Get "link" }}href="{{ . }}"{{ end }}
 3  {{ if eq (.Get "target") "_self" }}
 4    target="_self"
 5  {{ else }}
 6    target="_blank" rel="noopener noreferrer"
 7  {{ end }}
 8  {{ with .Get "download" }}download="{{ . }}"{{ end }}
 9  role="button"
10>
11  {{ .Inner }}
12</a>

在 shortcodes.scss 添加样式：

 1// button
 2.custom-button {
 3    display: inline-block;
 4    padding: 0.25rem 1rem;
 5    background-color: $color-accent;
 6    color: rgb(255, 238, 238);
 7    text-decoration: none;
 8    border-radius: 0.375rem;
 9    transition: background-color 0.3s ease;
10  }
11  
12  .custom-button:hover {
13    background-color: #39393B;
14  }
15  
16  /* 深色模式样式 */
17body.night {
18    .custom-button {
19      background-color: #39393B;
20    }
21  
22    .custom-button:hover {
23      background-color: $color-accent;
24    }
25  }

使用

使用方式如下：

 1{\{< button link="https://example.com" target="_self" >}\}
 2  在当前页面打开
 3{\{< /button >}\}
 4
 5{\{< button link="https://example.com" >}\}
 6  在新标签页打开
 7{\{< /button >}\}
 8
 9{\{< button link="https://example.com/file.pdf" download="custom-filename.pdf" >}\}
10  下载文件
11{\{< /button >}\}

参数说明

参数	说明
`link`	`href` 参数，链接到的 `URL`。
`target`	默认为外部链接，指定 `_self` 后为当前页面打开。
`download`	下载参数，指定后按钮点击行为变为下载，参数指定值为下载文件名称。

参考

最后修改于 2024-08-15