很久之前就想找一些有用的Hugo shortcodes模板，但是Google半天也只有官方提供的那几个示例，虽说授人以渔无可非议，但是全是渔网袜🤤没有鱼也不行啊，这样我怎么知道你到底能不能钓上来🐟呢？所以我打算在这里尽力收集一些有用的shortcodes，都是可以拎包入住顺手牵羊直接copy去用的现成轮子。

一. Tips

就是一些提示信息，效果如下：

使用方法：

  1. 在layouts/shortcodes下新建alert.html文件，内容如下：

    1
2
3
4
5

    <div class="alert alert-{{ with .Get "class" }}{{.}}{{end}}" role="alert">
    <text>
        {{ .Inner | markdownify }}
    </text>
</div>

  2. 在assets/css下新建alert.css文件，内容如下：

     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

    .alert {
    font-family: -apple-system,
        BlinkMacSystemFont,
        segoe ui,
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        open sans,
        helvetica neue,
        sans-serif;
    border-radius: var(--radius);
    margin: 20px 0;
    padding: 0.8rem 1rem;
}

.alert-success {
    border-color: #73cc74;
    background-color: #ebffe5;
    color: #488049;
}

.dark .alert-success {
    border-color: #73cc74;
    background-color: #488049;
    color: #ebffe5;
}

    这里只给出了alert-success的样式和基本的一些配置，具体的细节和其他样式可以照猫画虎，至于配色可以DIY或者打开控制台copy一下（或者甚至可以让Copilot来帮你配）。

  3. 在markdown文件中如下使用：

    1
2
3
4
5
6
7
8

    {{< alert class="success" >}}
**Success!** Your text is here。
{{< /alert >}}

{{< alert class="info" >}}
**Info!**  
这里写一些提示信息。
{{< /alert >}}

    输出效果如下：

二. 删除块

删除块，效果如👉： 这是一段被删除的文字，在鼠标悬停时会显示原文字。

使用方法：

  1. 在layouts/shortcodes下新建blockdel.html文件，内容如下：

    1
2
3

    <span class="blockdel">
    {{ .Inner | markdownify }}
</span>

  2. 在assets/css下新建blockdel.css文件，内容如下：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    .post-content .blockdel {
    color: transparent;
    border-radius: 4px;
    background-color: var(--content);
    transition: 0.3s;
}

.post-content .blockdel:hover {
    color: unset;
    background-color: transparent;
}

  3. 在markdown文件中如下使用：

    1
2
3

    {{< blockdel >}}
这是一段被删除的文字，在鼠标**悬停**时会显示原文字。
{{< /blockdel >}}

    输出效果如下：

    这是一段被删除的文字，在鼠标悬停时会显示原文字。

三. 荧光笔

或者叫颜色文字，效果如👉： 绿色荧光笔，深色模式有蒙版效果。
好像内置的highlight就是这个功能？我忘了，明天研究一下。

使用方法：

  1. 在layouts/shortcodes下新建color-text.html文件，内容如下：

    1
2
3
4
5
6

    {{ $color := .Get "color" | safeCSS }}
<span class="color-text"style="background-color: {{ $color }};">
    <text>
        {{- .Inner | markdownify -}}
    </text>
</span>

  2. 在assets/css下新建color-text.css文件，内容如下：

    1
2
3
4
5
6
7
8
9

    .color-text {
border-radius: 4px;
}

.dark .color-text text {
    border-radius: 4px;
    background-color: #000;
    opacity: 0.5;
}

  3. 在markdown文件中如下使用：

    1
2
3

    {{< color-text color="#ddffdd" >}}
绿色荧光笔，深色模式有蒙版效果。
{{< /color-text >}}

    输出效果如下：

    绿色荧光笔，深色模式有蒙版效果。

四. 展开块

展开块，默认样式的效果如👇：

默认样式 下拉三角的矢量图和部分样式启发来自@ouuan老师的博客，特此感谢。

自定义的效果如👇：

自定义样式
这里是隐藏内容

可以看到，自定义的效果并不尽如人意，height的变化总有个延迟，大概是没办法确定height的具体数值，所以transition的动画效果会卡顿。这里先给出默认样式的代码：

