文章摘要
加载中...|
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

在主题开发和日常使用中，对原主题的研究以及基础功能拓展是本站魔改的起点。以下是本阶段的核心实现：

1. 基础配置小记 ​

在主题作者的文章中可能没有介绍，但确实存在的一些基础功能：

  • 为一篇文章添加多个标签(tags)：请将文章顶部的 frontmatter 改为如下格式：
yaml
tags: ["Curve","文档","教程"]
  • 为文章添加静态封面：首先在全局配置中确认 cover -> showCover -> enable: true 打开封面。如果要单独为每篇文章设置不同封面，在每篇文章顶部的 frontmatter 中配置 cover 属性：
yaml
cover: /images/cover/芙宁娜.webp
  • 修改 Mermaid 渲染主题（请确保已安装）：在 frontmatter 中使用 mermaidTheme 属性：
yaml
mermaidTheme: forest

2. 黑幕效果的优雅实现 ​

在原主题作者的文章中没有找到有关黑幕的使用方法，所以我参照萌娘百科的黑幕实现方案，在全局样式表中注入了如下黑幕类样式：

scss
/* .vitepress/theme/style/post.scss */
.heimu,
.heimu rt{
    --heimu-color:#252525;
    --heimu-text-color:#fff;
    --heimu-link-color:#add8e6;
    --heimu-visited-link-color:#c5cae9;
    --heimu-new-link-color:#fcc;
    --heimu-new-visited-link-color:#ef9a9a;
    --heimu-extiw-visited-link-color:#d1c4e9;
 
    background-color:var(--heimu-color);
}
 
.heimu,
.heimu a,
a .heimu,
a.new .heimu,
span.heimu a:visited,
span.heimu a.new,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited,
span.heimu a.mw-disambig,
span.heimu a.mw-redirect{
    transition:color 0.13s linear;
    color:var(--heimu-color);
    text-shadow:none;
}
 
span.heimu:hover,
span.heimu:active{
    color:var(--heimu-text-color);
}
 
span.heimu:hover a,
a:hover span.heimu{
    color:var(--heimu-link-color);
}
 
span.heimu:hover a:visited,
a:visited:hover span.heimu{
    color:var(--heimu-visited-link-color);
}
 
span.heimu:hover a.new,
a.new:hover span.heimu{
    color:var(--heimu-new-link-color);
}
 
span.heimu a.new:hover:visited,
a.new:hover:visited span.heimu{
    color:var(--heimu-new-visited-link-color);
}
 
span.heimu:hover a.extiw:visited,
a.extiw:visited:hover span.heimu{
    color:var(--heimu-extiw-visited-link-color);
}
[color-mode="dark"] .heimu,
[color-mode="dark"] .heimu rt{
    --heimu-color:#5e6272;
}

若需使黑幕两端支持圆角收边，可使用如下代码补充：

scss
/* .vitepress/theme/style/post.scss */
span.heimu a.mw-redirect{
      transition:color 0.13s linear;
      color:var(--heimu-color);
      text-shadow:none;
      border-radius: 6px; /* 调整数值来控制圆角程度 */
  }
  • 使用事例： 在文章中使用 <span> 标签实现黑幕效果。鼠标悬停在黑幕上能看到 title 提示词：
    html
    这是一个 <span class="heimu" title="你知道的太多了">黑幕</span> 啊。
  • 渲染结果： 这是一个 黑幕 啊。
引用站外地址，请注意甄别链接安全性
link-img
萌娘百科万物皆可萌的百科全书 - zh.moegirl.org.cn万物皆可萌的百科全书

3. Mermaid 拓扑图表的样式修复 ​

默认的 Mermaid 在 VitePress 渲染中存在一个严重痛点：文字严重错位（主题全局的 p 标签样式会污染 SVG 内部的文本，撑爆节点）。为此我封装了样式净化逻辑：

安装依赖： ​
bash
npm add -D vitepress-plugin-mermaid mermaid
配置 config.mjs： ​
javascript
// .vitepress/config.mjs
import { withMermaid } from "vitepress-plugin-mermaid";
export default withPwa(
  withMermaid(
    defineConfig({
      mermaid: { theme: 'default' },
      mermaidPlugin: { class: "mermaid fix-mermaid-scroll" }
    })
  )
);
样式修复 (post.scss)： ​
scss
/* .vitepress/theme/style/post.scss */
.fix-mermaid-scroll {
  width: 100%;
  overflow-x: auto !important;
  display: block !important;
  text-align: center;
  padding: 1rem 0;
  p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
渲染效果： ​
黑幕定制与基础配置https://blog.chgr.cc/posts/2025/0618
作者ZSCGR
发布于2025/6/18
更新于今日内
许可协议 CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际
Curve黑幕MermaidCSS魔改教程
评论 隐私政策