Group Image Gallery
白天

Solitude-Mermaid渲染优化

Group Image Gallery
黑夜

Solitude-Mermaid渲染优化

优化了Solitude主题中Mermaid图表渲染，并且优化了白天黑色展示

  1. 打开 themes\solitude\layout\includes\inject\body.pug 修改这里if theme.mermaid直接替换成下面的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    //- if theme.mermaid
    //-   script.
    //-     mermaid.run();
       
    if theme.mermaid
        script.
          const initMermaid = () => {
            if (typeof mermaid !== 'undefined') {
              mermaid.initialize({
                startOnLoad: false,
                theme: 'base', // 使用基础主题，让我们的 CSS 控制所有样式
                flowchart: {
                  useMaxWidth: true,
                  htmlLabels: true,
                  curve: 'cardinal'
                },
                sequence: {
                  useMaxWidth: true,
                  diagramMarginX: 20,
                  diagramMarginY: 20,
                  boxTextMargin: 5,
                  noteMargin: 10,
                  messageMargin: 35
                }
              });
              mermaid.run();
            }
          };
       
          document.addEventListener("DOMContentLoaded", initMermaid);
          utils.addEventListenerPjax(document, "pjax:complete", initMermaid);

  2. 打开 themes\solitude\source\css_tags\mermaid.styl 直接替换成下面的代码即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .mermaid
      background #ffffff !important
      padding 1rem  // 减少内边距
      border-radius 8px  // 减少圆角
      margin-bottom 1rem  // 减少图表间距

      // 白天模式使用柔和的灰色边框
      [data-theme='light'] &
        border 1px solid #d1d5db  // 使用浅灰色，比黑色柔和很多
        box-shadow 0 1px 3px 0 rgba(0, 0, 0, 0.1)  // 添加轻微阴影增加层次感