https://blog.zjuyk.site/tags/hugo/ Recent content in Hugo on 闻道录 Hugo -- gohugo.io zh 千玄子 千玄子 https://blog.zjuyk.site/notes/shortcodes/ Mon, 01 Jan 0001 00:00:00 +0000 千玄子 https://blog.zjuyk.site/notes/shortcodes/ <h2 class="header-anchor-wrapper">Admonition <a href="#admonition" class="header-anchor-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line> </svg> </a> </h2> <p>这里的类型目前支持 note、tip、warning 和 danger，因为我只为这四类配了 css 图标</p> <pre><code class="language-html">{{&lt; admonition 类型 &quot;标题&quot; &gt;}} 内容 {{&lt; /admonition &gt;}} </code></pre> <div class="admonition note"> <div class="admonition-title">标题</div> <div class="admonition-content"> 内容 </div> </div> <div class="admonition tip"> <div class="admonition-title">标题</div> <div class="admonition-content"> 内容 </div> </div> <div class="admonition warning"> <div class="admonition-title">标题</div> <div class="admonition-content"> 内容 </div> </div> <div class="admonition danger"> <div class="admonition-title">标题</div> <div class="admonition-content"> 内容 </div> </div> <h2 class="header-anchor-wrapper">Detail <a href="#detail" class="header-anchor-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line> </svg> </a> </h2> <pre><code class="language-html">{{&lt; details &quot;点击展开&quot; &gt;}} 内容 {{&lt; /details &gt;}} </code></pre> <details> <summary>点击展开</summary> <div> 内容 </div> </details> <h2 class="header-anchor-wrapper">Mermaid <a href="#mermaid" class="header-anchor-link"> <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line> </svg> </a> </h2> <p>首先需要在 front-matter 里将 mermaid 设置成 true 加载 js</p>