很久之前就想找一些有用的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

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