shortcode ??? 什么是shortcode
以及hugo内置shortcode
参考: shortcodes-preview
github shortcode 在指定目录添加以下文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!-- 文件位置:~/layouts/shortcodes/github.html -->
< div class = "github" >
< div class = "logo" >
{{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
< a class = "name" href = {{ . Get " link " }} target = "_blank" > {{ .Get "name" }}</ a >
</ div >
< div class = "description" > {{ .Get "description" }}</ div >
< div class = "language" >
< span class = "language-color" style = "background-color: {{ .Get " color " }}" ></ span >
< span class = "language-name" > {{ .Get "language" }}</ span >
</ div >
</ div >
// 文件位置:~/assets/scss/custom/_custom.scss
// github shortcode
.github {
border: 1px solid var(--color-contrast-low);
border-color: #b3b4ac;
border-style: dotted;
border-radius: 12px !important;
margin: 0 auto;
margin-bottom: 1em;
padding: 1em;
background-color: #fcfdf8;
.github-icon {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
margin-bottom: 0.2em;
fill: var(--color-contrast-high);
transition: all .5s;
}
.name {
font-weight: bold;
color: #0366d6 !important;
text-decoration: none;
}
.description {
margin-top: 0.5em;
margin-bottom: 1em;
color: #586069;
text-align: justify;
font-size: 90%;
transition: all .5s;
}
.language-color {
position: relative;
top: 1px;
display: inline-block;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
}
.language-name {
color: var(--color-contrast-high);
font-size: 90%;
color: #586069;
margin-left: 0.5em;
transition: all .5s;
}
}
markdown
代码如下(去掉注释符号/*
和*/
):
1
{{/*< github name = "kubernetes/kubernetes" link = "https://github.com/kubernetes/kubernetes" description = "Production-Grade Container Scheduling and Management" color = "#00ADD8" language = "Go" > */}}
Production-Grade Container Scheduling and Management
Go
bilibili shortcode 1
{{/*< bilibili BV1YK4y1C7CU > */}}
video shortcode 1
{{/*< video link = "#" pic = "https://cdn.agou-ops.cn/Wallpapers/violet.png" time = 10 text = "高能部分" time1 = 20 text1 = "高能结束" > */}}
Author
AGou-ops
LastMod
2020-10-06
License
WTFPL v2