From a63941bdb1ca743175f74eaa175b73371edcdc63 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Tue, 18 Jul 2023 22:17:14 +0800 Subject: [PATCH] mermaid --- _config.yml | 3 +- layout/page.ejs | 3 + layout/wiki.ejs | 3 + source/css/_plugins/mermaid.styl | 167 +++++++++++++++++-------------- 4 files changed, 98 insertions(+), 78 deletions(-) diff --git a/_config.yml b/_config.yml index 823766a..341f0c3 100755 --- a/_config.yml +++ b/_config.yml @@ -351,8 +351,7 @@ plugins: # js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js # Available themes: default | dark | forest | neutral - # 推荐使用 dark 主题 在夜间模式下显示效果更好 - theme: dark + theme: neutral # 代码块复制按钮 copycode: diff --git a/layout/page.ejs b/layout/page.ejs index 7d1a16d..80fdaa5 100755 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -12,6 +12,9 @@ function layoutDiv() { if (page.post_list) { el += partial('_partial/main/navbar/list_post'); } + if (page.mermaid == true) { + el += partial('mermaid'); + } if (page.h1 || page.title || (page.content && page.content.length > 0)) { el += partial('_partial/main/navbar/breadcrumb'); } diff --git a/layout/wiki.ejs b/layout/wiki.ejs index f610f63..9d066ea 100755 --- a/layout/wiki.ejs +++ b/layout/wiki.ejs @@ -29,6 +29,9 @@ function layoutTitle() { page.header = 'auto'; } %> + <% if (page.mermaid == true){ %> + <%- partial('mermaid') %> + <% } %> <%- partial('_partial/main/navbar/breadcrumb') %>
<%- scrollreveal() %>'> <%- layoutTitle() %> diff --git a/source/css/_plugins/mermaid.styl b/source/css/_plugins/mermaid.styl index abc2f8d..305c451 100644 --- a/source/css/_plugins/mermaid.styl +++ b/source/css/_plugins/mermaid.styl @@ -1,106 +1,121 @@ -pre.mermaid { - display: inline-block; - width: 100%; - text-align: center; -} +pre.mermaid + display: inline-block + width: 100% + text-align: center + font-family: $ff-body -.mermaid svg { - width: 100%; - display: inline-block; -} +.mermaid svg + width: 100% + display: inline-block + +.mermaid svg + width: 100% + display: inline-block + +.mermaid span,text + font-family: $ff-body + +.mermaid .edgeLabel + padding: 4px + background-color: var(--site-bg) !important + +.mermaid rect.basic.label-container + stroke: var(--block-border) !important + fill: var(--block) !important + set_mermaid_darkmode() - .mermaid { - fill: #ccc !important; - } + .mermaid + fill: #ccc !important + - .mermaid .error-icon { - fill: #a44141 !important; - } + .mermaid .error-icon + fill: #a44141 !important + - .mermaid .error-text { - fill: #ddd !important; - stroke: #ddd !important; - } + .mermaid .error-text + fill: #ddd !important + stroke: #ddd !important + - .mermaid .marker { - fill: lightgrey !important; - stroke: lightgrey !important; - } + .mermaid .marker + fill: lightgrey !important + stroke: lightgrey !important + - .mermaid .marker.cross { - stroke: lightgrey !important; - } + .mermaid .marker.cross + stroke: lightgrey !important + - .mermaid .label { - color: #ccc !important; - } + .mermaid .label + color: #ccc !important + - .mermaid .cluster-label text { - fill: #F9FFFE !important; - } + .mermaid .cluster-label text + fill: #F9FFFE !important + - .mermaid .cluster-label span { - color: #F9FFFE !important; - } + .mermaid .cluster-label span + color: #F9FFFE !important + .mermaid .label text, - .mermaid span { - fill: #ccc !important; - color: #ccc !important; - } + .mermaid span + fill: #ccc !important + color: #ccc !important + .mermaid .node rect, .mermaid .node circle, .mermaid .node ellipse, .mermaid .node polygon, - .mermaid .node path { - fill: #1f2020 !important; - stroke: #81B1DB !important; - } + .mermaid .node path + fill: #1f2020 !important + stroke: #81B1DB !important + - .mermaid .arrowheadPath { - fill: lightgrey !important; - } + .mermaid .arrowheadPath + fill: lightgrey !important + - .mermaid .edgePath .path { - stroke: lightgrey !important; - } + .mermaid .edgePath .path + stroke: lightgrey !important + - .mermaid .flowchart-link { - stroke: lightgrey !important; - } + .mermaid .flowchart-link + stroke: lightgrey !important + - .mermaid .edgeLabel { - background-color: hsl(0, 0%, 34.4117647059%) !important; - } + .mermaid .edgeLabel + background-color: hsl(0, 0%, 34.4117647059%) !important + - .mermaid .edgeLabel rect { - background-color: hsl(0, 0%, 34.4117647059%) !important; - fill: hsl(0, 0%, 34.4117647059%) !important; - } + .mermaid .edgeLabel rect + background-color: hsl(0, 0%, 34.4117647059%) !important + fill: hsl(0, 0%, 34.4117647059%) !important + - .mermaid .cluster rect { - fill: hsl(180, 1.5873015873%, 28.3529411765%) !important; - stroke: rgba(255, 255, 255, 0.25) !important; - } + .mermaid .cluster rect + fill: hsl(180, 1.5873015873%, 28.3529411765%) !important + stroke: rgba(255, 255, 255, 0.25) !important + - .mermaid .cluster text { - fill: #F9FFFE !important; - } + .mermaid .cluster text + fill: #F9FFFE !important + - .mermaid .cluster span { - color: #F9FFFE !important; - } + .mermaid .cluster span + color: #F9FFFE !important + - .mermaid div.mermaidTooltip { - background: hsl(20, 1.5873015873%, 12.3529411765%) !important; - border: 1px solid rgba(255, 255, 255, 0.25) !important; - } + .mermaid div.mermaidTooltip + background: hsl(20, 1.5873015873%, 12.3529411765%) !important + border: 1px solid rgba(255, 255, 255, 0.25) !important + - .mermaid .flowchartTitleText { - fill: #ccc; - } + .mermaid .flowchartTitleText + fill: #ccc + if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark)