主题使用心得
在主题作者的文章中可能没有介绍，但确实存在的一些功能。
置顶文章
若要将一篇文章置顶，请在文章顶部的 frontmatter 中加上 top: true 。
为一篇文章添加多个标签(tags)
若要为一篇文章添加多个标签，请将文章顶部的 frontmatter 改为如下格式
tags: ["Curve","文档","教程"]为文章添加封面
首先在 assets\themeConfig.mjs 配置中确认 cover ->showCover -> enable: true 打开封面，如果要为文章选用随机封面则继续按照主题说明在下面配置封面地址；如果要单独为每篇文章设置不同封面则在每篇文章顶部的 frontmatter 中使用 cover 属性，例如
cover: https://example.com/a.jpg修改mermaid主题（请确保已安装）
同上，在 frontmatter 中使用 mermaidTheme 属性，例如
mermaidTheme: forest功能拓展
黑幕的实现
在原主题作者的文章中没有找到有关黑幕的使用方法，所以自己参照萌百的黑幕实现方法进行实现。
.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;
}
阅读更多：https://zh.moegirl.org.cn/MediaWiki:Gadget-site-styles.css
本文引自萌娘百科(https://zh.moegirl.org.cn )，文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0 中国大陆》协议。将上述代码放进 theme\style\post.scss 中即可实现黑幕效果，如果需要黑幕实现圆角功能请按下面的位置添加控制圆角的代码。
span.heimu a.mw-redirect{
transition:color 0.13s linear;
color:var(--heimu-color);
text-shadow:none;
border-radius: 6px; /* 添加这一行，调整数值来控制圆角程度 */
}使用事例
在文章中使用<sapn>标签实现黑幕效果。另，把鼠标悬停在黑幕上能看到title属性中的文字哦~
这就是一个<span class="heimu" title="你知道的太多了"> 黑幕 </span>啊。渲染结果
这就是一个 黑幕 啊。
引用站外地址，请注意甄别链接安全性
mermaid的实现
为了在博客中展示拓扑图，我尝试集成了 Mermaid。这个过程遇到了一些 CSS 冲突的“天坑”，以下是完美的解决方案。
安装插件
推荐使用 vitepress-plugin-mermaid，它对 SSR 支持较好。
npm add -D vitepress-plugin-mermaid mermaid配置插件 (config.mjs)
这里有两个关键点：
- 配置包裹：
withMermaid需要包裹住defineConfig。 - 自定义类名：通过
mermaidPlugin注入fix-mermaid-scroll类名，方便后续修复样式。
import { withMermaid } from "vitepress-plugin-mermaid";
export default withPwa(
withMermaid(
defineConfig({
// ... 原有配置 ...
// mermaid
mermaid: {
// 可以在这里配置 mermaid 的主题等
theme: 'default',
},
mermaidPlugin: {
// 给所有图表容器加上一个自定义类名 'fix-mermaid-scroll'
class: "mermaid fix-mermaid-scroll",
},
)
);样式修复 (核心)
默认情况下，Mermaid 有个严重问题：
文字错位：主题全局的 p 标签样式（margin/line-height）会“污染”图表内部文字，导致节点炸裂。
请在 theme\style\post.scss 的 :deep(.markdown-main-style) 内部添加以下修复代码：
/* 针对自定义类名进行修复 */
.fix-mermaid-scroll {
/* --- 1. 容器设置：开启滚动 --- */
width: 100%;
overflow-x: auto !important;
display: block !important;
text-align: center;
padding: 1rem 0;
/* --- 2. 内容修复 (P标签) --- */
/* 清除全局 CSS 污染，让文字乖乖居中且不撑爆节点 */
p {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
font-size: 14px !important;
/* 强制 Flex 居中 */
text-align: center !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
}使用示例
直接在 Markdown 中使用 mermaid 代码块即可：
```mermaid
graph LR
User[用户] -- 访问 --> Blog[我的博客]
Blog -- 集成 --> Mermaid[流程图插件]
Mermaid -- 样式修复 --> Perfect[完美显示]
```