optimize mermaid js lib load way to fast load speed

Author: madawei2699

content/dev/glimpse-of-web3/index.zh-cn.md

@@ -98,6 +98,14 @@ Mirror 的数据都存在在 [Arweave](https://www.arweave.org/) 之上，Arweav
 
 但 Web3 会不会从去中心化逐渐发展为中心化呢？考虑到比特币的绝大部分算力目前都掌握在少数几个矿池公司手中，再精妙的算法也抵挡不了人性对利益的追求，用户为了方便连隐私都可以不要，更不会为了一个去中心化的技术问题而放弃中心化的便利，Web3 这条去中心化之路注定漫长而难走。
 
+{{<mermaid align="center">}}
+graph LR;
+    Web1 --> Web2
+    Web2 -->|Blockchain?| D[Web3]
+    Web2 -->|AI?| E[Web3]
+    Web2 -->|Other?| F[Web3]
+{{< /mermaid >}}
+
 本文参考的文章有：
 
 - [THE WEB3 REPORT](https://consensys.net/reports/web3-report-q3-2021/)

themes/hugo-coder/layouts/_default/baseof.html

@@ -190,9 +190,19 @@
     AOS.init({
       disable: 'mobile'
     });
+
+    var mermaid = document.getElementsByClassName('mermaid');
+    if (mermaid.length > 0) {
+      var tag = document.createElement('script');
+      tag.src = 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js';
+      document.getElementsByTagName('body')[0].appendChild(tag);
+
+      var tag = document.createElement('script');
+      tag.type = 'text/javascript';
+      tag.text = "mermaid.initialize({ startOnLoad: true, securityLevel: 'loose'})";
+      document.getElementsByTagName('body')[0].appendChild(tag);
+    }
   </script>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-  <script>mermaid.initialize({ startOnLoad: true, securityLevel: 'loose'});</script>
   {{ end }}
 
 </body>