Hugo的一些短代码

本文为了防止在代码块中的短代码被 Hugo 转译，在代码块中添加了 \，请在使用时去除

隐藏文字

配置

在 /layouts/shortcodes 目录下创建 detail.html 并填入以下代码：

1
2
3
4


<details>
    <summary>{{ (.Get 0) | markdownify }}</summary>
    {{ .Inner | markdownify }}
</details>

使用

1
2
3


{\{< detail "点这里看隐藏内容！" >}}
这里是隐藏内容！🥰
{\{< /detail >}}

效果

点这里看隐藏内容！

这里是隐藏内容！🥰

聊天气泡

配置

在 /layouts/shortcodes 目录下创建 chat.html 并填入以下代码：

  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
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


{{ if eq (.Get "position") "left" }}
<div class="chat --other">
    <div class="chat__inner">
        <div class="chat__meta">{{ .Get "name" }}&nbsp;&nbsp;&nbsp;{{ .Get "timestamp" }}</div>
        <div class="chat__text">
            {{ .Inner }}
        </div>
    </div>
</div>
{{ else if eq (.Get "position") "right" }}
<div class="chat --self">
    <div class="chat__inner">
        <div class="chat__meta" style="text-align: right;">{{ .Get "timestamp" }}&nbsp;&nbsp;&nbsp;{{ .Get "name" }}</div>
        <div class="chat__text">
            {{ .Inner }}
        </div>
    </div>
</div>
{{ end }}

<style>
    .chat {
        margin: 10px;
        padding: 10px;
        position: relative;
        /* 添加相对定位，以便定位尖角箭头 */
        transition: transform 0.2s;
        /* 添加过渡效果，使放大平滑 */
        max-width: 80%;
        min-width: 15%;
    }
    
    .chat:hover {
        transform: scale(1.05);
    }
    
    .chat.--self {
        text-align: left;
        background-color: #ecf5ff;
        color: #000000;
        border-radius: 15px;
        width: fit-content;
        margin-left: auto;
    }
    /* 尖角箭头 */
    
    .chat.--self::before {
        content: "";
        position: absolute;
        right: -18px;
        /* 调整箭头位置 */
        bottom: 5px;
        transform: translateY(-50%);
        border-width: 15px 0 0 20px;
        border-style: solid;
        border-color: transparent transparent transparent #ecf5ff;
        /* 箭头颜色与对话框背景颜色一致 */
    }
    /* 左边对话框样式 */
    
    .chat.--other {
        text-align: left;
        background-color: #ffecec;
        color: #333;
        border-radius: 15px;
        position: relative;
        width: fit-content;
    }
    /* 左边对话框的尖角箭头 */
    
    .chat.--other::before {
        content: "";
        position: absolute;
        left: -18px;
        bottom: 5px;
        transform: translateY(-50%);
        border-width: 15px 20px 0 0;
        border-style: solid;
        border-color: transparent #ffecec transparent transparent;
    }
    /* 消息元数据样式（名称和时间戳） */
    
    .chat__meta {
        font-weight: bold;
        font-size: 0.67em;
        color: #707070;
        margin-bottom: 5px;
    }
    /* 消息文本样式 */
    
    .chat__text {
        font-size: 0.9em;
        margin-left: 10px;
        word-break: break-all;
    }
    
    [data-scheme="dark"] {
        .chat.--self {
            color: #fefefe;
            background-color: #253958;
        }
        .chat.--self::before {
            border-color: transparent transparent transparent #253958;
        }
        .chat.--other {
            color: #fefefe;
            background-color: #1a1a1a;
        }
        .chat.--other::before {
            border-color: transparent #1a1a1a transparent transparent;
        }
        .chat__meta {
            color: #b1b1b1;
        }
    }
</style>

使用

1
2
3
4
5
6
7


{\{< chat position="left" name="John Doe" timestamp="2023-09-12 14:30">}\}
这是左边的消息内容。
{\{< /chat >}\}

{\{< chat position="right" name="Alice" timestamp="2023-09-12 14:45" >}\} 
这是右边的消息内容，测试长长长长长长长长长长长长长长长长长长长长长长长长度。
{\{< /chat >}\}

效果

John Doe 2023-09-12 14:30

这是左边的消息内容。

2023-09-12 14:45 Alice

这是右边的消息内容，测试长长长长长长长长长长长长长长长长长长长长长长长长度。

时间轴

配置

在 /layouts/shortcodes 目录下创建 timeline.html 并填入以下代码：

  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
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178


{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}{{- $url := .Get "url" -}}

