Test for mermaid and iframe

2022-5-26 updated: Mermaid support has be removed because loading mermaid.min.js costs too much time. It will be re-eabled once needed.

• Add mermaid support for Gridea
• Test
  • 1. Official demo test
  • 2. Chinese language test
    • 离心浓缩机的使用方法
  • 3. Sequence Diagram test
• Insert Netease link
• Insert Bilibli video link
• Customized colored notes support

Add mermaid support for Gridea

1. add the mermaid script in head.ejs file of the theme

<script src="https://cdn.jsdelivr.net/npm/mermaid@8.11.0/dist/mermaid.min.js"></script>

2. when writing articles, using the form below to render the mermaid div

<script>mermaid.initialize({startOnLoad:true});</script>
<div class="mermaid">
    xxxxx
    xxxx
</div>

Test

1. Official demo test

<script>mermaid.initialize({startOnLoad:true});</script>
<div align="center" class="mermaid">
      graph TD
      A[Client] --> B[Load Balancer]
      B --> C[Server1]
      B --> D[Server2]
</div>

2. Chinese language test

离心浓缩机的使用方法

<script>mermaid.initialize({startOnLoad:true});</script>
<div align="center" class="mermaid">
graph TD
id1(开始) --> id2(打开冷阱，待温度降至-80度)
id2--> id3(配平样品,放入离心浓缩机中，确定盖子严丝合缝)
id3--> id8(设置温度和时间等)
id8--> id4(打开真空泵)
id4--> id7(打开离心浓缩机)
id7--> id5(若样本是醇水混合物，需加入100微升水)
id5--> id6(结束)
</div>

注意：

• 样品量不要太多，1mL 已经很多
• 一般4h的总时间，可以设置加热时间2h，工作时间2h
• 水的话，温度可以设为60度；有机溶剂一般不超过40度
• 热敏性物质注意温度
• 醇水混合物，最好最后再加100微升将残留有机溶剂带走，加水后需要稍稍混匀

操作要点：

1. 冷阱温度一开始下降较慢，但过一会儿就会很快下降
2. 设置好离心浓缩的温度、heat time 和 run time 后，打开真空泵，并按下 auto run。只有按下 auto run 才会抽真空
3. 离心浓缩途中可以停止

3. Sequence Diagram test

<script>mermaid.initialize({startOnLoad:true});</script>
<div align="center" class="mermaid">
sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end
</div>

Insert Netease link

<p align="center"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=520 height=86 src="//music.163.com/outchain/player?type=2&id=860619&auto=0&height=66"></iframe></p>

Insert Bilibli video link

<p align="center"><iframe width="600" height="450" src="//player.bilibili.com/player.html?aid=327750029&bvid=BV17A411b7KK&cid=180056678&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></p>

Customized colored notes support

<div class="note-normal">
  <p> This is note</p>
</div>

<div class="note-warning">
  <p> This is warning</p>
</div>

<div class="note-important">
  <p> This is warning</p>
</div>