Hugo Shortcodes  ^[draft]

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

   输出效果如下：

   Success! Your text is here。
   Info!
   这里写一些提示信息。

二. 删除块

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

使用方法：

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 >}}

   输出效果如下：

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

四. 展开块

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

自定义的效果如👇：

可以看到，自定义的效果并不尽如人意，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音乐，使用方法可以参照官方给出的示例，很简单。

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

六. 流程图

流程图，效果如👇：

使用方法：

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

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