https://wdd.js.org/zh/categories/hugo/ Recent content in Hugo on The SIP Lab Hugo -- 0.151.0 zh Fri, 27 May 2022 11:49:44 +0800 https://wdd.js.org/zh/posts/2022/05/02-hugo-add-mermaid/ Fri, 27 May 2022 11:49:44 +0800 https://wdd.js.org/zh/posts/2022/05/02-hugo-add-mermaid/ <h1 id="step1">step1</h1> <p>在layouts/baseof.html 的最后追加如下内容</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>{{ if .Store.Get &#34;hasMermaid&#34; }} </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;module&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">import</span> <span style="color:#a6e22e">mermaid</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">mermaid</span>.<span style="color:#a6e22e">initialize</span>({ <span style="color:#a6e22e">startOnLoad</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> }); </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>{{ end }} </span></span></code></pre></div><h1 id="step2">step2:</h1> <p>在layouts/_default/_markup/render-codeblock-mermaid.html</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">pre</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mermaid&#34;</span>&gt; </span></span><span style="display:flex;"><span> {{- .Inner | htmlEscape | safeHTML }} </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">pre</span>&gt; </span></span><span style="display:flex;"><span>{{ .Page.Store.Set &#34;hasMermaid&#34; true }} </span></span></code></pre></div><h1 id="在blog中增加如下代码">在blog中增加如下代码</h1> <pre class="mermaid">pie title French Words I Know &#34;Merde&#34; : 50 &#34;Oui&#34; : 35 &#34;Alors&#34; : 10 &#34;Non&#34; : 5 </pre> <pre class="mermaid">sequenceDiagram title French Words I Know autonumber Alice-&gt;&gt;Bob: hello Bob--&gt;&gt;Alice: hi Alice-&gt;Bob: talking </pre>