<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Mermaid on Ben&#39;s Blog</title>
    <link>https://jinpeng.cv/en/tags/mermaid/</link>
    <description>Recent content in Mermaid on Ben&#39;s Blog</description>
    <generator>Hugo -- 0.154.0</generator>
    <language>en</language>
    <copyright>©️ 2025 Ben</copyright>
    <lastBuildDate>Mon, 09 Mar 2026 22:26:59 -0600</lastBuildDate>
    <atom:link href="https://jinpeng.cv/en/tags/mermaid/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>April 9, 2025</title>
      <link>https://jinpeng.cv/en/diary/2025/april/2025-04-09/</link>
      <pubDate>Wed, 09 Apr 2025 02:50:54 +0000</pubDate>
      <guid>https://jinpeng.cv/en/diary/2025/april/2025-04-09/</guid>
      <description>&lt;h3 id=&#34;1050-trying-to-tinker-with-website-seo&#34;&gt;10:50 Trying to Tinker with Website SEO&lt;/h3&gt;
&lt;p&gt;There seems to be a lot of demand for this from others. I feel like I could dive deeper into it as a side gig and offer services to people.&lt;/p&gt;
&lt;p&gt;The principle isn’t complicated—just understand how major search engines and the web gather information, then adjust your website accordingly.&lt;/p&gt;
&lt;h3 id=&#34;1238-fixed-the-mermaid-theme-switching-function&#34;&gt;12:38 Fixed the Mermaid Theme Switching Function&lt;/h3&gt;
&lt;p&gt;Functions from different partials ultimately end up on the same page. So, declaring functions or variables repeatedly can cause interference, which needs to be debugged and eliminated. Another solution is to prefix names with the file name.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<h3 id="1050-trying-to-tinker-with-website-seo">10:50 Trying to Tinker with Website SEO</h3>
<p>There seems to be a lot of demand for this from others. I feel like I could dive deeper into it as a side gig and offer services to people.</p>
<p>The principle isn’t complicated—just understand how major search engines and the web gather information, then adjust your website accordingly.</p>
<h3 id="1238-fixed-the-mermaid-theme-switching-function">12:38 Fixed the Mermaid Theme Switching Function</h3>
<p>Functions from different partials ultimately end up on the same page. So, declaring functions or variables repeatedly can cause interference, which needs to be debugged and eliminated. Another solution is to prefix names with the file name.</p>
<h3 id="1428-made-callout-compatible-with-obsidian">14:28 Made Callout Compatible with Obsidian</h3>
<p>Reference:<br>
<a href="https://blog.grew.cc/posts/hugo-alert-blockquote">Hugo Series (8): Adding GitHub-Style Alert Blockquotes - Tom&rsquo;s Blog</a><sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
  

  


  
  <blockquote class="alert-blockquote alert-bug" >
    <p class="alert-heading callout-title">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="m8 2 1.88 1.88"></path><path d="M14.12 3.88 16 2"></path><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"></path><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"></path><path d="M12 20v-9"></path><path d="M6.53 9C4.6 8.8 3 7.1 3 5"></path><path d="M6 13H2"></path><path d="M3 21c0-2.1 1.7-3.9 3.8-4"></path><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"></path><path d="M22 13h-4"></path><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"></path>
      </svg>
      
      <span>Bug</span>
      
    </p>
    <div class="alert-content callout-content">
      <p>Testing the note block&rsquo;s style.</p>
    </div>
  </blockquote>
  

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".alert-blockquote").forEach(function (e) {
        
        var foldAttr = e.getAttribute("data-collapsible");
        if (foldAttr === "+" || foldAttr === "-") {
            e.classList.add("is-collapsible");

            var titleElem = e.querySelector(".callout-title");
            var contentElem = e.querySelector(".callout-content");

            if (titleElem && contentElem && !titleElem.querySelector(".callout-fold")) {
                var isCollapsed = foldAttr === "-"; 
                var toggleState = function () {
                    updateState(!isCollapsed, true);
                };

                var updateState = function (collapsed, animate) {
                    isCollapsed = collapsed;
                    e.classList.toggle("is-collapsed", collapsed);
                    contentElem.style.display = collapsed ? "none" : "block";

                    
                    
                    var svgIcon = foldButton.querySelector("svg");
                    if (svgIcon) {
                        svgIcon.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
                        svgIcon.style.transition = "transform 0.2s ease-in-out";
                    }
                };

                
                var foldButton = document.createElement("div");
                foldButton.className = "callout-fold";

                
                foldButton.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down">
                        <path d="m6 9 6 6 6-6"></path>
                    </svg>
                `;

                foldButton.addEventListener("click", function (event) {
                    event.preventDefault();
                    toggleState();
                });

                
                titleElem.appendChild(foldButton);

                
                titleElem.addEventListener("click", function (event) {
                    if (!event.defaultPrevented) {
                        event.preventDefault();
                        toggleState();
                    }
                });

                
                updateState(isCollapsed, false);
            }
        }
    });
});
</script>
<p>For regular styling, it’s achieved by modifying CSS selectors:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">blockquote</span><span class="p">:</span><span class="nd">not</span><span class="o">(</span><span class="p">.</span><span class="nc">alert-blockquote</span><span class="o">,</span> <span class="p">.</span><span class="nc">quote-center</span><span class="o">,</span> <span class="p">.</span><span class="nc">quote</span><span class="o">)</span> <span class="p">{</span>  
</span></span><span class="line"><span class="cl">    <span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">margin</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">gap</span><span class="p">)</span> <span class="kc">auto</span> <span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">gap</span><span class="p">)</span><span class="o">*</span><span class="mf">.6</span><span class="p">)</span> <span class="kc">auto</span> <span class="cp">!important</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">font-style</span><span class="p">:</span> <span class="kc">italic</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">color</span><span class="p">:</span> <span class="mh">#666666</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">padding</span><span class="p">:</span> <span class="mf">1.1</span><span class="kt">em</span> <span class="mi">30</span><span class="kt">px</span> <span class="mf">.2</span><span class="kt">em</span> <span class="mi">55</span><span class="kt">px</span> <span class="cp">!important</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">border-left</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#3e5a72</span> <span class="cp">!important</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.5</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl">    <span class="k">background</span><span class="p">:</span> <span class="mh">#EDEDED</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl"><span class="p">}</span>  
</span></span></code></pre></td></tr></table>
</div>
</div><p>The effect is as follows:</p>
<blockquote>
<p>Hello there<br>
How should multiple quotes be handled? <span>Test</span></p>
</blockquote>
<h3 id="1636-spent-a-long-time-on-my-phone">16:36 Spent a Long Time on My Phone</h3>
<p>I took a nap at noon but ended up oversleeping without actually falling asleep. A regular routine is the foundation of healthy sleep.</p>
<h3 id="2132-came-back-from-a-walk-with-mom">21:32 Came Back from a Walk with Mom</h3>
<p>Mom called and said my brother and sister-in-law weren’t home for dinner, so she had made too much food and didn’t want it to go to waste, so she asked me to come over and eat.</p>
<p>I had already cooked my own meal—just tossed some fish mint salad and ate it. But it seemed like Mom also wanted to take a walk, so I put on my socks and shoes and went over.</p>
<h3 id="2320-added-a-link-collection-page-to-navi">23:20 Added a Link Collection Page to Navi</h3>
<p>I’m really satisfied with this page—it looks very aesthetically pleasing. I’ll be adding some great blogs here in the future.</p>
<p>When I have time, I can open them up for reference and learning, to see what other outstanding people are up to.</p>
<h3 id="0016-time-flies">00:16 Time Flies</h3>
<p>It’s time to sleep again. I should go to bed early, or I won’t be able to fall asleep.</p>
<p>Committed all the code I wrote today.</p>
<h3 id="reflection">Reflection</h3>
<p>Recently, I&rsquo;ve been too focused on technology and tools, neglecting the creation of content itself. More attention should be given to content output rather than the refinement of techniques.</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p><a href="https://blog.grew.cc/posts/hugo-alert-blockquote">Hugo Series (8): Adding GitHub-Style Alert Blockquotes - Tom&rsquo;s Blog</a>&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
]]></content:encoded>
    </item>
    <item>
      <title>April 8, 2025</title>
      <link>https://jinpeng.cv/en/diary/2025/april/2025-04-08/</link>
      <pubDate>Tue, 08 Apr 2025 03:48:17 +0000</pubDate>
      <guid>https://jinpeng.cv/en/diary/2025/april/2025-04-08/</guid>
      <description>&lt;h3 id=&#34;0913-woke-up&#34;&gt;09:13 Woke Up&lt;/h3&gt;
&lt;p&gt;Today, I integrated Mermaid&amp;rsquo;s flowchart into my blog, and it also displays correctly in Obsidian.&lt;/p&gt;
&lt;p&gt;Testing the cover page a bit more—this will allow me to create richer content in the future.&lt;/p&gt;
&lt;div class=&#34;mermaid&#34;&gt;graph LR;  
    A--&gt;B;  
    A--&gt;C;  
    B--&gt;D;  
    C--&gt;D;  
&lt;/div&gt;



&lt;h3 id=&#34;2040-back-from-a-walk-with-mom&#34;&gt;20:40 Back from a Walk with Mom&lt;/h3&gt;
&lt;p&gt;Took Mom around the area where I live, passing by my brother’s workplace, and then walked her back home.&lt;/p&gt;
&lt;p&gt;A few more trips like this, and I’ll get familiar and comfortable with the route.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<h3 id="0913-woke-up">09:13 Woke Up</h3>
<p>Today, I integrated Mermaid&rsquo;s flowchart into my blog, and it also displays correctly in Obsidian.</p>
<p>Testing the cover page a bit more—this will allow me to create richer content in the future.</p>
<div class="mermaid">graph LR;  
    A-->B;  
    A-->C;  
    B-->D;  
    C-->D;  
</div>



<h3 id="2040-back-from-a-walk-with-mom">20:40 Back from a Walk with Mom</h3>
<p>Took Mom around the area where I live, passing by my brother’s workplace, and then walked her back home.</p>
<p>A few more trips like this, and I’ll get familiar and comfortable with the route.</p>
<h3 id="2152-fixed-the-missing-404-page-issue">21:52 Fixed the Missing 404 Page Issue</h3>
<p>Placed a default <code>404.html</code> page directly in the <code>static</code> folder to address the missing 404 page issue across multiple sites. Additionally, I implemented automatic language switching (Chinese/English) via script based on path matching.</p>
<p>As long as it works, it’s good enough.</p>
<h3 id="2225-taking-a-shower-and-getting-ready-for-bed">22:25 Taking a Shower and Getting Ready for Bed</h3>
<p>Indeed, getting proper sleep makes a huge difference—I feel so much more energetic now.</p>
<p>Today I slept in quite a bit longer, and my health bar slowly refilled.</p>
]]></content:encoded>
    </item>
  </channel>
</rss>
