Markdown on Solitudehttps://hugo-solitude.efu.me/tags/markdown/Recent content in Markdown on SolitudeHugozh-CNsolitude@example.org (Solitude)solitude@example.org (Solitude)Tue, 25 Aug 2026 10:00:00 +0800Solitude Hugo Shortcode 使用指南https://hugo-solitude.efu.me/p/shortcode-showcase.htmlSat, 22 Aug 2026 10:00:00 +0800solitude@example.org (Solitude)https://hugo-solitude.efu.me/p/shortcode-showcase.html<p>Shortcode 是 Hugo 在 Markdown 之外提供的内容组件语法。Solitude 用它承载提示框、标签页、图库、图表等富内容；迁移旧文章时，也应把 Hexo 外挂标签改写为对应的 Hugo shortcode。</p> <aside class="solitude-tag note info flat no-icon has-icon"> <span class="note-icon" aria-hidden="true"><i class="fas fa-circle-info"></i></span> <div class="note-content">本文既是使用手册，也是可构建的效果页。每个组件都按 <strong>用途 → 写法 → 参数 → 效果</strong> 展开，代码可以直接复制到 Markdown 文件中。</div> </aside> <h2 id="开始之前">开始之前</h2> <p>Hugo shortcode 有两种边界符：<code>{{&lt; shortcode &gt;}}</code> 适合普通参数，<code>{{% shortcode %}}</code> 会先处理内部 Markdown。Solitude 的块级组件已经按各自用途处理正文，通常直接使用尖括号写法即可。</p> <table> <thead> <tr> <th>内容类型</th> <th>推荐组件</th> <th>适合场景</th> </tr> </thead> <tbody> <tr> <td>行内强调</td> <td><code>span</code>、<code>label</code>、<code>keyboard</code></td> <td>一句话中的状态、术语或快捷键</td> </tr> <tr> <td>块级提示</td> <td><code>note</code>、<code>subnote</code>、<code>fold</code></td> <td>说明、警告、补充资料</td> </tr> <tr> <td>导航与引用</td> <td><code>button</code>、<code>link</code>、<code>card</code></td> <td>行动入口、站内外资源</td> </tr> <tr> <td>结构化内容</td> <td><code>tabs</code>、<code>timeline</code>、<code>gallery</code>、<code>series</code></td> <td>分组、步骤、图片与文章集合</td> </tr> <tr> <td>动态内容</td> <td><code>mermaid</code>、<code>chartjs</code>、<code>typeit</code></td> <td>流程、数据与动态文字</td> </tr> </tbody> </table> <aside class="solitude-tag note warning simple no-icon has-icon"> <span class="note-icon" aria-hidden="true"><i class="fas fa-triangle-exclamation"></i></span> <div class="note-content">Shortcode 名称和参数区分大小写。块级组件还要成对书写结束标签，否则 Hugo 会在构建阶段直接报错。</div> </aside> <h2 id="文本与状态">文本与状态</h2> <h3 id="彩色文本与标签">彩色文本与标签</h3> <p><code>p</code> 用于整段文字，<code>span</code> 用于行内文字，<code>label</code> 用于短小的状态标记。颜色参数可使用 <code>blue</code>、<code>green</code>、<code>orange</code>、<code>red</code>、<code>purple</code> 等主题色名称。</p>