使用方法：

  1. 在layouts/shortcodes下新建collapse.html文件，内容如下：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    {{ if .Get "summary" }}
{{ else }}
{{ warnf "missing value for param 'summary': %s" .Position }}
{{ end }}
<p>
<details {{ if (eq (.Get "openByDefault" ) true) }} open=true {{ end }}>
    <summary class="custom-collapse">
        <div class="collapse-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1rem" height="1rem">
                <path fill="currentColor" d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z" />
            </svg>
        </div>
        <span class="collapse-title">
            {{ .Get "summary" | markdownify }}
        </span>
    </summary>
{{- .Inner | markdownify -}}
</details>
</p>

  2. 在assets/css下新建collapse.css文件，内容如下：

     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

    .post-content details {
    font-size: 1rem;
    background-color: var(--code-bg);
    border-radius: var(--radius);
    padding: 0.8rem 0.5rem;
    margin: 0.5rem 0;
}

.post-content summary {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.post-content details[open] > summary {
    margin-bottom: 0.5em;
}

.post-content .collapse-title {
    font-weight: bold;
    user-select: none;
    margin-left: 0.2em;
}

.post-content .collapse-arrow {
    display: inline-flex;
    margin: 2px;
    transform: rotate(-90deg);
    transition: transform 0.15s;
}

.post-content details[open] > summary > .collapse-arrow {
    transform: rotate(0deg);
}

  3. 在markdown文件中如下使用：

    1
2
3

    {{< collapse summary="默认样式标题" >}}
默认样式内容
{{< /collapse >}}

    输出效果如下：

    默认样式标题     默认样式内容

五. 网易云音乐

插入网易云音乐的iframe，效果如👇：

使用方法：

  1. 在layouts/shortcodes下新建netease.html文件，内容如下：

    1

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id={{ .Get 0 }}&auto={{ .Get 1 }}&height=66"></iframe>

  2. 在markdown文件中如下使用：

    1

    {{< netease "1903991886" "0" >}}

    其中第一个参数是歌曲id，第二个参数是是否自动播放，0为否，1为是。由于浏览器的安全策略，自动播放可能会失效。当然也可以直接将音乐软件中生成的iframe代码复制到markdown文件中，效果是一样的。

    另外也可以用MetingJS，支持网易云和QQ音乐，使用方法可以参照官方给出的示例，很简单。

后期考虑做成侧边栏或者底部的播放器，这样可以更方便地控制音乐的播放。

六. 流程图

流程图，效果如👇：

graph TD A[起床] -.->|起得早| B(吃饭) A -->|通常| C([摆烂]) B --> D((睡觉)) C --> D

使用方法：

  1. 在layouts/shortcodes下新建mermaid.html文件，内容如下：

    1
2
3
4

    {{ .Page.Store.Set "needMermaid" true }}
<div class="mermaid" align="center">
    {{ safeHTML .Inner }}
</div>

  2. 在layout/partials/extend_head.html中添加如下代码：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    {{ if .Page.Store.Get "needMermaid" -}}
<script type="module">
    var theme = 'neutral';
    if (localStorage.getItem("pref-theme") == "dark") {
        theme = 'dark'
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        theme = 'dark'
    }
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({
        startOnLoad: true,
        'theme': theme,
    });
</script>

  3. 在markdown文件中如下使用：

    1
2
3
4
5
6
7

    {{< mermaid >}}
graph TD
    A[起床] -.->|起得早| B(吃饭)
    A -->|通常| C([摆烂])
    B --> D((睡觉))
    C --> D
{{< /mermaid >}}

    输出效果如下：

    graph TD A[起床] -.->|起得早| B(吃饭) A -->|通常| C([摆烂]) B --> D((睡觉)) C --> D

这里使用的是mermaid，支持多种图表，更多使用方法可以参考官方文档。

TODO

这里我想完成的shortcodes主要来自消夏绿的博客，奈何没有源码，只能自己一点点扒了。

  • 自定义样式的展开块
  • Gallery
  • 个性化blockquote

太难了，前端实在是太难了。