<div class="timeline__row">
    <div class="timeline__time">
        <div class="timeline__time">{{ $date }}</div>
        <div class="timeline__split-line"></div>
    </div>
    <div class="timeline__content">
        <div class="timeline__tags">
            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
        </div>
        <a href="{{ $url }}">
            <div class="timeline__title">{{ $title }}</div>
        </a>
        <!-- title 可点击，默认就是跳转时间轴所在页 -->
        <div class="timeline__description">
            {{ $description }}
        </div>
    </div>
</div>


<style>
    .timeline {
        display: flex;
        flex-direction: column;
    }
    
    .timeline__row {
        display: flex;
        padding-left: 4%;
        height: 90px;
    }
    
    .timeline__time {
        flex: 0 0 110px;
        color: #5d5d5d;
        font-size: 17px;
        text-transform: uppercase;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    .timeline__time-text {
        margin: 0;
    }
    
    .timeline__split-line {
        position: absolute;
        top: 0.5rem;
        right: -20px;
        height: 100%;
        width: 2px;
        background-color: #84c4e240;
        z-index: 0;
    }
    
    .timeline__split-line:before {
        content: "";
        position: absolute;
        top: 24%;
        right: -4px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: #c9e5f2;
        box-shadow: 0 0 0 4px var(--theme);
        border-radius: 50%;
        border: 0px solid #84c4e2;
        z-index: -1;
    }
    
    .timeline__content {
        flex: 1;
        margin-left: 4.5rem;
        padding: 0.5rem 0 1.2rem 0;
    }
    
    .timeline__title {
        margin: 0;
        margin-bottom: 2px;
        padding-top: 3px;
        margin-left: 0.5rem;
        color: var(--content);
        font-family: var(--font-family-teshu);
        font-size: 19px;
        font-weight: 600;
        width: fit-content;
        display: inline-block;
        vertical-align: middle;
        /* 垂直居中对齐 */
    }
    
    .timeline__tags {
        display: inline-block;
        padding: 0;
        margin-left: 0.3rem;
        align-items: center;
        gap: 0.3rem;
    }
    
    .timeline__tag {
        display: inline-block;
        color: var(--secondary);
        background-color: #84c4e230;
        border: 1.5px solid #84c4e230;
        border-radius: 999px;
        padding: 0rem 0.5rem;
        font-size: 12px;
        white-space: nowrap;
        line-height: 1.4rem;
        opacity: 0.8;
        vertical-align: middle;
        /* 垂直居中对齐 */
    }
    
    .timeline__description {
        font-size: 15px;
        line-height: 1.6;
        color: #5d5d5d;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0.5rem 0 0.4rem 1.5rem;
        /* 添加 1.5rem 的左侧内边距 */
    }
    /* 为类名为 "timeline__tag-style" 的标签定义颜色 */
    
    .timeline__tag-style {
        background-color: #c581da;
        /* 替换为你希望的颜色 */
        border-color: #c581da;
        /* 与背景色相同或不同，根据需要自定义 */
        color: #FFFFFF;
        /* 根据需要选择文本颜色 */
    }
    /* 为类名为 "timeline__tag-article" 的标签定义颜色 */
    
    .timeline__tag-article {
        background-color: #92d392;
        /* 替换为你希望的颜色 */
        border-color: #92d392;
        /* 与背景色相同或不同，根据需要自定义 */
        color: #000000;
        /* 根据需要选择文本颜色 */
    }
    /* 为类名为 "timeline__tag-page" 的标签定义颜色 */
    
    .timeline__tag-page {
        background-color: #707070;
        /* 替换为你希望的颜色 */
        border-color: #707070;
        /* 与背景色相同或不同，根据需要自定义 */
        color: #FFFFFF;
        /* 根据需要选择文本颜色 */
    }
    
    @media screen and (max-width: 768px) {
        .timeline__time {
            font-size: 14px;
            /* 在小屏幕上使用较小的字体大小 */
        }
        .timeline__title {
            font-size: 16px;
            /* 在小屏幕上使用较小的字体大小 */
        }
        .timeline__description {
            font-size: 14px;
            /* 在小屏幕上使用较小的字体大小 */
        }
    }
</style>

使用

1

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

效果

2023-09-11

weekday

周一

周一快乐。

2023-09-10

节日

教师节

教师节快乐。

哔哩哔哩

配置

hugo stack 这个主题自带了哔哩哔哩短代码，无需创建，直接使用即可。

使用

1

{/{< bilibili av1356335519 >}}

注意：请将 av1356335519 替换为实际的视频 AV 号。

效果

参考链接

Ghugo stack 主题美化

Stack官方文档