Hugo系列(三)：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/">}\}
Important样式代码中第
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-caution = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512"><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-important = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><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"><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"><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>'
5notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="126 76.5 300 300"><path d="M297.431 324.397v-34.255c0-3.245-2.344-5.95-5.358-5.95h-32.146c-3.014 0-5.358 2.705-5.358 5.95v34.255c0 3.245 2.344 5.95 5.358 5.95h32.146c3.014 0 5.358-2.705 5.358-5.95Zm-.335-67.428 3.014-82.753c0-1.081-.502-2.524-1.674-3.425-1.005-.902-2.512-1.983-4.019-1.983h-36.834c-1.507 0-3.014 1.081-4.019 1.983-1.172.901-1.674 2.704-1.674 3.786l2.846 82.392c0 2.344 2.512 4.146 5.693 4.146h30.975c3.013 0 5.525-1.803 5.692-4.146Zm-2.344-168.39L423.34 342.425c3.683 7.032 3.516 15.686-.335 22.717-3.85 7.031-10.883 11.358-18.417 11.358H147.413c-7.534 0-14.566-4.327-18.417-11.358-3.85-7.031-4.018-15.685-.335-22.716L257.248 88.578C260.93 81.188 268.13 76.5 276 76.5c7.87 0 15.069 4.688 18.752 12.08Z"/></svg>'
在 ~/assets/scss/shortcodes.scss 中添加样式代码：
1.notice .icon{
2 size: 15px;
3 fill: currentColor;
4}
5.notice {
6 position: relative;
7 padding: 1em 1em 1em 2.5em;
8 margin-bottom: 1em;
9 border-radius: 4px;
10}
11.notice p:last-child {
12 margin-bottom: 0;
13}
14.notice .notice-title {
15 position: absolute;
16 left: 0.8em;
17}
18.notice .notice-title .notice-icon {
19 width: 1.2em;
20 height: 1.2em;
21}
22
23/* notice-warning */
24.notice.notice-warning {
25 background: hsla(0, 65%, 65%, 0.15);
26 border-left: 5px solid hsl(0, 65%, 65%);
27}
28.notice.notice-warning .notice-title {
29 color: hsl(0, 65%, 65%);
30}
31/* notice-caution */
32.notice.notice-caution {
33 background: hsla(30.244, 80%, 70%, 0.15);
34 border-left: 5px solid hsl(30.244, 80%, 70%);
35}
36.notice.notice-caution .notice-title {
37 color: hsl(30.244, 80%, 70%);
38}
39
40/* notice-important */
41.notice.notice-important {
42 background: hsla(260.979, 69%, 59%, 0.15);
43 border-left: 5px solid hsl(260.979, 69%, 59%);
44}
45.notice.notice-important .notice-title {
46 color: hsl(260.979, 69%, 59%);
47}
48
49/* notice-note */
50.notice.notice-note {
51 background: hsla(200, 65%, 65%, 0.15);
52 border-left: 5px solid hsl(200, 65%, 65%);
53}
54.notice.notice-note .notice-title {
55 color: hsl(200, 65%, 65%);
56}
57
58/* notice-tip */
59.notice.notice-tip {
60 background: hsla(140, 65%, 65%, 0.15);
61 border-left: 5px solid hsl(140, 65%, 65%);
62}
63.notice.notice-tip .notice-title {
64 color: hsl(140, 65%, 65%);
65}
66
67
68/* Dark Mode */
69body.night .notice.notice-warning {
70 background: hsla(0, 25%, 25%, 0.15);
71 border-left: 5px solid hsl(0, 25%, 35%);
72}
73body.night .notice.notice-warning .notice-title {
74 color: hsl(0, 25%, 35%);
75}
76
77body.night .notice.notice-important {
78 background: hsla(230, 26%, 39%, 0.15);
79 border-left: 5px solid hsl(230, 26%, 39%);
80}
81body.night .notice.notice-important .notice-title {
82 color: hsl(230, 26%, 39%);
83}
84
85body.night .notice.notice-note {
86 background: hsla(200, 25%, 35%, 0.15);
87 border-left: 5px solid hsl(200, 25%, 35%);
88}
89body.night .notice.notice-note .notice-title {
90 color: hsl(200, 25%, 35%);
91}
92
93body.night .notice.notice-tip {
94 background: hsla(140, 25%, 35%, 0.15);
95 border-left: 5px solid hsl(140, 25%, 35%);
96}
97body.night .notice.notice-tip .notice-title {
98 color: hsl(140, 25%, 35%);
99}
100
101body.night .notice.notice-caution {
102 background: hsla(30.244, 80%, 25%, 0.15);
103 border-left: 5px solid hsl(30.244, 80%, 25%);
104}
105body.night .notice.notice-caution .notice-title {
106 color: hsl(30.244, 80%, 25%);
107}
使用
使用语法如下：
1{\{< notice notice-warning >}}
2你好。
3{\{< /notice >}}
4
5{\{< notice notice-important >}}
6你好。
7{\{< /notice >}}
8
9{\{< notice notice-note >}}
10你好。
11{\{< /notice >}}
12
13{\{< notice notice-tip >}}
14你好。
15{\{< /notice >}}
16
17{\{< notice notice-caution >}}
18你好。
19{\{< /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}
Important样式代码中
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}
Important样式代码中
body.night$color-accent是diary主题黑暗模式的定义，如果是其他的主题，需要做对应的修改。
使用
1{\{< timeline date="2023-10-01" title="国庆节" description="祖国生日快乐" tags="节日" url="" >}\}
块引用
配置
新建 ~/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 >}}
按钮
配置
新建 ~/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 |
下载参数，指定后按钮点击行为变为下载，参数指定值为下载文件名称。 |