xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mermaid

This commit is contained in:
xaoxuu 2023-07-18 22:17:14 +08:00
parent dae9a259a3
commit a63941bdb1
4 changed files with 98 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -351,8 +351,7 @@ plugins:
# js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js # js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js
# Available themes: default | dark | forest | neutral # Available themes: default | dark | forest | neutral
# 推荐使用 dark 主题 在夜间模式下显示效果更好 theme: neutral
theme: dark
# 代码块复制按钮 # 代码块复制按钮
copycode: copycode:

3
layout/page.ejs
View File

@ -12,6 +12,9 @@ function layoutDiv() {
if (page.post_list) { if (page.post_list) {
el += partial('_partial/main/navbar/list_post'); 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)) { if (page.h1 || page.title || (page.content && page.content.length > 0)) {
el += partial('_partial/main/navbar/breadcrumb'); el += partial('_partial/main/navbar/breadcrumb');
} }

3
layout/wiki.ejs
View File

@ -29,6 +29,9 @@ function layoutTitle() {
page.header = 'auto'; page.header = 'auto';
} }
%> %>
<% if (page.mermaid == true){ %>
<%- partial('mermaid') %>
<% } %>
<%- partial('_partial/main/navbar/breadcrumb') %> <%- partial('_partial/main/navbar/breadcrumb') %>
<article class='md-text content <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'> <article class='md-text content <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'>
<%- layoutTitle() %> <%- layoutTitle() %>

167
source/css/_plugins/mermaid.styl
View File

@ -1,106 +1,121 @@
pre.mermaid { pre.mermaid
display: inline-block; display: inline-block
width: 100%; width: 100%
text-align: center; text-align: center
} font-family: $ff-body
.mermaid svg { .mermaid svg
width: 100%; width: 100%
display: inline-block; 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() set_mermaid_darkmode()
.mermaid { .mermaid
fill: #ccc !important; fill: #ccc !important
}
.mermaid .error-icon { .mermaid .error-icon
fill: #a44141 !important; fill: #a44141 !important
}
.mermaid .error-text { .mermaid .error-text
fill: #ddd !important; fill: #ddd !important
stroke: #ddd !important; stroke: #ddd !important
}
.mermaid .marker { .mermaid .marker
fill: lightgrey !important; fill: lightgrey !important
stroke: lightgrey !important; stroke: lightgrey !important
}
.mermaid .marker.cross { .mermaid .marker.cross
stroke: lightgrey !important; stroke: lightgrey !important
}
.mermaid .label { .mermaid .label
color: #ccc !important; color: #ccc !important
}
.mermaid .cluster-label text { .mermaid .cluster-label text
fill: #F9FFFE !important; fill: #F9FFFE !important
}
.mermaid .cluster-label span { .mermaid .cluster-label span
color: #F9FFFE !important; color: #F9FFFE !important
}
.mermaid .label text, .mermaid .label text,
.mermaid span { .mermaid span
fill: #ccc !important; fill: #ccc !important
color: #ccc !important; color: #ccc !important
}
.mermaid .node rect, .mermaid .node rect,
.mermaid .node circle, .mermaid .node circle,
.mermaid .node ellipse, .mermaid .node ellipse,
.mermaid .node polygon, .mermaid .node polygon,
.mermaid .node path { .mermaid .node path
fill: #1f2020 !important; fill: #1f2020 !important
stroke: #81B1DB !important; stroke: #81B1DB !important
}
.mermaid .arrowheadPath { .mermaid .arrowheadPath
fill: lightgrey !important; fill: lightgrey !important
}
.mermaid .edgePath .path { .mermaid .edgePath .path
stroke: lightgrey !important; stroke: lightgrey !important
}
.mermaid .flowchart-link { .mermaid .flowchart-link
stroke: lightgrey !important; stroke: lightgrey !important
}
.mermaid .edgeLabel { .mermaid .edgeLabel
background-color: hsl(0, 0%, 34.4117647059%) !important; background-color: hsl(0, 0%, 34.4117647059%) !important
}
.mermaid .edgeLabel rect { .mermaid .edgeLabel rect
background-color: hsl(0, 0%, 34.4117647059%) !important; background-color: hsl(0, 0%, 34.4117647059%) !important
fill: hsl(0, 0%, 34.4117647059%) !important; fill: hsl(0, 0%, 34.4117647059%) !important
}
.mermaid .cluster rect { .mermaid .cluster rect
fill: hsl(180, 1.5873015873%, 28.3529411765%) !important; fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
stroke: rgba(255, 255, 255, 0.25) !important; stroke: rgba(255, 255, 255, 0.25) !important
}
.mermaid .cluster text { .mermaid .cluster text
fill: #F9FFFE !important; fill: #F9FFFE !important
}
.mermaid .cluster span { .mermaid .cluster span
color: #F9FFFE !important; color: #F9FFFE !important
}
.mermaid div.mermaidTooltip { .mermaid div.mermaidTooltip
background: hsl(20, 1.5873015873%, 12.3529411765%) !important; background: hsl(20, 1.5873015873%, 12.3529411765%) !important
border: 1px solid rgba(255, 255, 255, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important
}
.mermaid .flowchartTitleText { .mermaid .flowchartTitleText
fill: #ccc; fill: #ccc
}
if hexo-config('style.darkmode') == 'auto' if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)