塑料世界的玻璃球

从 Dune 到 Dune Rev：一次 Playnite 主题兼容性改造记录

Fri, 31 Jul 2026 00:00:00 +0000

我一直在使用 Playnite 管理游戏库。在桌面主题中，Dune 很符合我的审美：宽松的排版、圆角卡片、干净的层次，以及很明显的 WinUI 3 / Fluent Design 气质。遗憾的是，它是一个较新的主题，扩展兼容性远不如一些成熟主题；部分插件页面会出现黑底黑字，另一些插件则完全没有位置显示。

于是，我和 Codex 用一天时间把它逐步改造成了 Dune Rev：一个由我维护、保留原作视觉语言，同时补充扩展兼容性与自定义能力的个人 fork。

Dune Rev 的详情视图；概览卡片和扩展内容会根据可用数据自适应显示

起点：好看的主题，不完整的生态

Dune 原本声明支持 SuccessStory、HowLongToBeat、Extra Metadata Loader 和 ScreenshotsVisualizer，基础方向已经很清楚，但我日常使用的插件远不止这些。作为参照，Mythic 对 BackgroundChanger、DuplicateHider、GameActivity、Library Management、ThemeExtras、Steam 新闻与评论、ThemeModifier 等扩展都有成熟集成。

最初看到的问题只是“设置页面颜色不对”，真正开始检查 XAML 后才发现，这并不是简单补几种颜色就能结束的工作：Playnite 主题不仅负责外观，还承担了许多插件控件的宿主、资源字典、可见性条件和布局契约。一个缺失的资源键可能让文字不可读；一个名称不正确的ContentControl 会让插件无法注入内容；而两个视图复用同一份播放状态，甚至会产生只有在来回切换视图后才出现的故障。

把插件数据变成主题的一部分

这次修改并没有简单地把所有插件面板堆到页面底部。我更希望扩展数据看起来像 Dune 原生界面的一部分，因此重新组织了详情页的概览区域：最后游玩时间、累计游玩时长、完成状态、成就、活动记录、HowLongToBeat 和 SystemChecker 都使用同一套卡片语言。

这些卡片遵循几个规则：

插件没有安装，或当前游戏没有对应数据时，卡片自动隐藏；
剩余卡片自动换行，不为缺失项目留下空洞；
可以打开扩展详情的卡片带有 Hover 动画，提示它不是静态信息；
HowLongToBeat 只在卡片中显示 Main Story，避免 Main、Main+ 和 100% 挤在一起；
完整图表、进度条或列表仍保留在下方的独立标签页中。

Playnite Achievements 是一个特殊情况。它本身带有主题迁移机制，因此显式添加一套“原生支持”反而会与迁移后的控件重复或冲突。最终方案是让插件继续负责迁移，主题只提供它需要的颜色和控件资源。这个过程也提醒我：插件兼容并不总是“写得越多越好”，首先要理解插件已经承担了什么工作。

目前 Dune Rev 覆盖的主要扩展包括：

功能	扩展
成就	SuccessStory、Playnite Achievements 自动迁移
替代背景	BackgroundChanger
重复副本	DuplicateHider
功能图标	Library Management
收藏与完成状态	ThemeExtras
活动记录	GameActivity
通关时间估算	HowLongToBeat
Logo 与视频	Extra Metadata Loader
截图	ScreenshotsVisualizer
Steam 新闻与在线人数	Steam News and Players Viewer
Steam 评论	Review Viewer
系统需求	SystemChecker
主题调整	ThemeModifier

最难处理的并不是“显示”，而是状态

Extra Metadata Loader 的 Logo 与视频集成带来了几个很典型的问题。早期版本在详情页没有显示Logo，而是退回到了游戏图标；修正控件宿主后，视频又出现了更隐蔽的状态错误：从详情视图切换到 Grid-Details View，再切回来，英雄图区域就无法重新播放视频，而 Grid 视图始终正常。

原因是两个视图同时使用了缓存的标准播放器、相同的 RadioButton 组名，并绑定到插件的全局 IsVideoPlaying 状态。视图虽然切换了，播放状态和宿主却没有真正隔离。最终我为两个视图使用独立配置的播放器实例、不同的媒体选择组，并让播放按钮绑定到各自播放器的状态。这个 bug 很适合作为 WPF/XAML 的一个小例子：界面消失不代表状态也消失，名称作用域之外还可能存在由插件缓存的对象。

Details View 与 Grid-Details View 不是同一种布局

另一个持续反复的问题是宽度。详情视图适合宽屏内容：左侧有概览卡片与扩展标签页，右侧是开发者、发行商、评分和功能特色。Grid-Details View 则通常只是网格右侧的一条窄栏。如果把两者当成同一套横向布局，结果不是信息栏吞掉所有空间，就是卡片被压缩成细长的小块。

因此，两种视图最终拥有了独立的尺寸和排列规则：

Details View 默认最大内容宽度为 1760 px，信息栏最大宽度为 480 px；
Grid View 默认详情栏宽度为 640 px；
Grid 中的概览卡片可以换行，信息面板移动到卡片下方；
Logo、卡片、扩展面板、按钮和顶部栏尺寸都可独立调整。

Grid-Details View 使用专门的窄栏布局，而不是压缩宽屏详情页

这些设置被暴露给 ThemeModifier。它的主题配置格式目前只有一条 Description 字符串，没有按语言提供名称的机制，所以我采用了 English / 简体中文 的双语标签，并统一按“全局布局、详情视图、网格视图、扩展面板、网格封面”等区域分组。最终共有 26 个经过核对、确实被主题使用的调节项，而不只是清单里看得见、实际不起作用的滑条。

为什么选择 Fluent Dim

Dune 原本的深色模式就注明可能存在问题。真正麻烦的是，Playnite 10 没有为插件注入的控件提供可靠、统一的深浅色状态：主题自己的控件可以切换，插件迁移或注入的页面却未必跟随。结果往往是浅色背景上的浅色文字，或深色背景上的黑色文字。

与其维护两套始终有一部分失效的配色，我最终选择只保留一套 Fluent Dim：比传统浅色模式更适合夜间，又不像纯黑主题那样产生强烈对比。它使用深灰蓝表面、较柔和的白色文字和 Fluent风格的半透明层次。这个决定牺牲了主题切换，但换来了主界面、设置窗口和插件内容之间稳定得多的一致性。

从修改版到可以发布的 fork

随着修改越来越多，它已经不适合继续被当成一份本地补丁。我将项目命名为 Dune Rev，生成了新的 GUID，更新主题名称、作者与仓库链接，并补齐 README、CHANGELOG、.gitignore、许可证和 Playnite 的 Add-on / Installer manifests。

原作采用 MIT License，因此 fork 和再发布是允许的，但必须保留原始版权与许可声明。Dune Rev 的许可证中保留了 sakasakiking 的原始版权信息，并加入我的修改声明。

发布前还进行了几层验证：

对全部 XAML 文件做 XML 解析；
使用 Playnite 的 32 位程序集按真实资源加载顺序测试字典；
执行 Release 构建并确认没有编译错误；
用 Playnite Toolbox 生成 .pthm 安装包并检查包内文件；
核对 ThemeModifier 配置、插件清单、截图与下载 URL。

最终的 1.0.0 安装包已经准备完成。接下来只需要建立 GitHub Release，并把 Add-on manifest 提交到官方的 PlayniteAddonDatabase，就可以申请进入 Playnite 内置的附加组件浏览器。

总结

这次工作最初只是想修复几个插件页面的颜色，最后却变成了对主题布局、插件数据、状态管理和发布流程的完整梳理。它也说明了 Playnite 主题开发很有意思的一点：XAML 不只是“皮肤”，而是核心程序与多个独立扩展之间的一层用户界面协议。

Dune Rev 仍然保留了我最喜欢的 Dune 外观，但现在它更像一个可以长期使用的完整主题。更重要的是，这个项目已经从我电脑上的一组修改，变成了有独立身份、可验证、可更新，也可以公开发布的开源项目。

本篇博客由我与 GPT-5.6 Sol High 撰写

CK3 缺失的姓名本地化条目修补脚本

Fri, 03 Oct 2025 00:00:00 +0000

前言

在《十字军之王3》的模组开发中，一个常见的问题是将人名硬编码在代码中后如何快速地将它们迁移到本地化文件中。

实际上这个问题解决起来非常简单，因为当角色名字仅在角色文件中定义而未在本地化文件中定义时，游戏的日志error.log中就会出现关于角色名字本地化条目缺失的报错，例如下面的报错：

1
2


[15:47:18][E][culture_name_equivalency.cpp:101]: Missing loc Chrysanthius: "Chrysanthius"
[15:47:18][E][culture_name_equivalency.cpp:101]: Missing loc Oribasius: "Oribasius"

因为其具备固定的格式，因此只需要用一个简单的脚本快速处理一下就可以解决这个问题。

脚本

代码

可以直接复制下面的代码使用。

需要安装 Python

查看代码

 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71


import re
import os
from collections import OrderedDict

def generate_loc_from_log(log_file_path, output_file_path):
 """
 从 CK3 的 error.log 文件中提取缺失的本地化条目并生成 .yml 文件。
 """
 # 用于匹配 "Missing loc KEY: " 格式的正则表达式
 # 它会捕获 "Missing loc " 之后、冒号 ":" 之前的部分作为键 (KEY)
 pattern = re.compile(r"Missing loc ([^:]+):")

 # 使用一个集合 (set) 来存储所有找到的键，自动处理重复项
 found_keys = set()

 print(f"正在读取日志文件: {log_file_path}")

 try:
 with open(log_file_path, 'r', encoding='utf-8', errors='ignore') as log_file:
 for line in log_file:
 match = pattern.search(line)
 if match:
 # 提取匹配到的键，并去除可能存在的前后空格
 key = match.group(1).strip()
 if key: # 确保键不为空
 found_keys.add(key)
 except FileNotFoundError:
 print(f"错误：找不到文件 '{log_file_path}'。请确保路径正确。")
 return
 except Exception as e:
 print(f"读取文件时发生错误: {e}")
 return

 if not found_keys:
 print("在日志文件中没有找到 'Missing loc' 相关的错误。")
 return

 # 将集合转换为列表并按字母顺序排序，以便输出文件整洁
 sorted_keys = sorted(list(found_keys))

 print(f"找到了 {len(sorted_keys)} 个独一无二的缺失本地化条目。")

 try:
 with open(output_file_path, 'w', encoding='utf-8-sig') as output_file:
 # 写入 yml 文件必需的语言头部
 output_file.write("l_english:\n")

 # 遍历所有排序后的键，并按格式写入文件
 for key in sorted_keys:
 # 格式化为： KEY:0 "KEY"
 # 注意两个空格是 yml 格式的要求
 output_line = f' {key}:0 "{key}"\n'
 output_file.write(output_line)

 print(f"成功！本地化文件已生成: {output_file_path}")
 print("您可以将此文件的内容复制并粘贴到您的 Mod 本地化文件中。")

 except Exception as e:
 print(f"写入输出文件时发生错误: {e}")

if __name__ == "__main__":
 # 1. 请将您的 error.log 文件路径放在这里
 # 例如: "C:/Users/YourUser/Documents/Paradox Interactive/Crusader Kings III/logs/error.log"
 # 如果脚本和log文件在同一个文件夹，可以直接写 "error.log"
 input_log_path = "error.log"

 # 2. 这是生成的文件的名称
 output_yml_path = "generated_names_loc.yml"

 # 运行主函数
 generate_loc_from_log(input_log_path, output_yml_path)

使用

推荐在error.log所在目录创建generate_loc.py文件。路径一般是：

1

%USERPROFILE%\Documents\Paradox Interactive\Crusader Kings III\logs

随后在该目录运行命令提示符或 Powershell ，执行如下命令：

1

python generate_loc.py

脚本运行完毕后，在同一个文件夹下会生成一个名为generated_names_loc.yml的新文件。这个文件里就包含了所有需要的本地化条目。

记一次老电脑升级

Sat, 27 Sep 2025 00:00:00 +0000

近期，我深感我的旧台式电脑已经严重落后于时代，因此我决定对其进行一系列升级。

这是一次折腾老平台的尝试，不是面向当下主流装机的推荐。

平台配置

我的配置如下：

配置	详情
CPU	英特尔 Xeon E5 1607 v2 4C4T @3.0GHz
主板	X79 寨板
内存	美光 16GB DDR3 1333MHz
硬盘1	西数 1TB 机械硬盘 WD1003FZEX
硬盘2	西数 1TB 机械硬盘 WD10EZEX
显卡	AMD 6500XT 4GB
网卡	TP-Link TL-WDN5280 (RTL8821AE, WiFi 5)
显示器	HP L2245w
系统	Windows 11 Pro 24H2

对于这套配置，高情商的说法是，仿佛能看到历史的画卷在眼前展开——2008 年的显示器，2013 年的 CPU，西数的老黑盘蓝盘，以及一块 2022 年的显卡。稍有经验的人都可以看出这套配置的问题——性能孱弱的CPU、机械盘跑 Win 11、显卡性能受限，以及年代久远的单天线网卡。

升级思路

这套配置首要问题就是机械硬盘在 Win 11 的糟糕体验——漫长的开机时间、无处不在的卡顿，这是首先要解决的，需要添加一块固态硬盘。

其次，CPU的性能表现已经不尽如人意：E5 1607 v2 是这一代 Ivy-Bridge E5 家族中最弱的型号，只有四核心，频率 3.0GHz，而且锁倍频，也没有超线程。

至强 E5 1607 v2 CPU

CPU-Z 中 E5 1607 v2 的信息和跑分成绩

此外，老旧的单天线网卡在如今的网络环境中表现非常糟糕，因此网卡也有必要进行升级。

而 X79 平台仅支持 PCI-E 3.0 导致 6500XT 无法发挥全部性能的问题，因为性能差距不算特别大，因此暂时忽略。

CPU 升级：E5 1650 v2 ￥45

选购

X79 平台可选的 CPU 中，E5 1650 v2 算是非常突出的一款——六核心十二线程，3.5GHz 基础频率，规格与当年的至尊酷睿 i7 4960X 非常接近。不锁倍频也意味着可以超频使用，进一步强化性能。如今 45 元的价格可以说很有性价比。

至强 E5 1650 v2 CPU

测评

对于这样一块不锁倍频的 CPU，默频使用显然是有些浪费了。上机后先把倍频拉到全核 39，直接来看 CPU-Z 成绩。

CPU-Z 中 E5 1650 v2 @ 3.9GHz 的信息和跑分成绩

我手上这块U似乎体质极佳，0.864V 电压就能跑 3.5GHz？进行一会烤机后，发现可以轻松压住。那么我们进一步超频到全核 4.0GHz，可以看到，成绩还有进一步提升。

E5 1650 v2 @ 4.0GHz 的CPU-Z跑分成绩，以及温度和电压情况

注：我发现 CPUTemp 显示的电压似乎比 CPU-Z 总是高 0.1V 左右。

而如果进一步超频到全核 4.2GHz，则会直接无法开机。不过我发现在即使在 4.0GHz 频率下，烤机一段时间后就会自动降频，但 CPU 的温度和电压均没有什么异常，推测为主板供电可能过热撑不住了，毕竟不能对山寨主板要求太高。
因此，我最终决定将频率维持在全核 3.9GHz，相比 1607 v2，这已经可以带来足够可观的性能提升：单核性能提升32.9%，多核性能更是翻倍有余，提升153.6%.

结果

CPU-Z 测试结果

跑分项目	E5 1607 v2 (4C4T) @3.0Ghz	E5 1650 v2 (6C12T) @3.9GHz	提升
单线程	284.4	377.9	+32.9%
多线程	1078.2	2723.9	+153.6%

硬盘升级：固态硬盘 - Acer RE100 256GB - ￥115

选购

因为这台电脑主要是用于玩一些硬件要求不高的游戏，并没有什么重要资料需要保存，因此我选择了一块非原厂的 SATA 固态：宏碁 RE100 256GB。这块固态使用的是 TLC 颗粒，提供 5 年质保，256GB 版本标称寿命 140TBW ，￥115 的价格还算可以。如果坏了就直接走售后换新。

开箱

宏碁 RE100 开箱

包装就是简单的纸盒包装，里面包括硬盘本体、说明书以及螺丝。包装背面倒是直接写明了硬盘是由佰维生产，倒也不令人意外。毕竟宏碁存储实际上就是佰维在搞。硬盘采用了黑色铝合金外壳，质感不错。

测评

方案

使用 FlashID 工具，可以获取硬盘的主控和颗粒信息。

宏碁 RE100 主控和颗粒信息

我手上这一块硬盘使用了来自联芸的 MAS1102 主控，以及美光的 232 层 TLC 颗粒，无缓设计。方案符合价格。

性能

Crystal Disk Mark 性能测试如图所示，低端固态的正常水平。

Crystal Disk Mark 测试结果

使用白眼进行全盘写入测试，起初速度保持在约 500MB/s，当写入超过 40GB 后，模拟 SLC 缓存告罄，速度下降至约 50MB/s。

白眼测试结果

其他

官方还提供了佰维的硬盘管理软件 Biwin Intelligence，提供性能测试、数据迁移、硬盘擦除等功能。

Biwin Intelligence 软件界面

网卡升级：RTL8852BE - ￥28

选购与安装

我手头恰好有一块从笔记本上淘汰下来的 RTL8852BE 无线网卡，这块网卡似乎主要是向 OEM 出货，支持 WiFi 6 和蓝牙 5.3，但是 5GHz 频宽最高只有 80MHz，而且早期驱动存在问题，导致风评不佳。不过既然我手上正好有，那么也不用买新的了。
我购买了一块 M.2 转 PCI-E 的转接板（包括延长线天线 ￥28），如果未来考虑升级 AX210 也会非常方便。并且考虑到电脑的位置恰好在信号死角，因此还买了外置的延长线天线。

RTL8852BE、M.2 转 PCI-E 转接板、配套天线

将旧的网卡拆卸下来换上新的，将蓝牙线连接到主板 USB 2.0 接口，接好天线，就大功告成了。

驱动

可能是由于主要面向 OEM 出货的缘故，我在瑞昱官网并没有找到驱动的下载链接，尝试下载了 OEM 驱动或使用驱动软件安装，也出现报错。
最终，在 DriverPack 上找到了可用的驱动程序，下载安装后即可正常使用。

其他升级：米家开机卡 - ￥15

此外，我还购买了一块米家开机卡，这实际上就是一个蓝牙 Mesh 通断器。将机箱的 PWR 线接入开机卡，再将开机卡的 PWR 线接入主板，把开机卡插进 PCI-E 插槽，通电并接入米家，就可以通过米家来控制电脑的开关机了。

需要蓝牙 Mesh 网关

米家开机卡

米家内的界面，与其他蓝牙 Mesh 通断器的界面一致

总结

本次升级总计花费约 ￥200，主要是在 CPU、硬盘、网络等方面进行了升级，让老平台焕发新生，再战五年！

-	升级前	升级后
硬盘	开机缓慢，系统响应十分卡顿	使用固态硬盘做系统盘，开机只需数秒，系统流畅丝滑
CPU	四核心四线程，性能较为孱弱	性能翻倍有余
网卡	单天线 WiFi5 无线网卡，信号不佳，没有内置蓝牙	WiFi6网卡，速度翻倍，网络顺畅，内置蓝牙
智能化	-	接入米家，可语音或远程控制开关机，支持米家自动化

为 Hugo 博客扩展 Mermaid 图表支持

Thu, 18 Sep 2025 23:04:05 +0800

什么是 Mermaid？

Mermaid 是一个基于 JavaScript 的图表和流程图生成工具，它允许你用简单的文本语法创建复杂的图表。但是 Hugo 并未原生提供支持。通过下面的步骤，可以为基于 Hugo 的博客扩展对 Mermaid 的支持。

功能特性

查看 Mermaid 图表测试来预览效果。

✅ 支持多种图表类型：流程图、序列图、甘特图、状态图、类图、饼图等
✅ 代码与图表切换：可以在渲染的图表和源码之间自由切换
✅ 主题适配：自动适配博客的明暗主题
✅ 响应式设计：在移动端和桌面端都能完美显示
✅ 缩放与拖拽：支持缩放和拖拽操作

代码编辑

注：以下内容适用于 Stack 主题，若在其他主题使用，可能需要自行调整。

下面的步骤均使用在博客根目录布局文件夹中创建同名文件来覆盖主题的方法（Hugo Module）执行修改。请勿直接修改主题文件，否则可能会被主题更新覆盖。

创建布局文件

创建 <博客根目录>/layouts/partials/article/components/content.html 文件。

1
2
3
4
5


<section class="article-content">
 <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
 {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
 {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
</section>

创建 <博客根目录>/layouts/partials/head/custom.html 文件。

点击展开代码

 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
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320


{{/* Mermaid 图表支持的 CSS 样式 */}}
{{ if .Site.Params.mermaid.enable }}
<style>
/* Mermaid 容器样式 */
.mermaid-container {
 position: relative;
 margin: 1.5em 0;
 margin-left: calc((var(--card-padding)) * -1);
 margin-right: calc((var(--card-padding)) * -1);
 width: calc(100% + var(--card-padding) * 2);
 border-radius: var(--card-border-radius);
 overflow: hidden;
 background: var(--card-background);
 box-shadow: var(--shadow-l1);
}

.mermaid-container:hover .mermaid-copy-btn {
 opacity: 1;
}

/* 右下角 ToggleSwitch 控制区域 */
.mermaid-toggle-control {
 position: absolute;
 bottom: calc(var(--card-padding));
 right: calc(var(--card-padding));
 z-index: 10;
 display: flex;
 align-items: center;
 gap: 8px;
}

/* 右上角 Copy 按钮 */
.mermaid-copy-btn {
 position: absolute;
 top: calc(var(--card-padding));
 right: calc(var(--card-padding));
 background: var(--card-background);
 border: none;
 box-shadow: var(--shadow-l2);
 border-radius: var(--tag-border-radius);
 padding: 8px 16px;
 color: var(--card-text-color-main);
 cursor: pointer;
 font-size: 14px;
 opacity: 0;
 transition: opacity 0.3s ease;
 z-index: 10;
}

/* 左下角缩放控制 */
.mermaid-zoom-controls {
 position: absolute;
 bottom: calc(var(--card-padding));
 left: calc(var(--card-padding));
 z-index: 10;
 display: flex;
 gap: 4px;
}

/* ToggleSwitch 样式 */
.mermaid-toggle-switch {
 position: relative;
 display: inline-block;
 width: 54px;
 height: 28px;
 background: var(--body-background);
 border-radius: 14px;
 border: 1px solid var(--card-border);
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-l1);
}

.mermaid-toggle-switch::before {
 content: '';
 position: absolute;
 top: 2px;
 left: 2px;
 width: 22px;
 height: 22px;
 background: var(--accent-color);
 border-radius: 50%;
 transition: all 0.3s ease;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mermaid-toggle-switch.code-mode::before {
 transform: translateX(24px);
 background: var(--card-text-color-secondary);
}

.mermaid-toggle-switch:hover {
 box-shadow: var(--shadow-l2);
}

/* 标签 */
.mermaid-toggle-label {
 font-size: 12px;
 color: var(--card-text-color-secondary);
 font-weight: 500;
 user-select: none;
}

/* 缩放控制按钮 */
.mermaid-zoom-btn {
 width: 28px;
 height: 28px;
 background: var(--card-background);
 border: 1px solid var(--card-border);
 border-radius: var(--tag-border-radius);
 color: var(--card-text-color-main);
 cursor: pointer;
 font-size: 14px;
 font-weight: bold;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-l1);
}

.mermaid-zoom-btn:hover {
 background: var(--accent-color);
 color: var(--accent-color-text);
 box-shadow: var(--shadow-l2);
}

.mermaid-zoom-btn:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

.mermaid-zoom-btn:disabled:hover {
 background: var(--card-background);
 color: var(--card-text-color-main);
 box-shadow: var(--shadow-l1);
}

/* 图表容器样式 */
.mermaid-diagram {
 padding: var(--card-padding);
 background: var(--card-background);
 overflow: auto;
 min-height: 250px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: grab;
 position: relative;
}

.mermaid-diagram.panning {
 cursor: grabbing;
}

.mermaid-diagram svg {
 max-width: none !important;
 width: auto !important;
 height: auto !important;
 transition: transform 0.3s ease;
 user-select: none;
}

/* 代码容器样式 - 与主题代码块一致 */
.mermaid-code {
 display: none;
 position: relative;
}

.mermaid-code pre {
 margin: 0;
 padding: var(--card-padding);
 background: var(--pre-background-color);
 color: var(--pre-text-color);
 font-family: var(--code-font-family);
 line-height: 1.428571429;
 word-break: break-all;
 overflow-x: auto;
}

.mermaid-code code {
 color: unset;
 border: none;
 background: none;
 padding: 0;
 font-family: var(--code-font-family);
}

/* 错误信息样式 */
.mermaid-error {
 padding: var(--card-padding);
 color: #e74c3c;
 background: rgba(231, 76, 60, 0.1);
 border-left: 4px solid #e74c3c;
 font-family: var(--code-font-family);
 font-size: 0.875rem;
 margin: 0;
}

/* 缩放和拖动状态 */
.mermaid-diagram.zoomed svg {
 transform: scale(var(--mermaid-zoom, 1)) translate(var(--mermaid-pan-x, 0), var(--mermaid-pan-y, 0));
 transform-origin: center;
}

/* SVG 文字修复 */
.mermaid-diagram svg text {
 font-size: 14px !important;
 overflow: visible !important;
}

.mermaid-diagram svg .nodeLabel,
.mermaid-diagram svg .edgeLabel {
 font-size: 14px !important;
 font-weight: 500 !important;
}

.mermaid-diagram svg foreignObject {
 overflow: visible !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
 .mermaid-toggle-control {
 top: 8px;
 left: 8px;
 gap: 6px;
 }
 
 .mermaid-copy-btn {
 top: 8px;
 right: 8px;
 padding: 6px 12px;
 font-size: 12px;
 }
 
 .mermaid-zoom-controls {
 bottom: 8px;
 right: 8px;
 gap: 2px;
 }
 
 .mermaid-toggle-switch {
 width: 48px;
 height: 24px;
 }
 
 .mermaid-toggle-switch::before {
 width: 18px;
 height: 18px;
 top: 2px;
 }
 
 .mermaid-toggle-switch.code-mode::before {
 transform: translateX(22px);
 }
 
 .mermaid-zoom-btn {
 width: 24px;
 height: 24px;
 font-size: 12px;
 }
 
 .mermaid-toggle-label {
 font-size: 11px;
 }
}

/* 明暗主题适配 */
@media (prefers-color-scheme: dark) {
 .mermaid-diagram svg {
 filter: brightness(0.9);
 }
}

/* 主题特定样式 */
[data-scheme="dark"] .mermaid-diagram svg {
 filter: brightness(0.9) contrast(1.1);
}

[data-scheme="light"] .mermaid-diagram svg {
 filter: brightness(1) contrast(1);
}

/* 全屏模式 */
.mermaid-container.fullscreen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 z-index: 9999;
 background: var(--body-background);
 border-radius: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
}

.mermaid-container.fullscreen .mermaid-diagram {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 40px;
}

.mermaid-container.fullscreen .mermaid-zoom-controls {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

.mermaid-container.fullscreen .mermaid-toggle-control {
 position: absolute;
 top: 20px;
 left: 20px;
}
</style>
{{ end }}

创建 <博客根目录>/layouts/partials/footer/custom.html 文件。

点击展开代码

 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
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292


{{/* Mermaid 图表支持 */}}
{{ if .Site.Params.mermaid.enable }}
<!-- Mermaid 配置信息 -->
<script id="mermaid-config" type="application/json">
{
 "theme": "{{ .Site.Params.mermaid.theme | default "default" }}",
 "showToggle": {{ if .Site.Params.mermaid.showToggle }}true{{ else }}true{{ end }}
}
</script>

<!-- Mermaid.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
 // 读取配置
 var configElement = document.getElementById('mermaid-config');
 var config = JSON.parse(configElement.textContent);
 
 // 初始化 Mermaid，改进文字显示
 mermaid.initialize({
 startOnLoad: false,
 theme: config.theme,
 themeVariables: {
 fontFamily: 'inherit',
 fontSize: '16px'
 },
 flowchart: {
 htmlLabels: true,
 curve: 'basis',
 padding: 20
 },
 sequence: {
 actorMargin: 50,
 boxMargin: 10,
 boxTextMargin: 5,
 noteMargin: 10,
 messageMargin: 35
 }
 });

 // 查找所有可能的 Mermaid 代码块
 var codeBlocks = document.querySelectorAll('code.language-mermaid, code.language-fallback, code[data-lang="mermaid"]');
 
 var mermaidIndex = 0;
 
 codeBlocks.forEach(function(codeBlock) {
 var codeContent = codeBlock.textContent.trim();
 
 // 检查是否是 Mermaid 代码（通过关键词判断）
 var isMermaid = /^(graph|sequenceDiagram|gantt|stateDiagram|classDiagram|pie|erDiagram|gitgraph|journey|flowchart|mindmap)/.test(codeContent);
 
 if (!isMermaid) return; // 如果不是 Mermaid 代码，跳过
 
 var preElement = codeBlock.parentElement;
 
 // 创建新的容器
 var container = document.createElement('div');
 container.className = 'mermaid-container';
 
 // 创建左上角 ToggleSwitch 控制（如果启用）
 if (config.showToggle) {
 var toggleControl = document.createElement('div');
 toggleControl.className = 'mermaid-toggle-control';
 
 var toggleLabel = document.createElement('span');
 toggleLabel.className = 'mermaid-toggle-label';
 toggleLabel.textContent = '图表';
 
 var toggleSwitch = document.createElement('div');
 toggleSwitch.className = 'mermaid-toggle-switch';
 toggleSwitch.title = '切换显示模式';
 
 toggleControl.appendChild(toggleLabel);
 toggleControl.appendChild(toggleSwitch);
 container.appendChild(toggleControl);
 }
 
 // 创建右上角 Copy 按钮
 var copyBtn = document.createElement('button');
 copyBtn.className = 'mermaid-copy-btn';
 copyBtn.textContent = 'Copy';
 copyBtn.title = '复制';
 container.appendChild(copyBtn);
 
 // 创建右下角缩放控制
 var zoomControls = document.createElement('div');
 zoomControls.className = 'mermaid-zoom-controls';
 
 var zoomOutBtn = document.createElement('button');
 zoomOutBtn.className = 'mermaid-zoom-btn';
 zoomOutBtn.textContent = '−';
 zoomOutBtn.title = '缩小';
 
 var zoomResetBtn = document.createElement('button');
 zoomResetBtn.className = 'mermaid-zoom-btn';
 zoomResetBtn.textContent = '⌂';
 zoomResetBtn.title = '重置缩放和位置';
 
 var zoomInBtn = document.createElement('button');
 zoomInBtn.className = 'mermaid-zoom-btn';
 zoomInBtn.textContent = '+';
 zoomInBtn.title = '放大';
 
 zoomControls.appendChild(zoomOutBtn);
 zoomControls.appendChild(zoomResetBtn);
 zoomControls.appendChild(zoomInBtn);
 container.appendChild(zoomControls);
 
 // 创建图表容器
 var diagramDiv = document.createElement('div');
 diagramDiv.className = 'mermaid-diagram zoomed';
 diagramDiv.id = 'mermaid-diagram-' + mermaidIndex;
 diagramDiv.style.setProperty('--mermaid-zoom', '1');
 diagramDiv.style.setProperty('--mermaid-pan-x', '0px');
 diagramDiv.style.setProperty('--mermaid-pan-y', '0px');
 container.appendChild(diagramDiv);
 
 // 创建代码容器（如果启用切换）
 var codeDiv;
 if (config.showToggle) {
 codeDiv = document.createElement('div');
 codeDiv.className = 'mermaid-code';
 
 var newPre = document.createElement('pre');
 var newCode = document.createElement('code');
 newCode.className = 'language-mermaid';
 newCode.textContent = codeContent;
 newPre.appendChild(newCode);
 codeDiv.appendChild(newPre);
 container.appendChild(codeDiv);
 }
 
 // 替换原始的整个 highlight 容器
 var highlightContainer = preElement.closest('.highlight') || preElement.closest('.chroma') || preElement;
 highlightContainer.parentNode.replaceChild(container, highlightContainer);
 
 // 渲染 Mermaid 图表
 try {
 mermaid.render('mermaid-diagram-' + mermaidIndex + '-svg', codeContent).then(function(result) {
 diagramDiv.innerHTML = result.svg;
 
 // 修复文字显示问题
 var svg = diagramDiv.querySelector('svg');
 if (svg) {
 svg.style.maxWidth = 'none';
 svg.style.width = 'auto';
 svg.style.height = 'auto';
 }
 }).catch(function(error) {
 console.error('Mermaid render error:', error);
 diagramDiv.innerHTML = '<div class="mermaid-error">图表渲染失败: ' + error.message + '</div>';
 });
 } catch (error) {
 console.error('Mermaid init error:', error);
 diagramDiv.innerHTML = '<div class="mermaid-error">图表初始化失败</div>';
 }
 
 // 缩放和拖动功能
 var currentZoom = 1;
 var maxZoom = 3;
 var minZoom = 0.5;
 var zoomStep = 0.25;
 var panX = 0;
 var panY = 0;
 var isDragging = false;
 var lastMouseX = 0;
 var lastMouseY = 0;
 
 function updateTransform() {
 diagramDiv.style.setProperty('--mermaid-zoom', currentZoom);
 diagramDiv.style.setProperty('--mermaid-pan-x', panX + 'px');
 diagramDiv.style.setProperty('--mermaid-pan-y', panY + 'px');
 
 // 更新按钮状态
 zoomOutBtn.disabled = currentZoom <= minZoom;
 zoomInBtn.disabled = currentZoom >= maxZoom;
 }
 
 // 缩放功能
 zoomInBtn.addEventListener('click', function() {
 if (currentZoom < maxZoom) {
 currentZoom = Math.min(maxZoom, currentZoom + zoomStep);
 updateTransform();
 }
 });
 
 zoomOutBtn.addEventListener('click', function() {
 if (currentZoom > minZoom) {
 currentZoom = Math.max(minZoom, currentZoom - zoomStep);
 updateTransform();
 }
 });
 
 zoomResetBtn.addEventListener('click', function() {
 currentZoom = 1;
 panX = 0;
 panY = 0;
 updateTransform();
 });
 
 // 拖动功能
 diagramDiv.addEventListener('mousedown', function(e) {
 if (currentZoom > 1) {
 isDragging = true;
 lastMouseX = e.clientX;
 lastMouseY = e.clientY;
 diagramDiv.classList.add('panning');
 e.preventDefault();
 }
 });
 
 document.addEventListener('mousemove', function(e) {
 if (isDragging) {
 var deltaX = e.clientX - lastMouseX;
 var deltaY = e.clientY - lastMouseY;
 
 panX += deltaX;
 panY += deltaY;
 
 lastMouseX = e.clientX;
 lastMouseY = e.clientY;
 
 updateTransform();
 }
 });
 
 document.addEventListener('mouseup', function() {
 if (isDragging) {
 isDragging = false;
 diagramDiv.classList.remove('panning');
 }
 });
 
 // 初始化缩放状态
 updateTransform();
 
 // Copy 按钮功能
 copyBtn.addEventListener('click', function() {
 var isDiagramMode = diagramDiv.style.display !== 'none';
 var textToCopy = codeContent;
 
 navigator.clipboard.writeText(textToCopy).then(function() {
 copyBtn.textContent = 'Copied!';
 setTimeout(function() {
 copyBtn.textContent = 'Copy';
 }, 1000);
 }).catch(function(err) {
 console.error('Copy failed:', err);
 alert('复制失败');
 });
 });
 
 // 切换开关事件（如果启用）
 if (config.showToggle) {
 var isDiagramMode = true;
 
 toggleSwitch.addEventListener('click', function() {
 isDiagramMode = !isDiagramMode;
 
 if (isDiagramMode) {
 // 切换到图表模式
 toggleSwitch.classList.remove('code-mode');
 toggleLabel.textContent = '图表';
 diagramDiv.style.display = 'flex';
 codeDiv.style.display = 'none';
 zoomControls.style.display = 'flex';
 } else {
 // 切换到源码模式
 toggleSwitch.classList.add('code-mode');
 toggleLabel.textContent = '源码';
 diagramDiv.style.display = 'none';
 codeDiv.style.display = 'block';
 zoomControls.style.display = 'none';
 }
 
 // 保存用户偏好
 localStorage.setItem('mermaid-view-preference', isDiagramMode ? 'diagram' : 'code');
 });
 
 // 恢复用户偏好
 var savedPreference = localStorage.getItem('mermaid-view-preference');
 if (savedPreference === 'code') {
 toggleSwitch.click();
 }
 }
 
 mermaidIndex++;
 });
});
</script>
{{ end }}

配置选项

在 hugo.yaml 中可以配置以下选项：

1
2
3
4
5


params:
 mermaid:
 enable: true # 是否启用 Mermaid 功能
 theme: "default" # 主题：default, dark, forest, neutral
 showToggle: true # 是否显示切换按钮

使用方法

在 Markdown 文件中使用 mermaid 代码块：

1
2
3
4
5


```mermaid
graph TD
 A[开始] --> B[处理]
 B --> C[结束]
```

基本语法示例

简单流程图

1
2
3
4


```mermaid
graph LR
 A --> B --> C
```

带标签的流程图

1
2
3
4
5
6
7


```mermaid
graph TD
 A[方形] --> B(圆角)
 B --> C{菱形}
 C -->|是| D[结果1]
 C -->|否| E[结果2]
```

简单序列图

1
2
3
4
5


```mermaid
sequenceDiagram
 Alice->>Bob: 你好
 Bob-->>Alice: 你好
```

简单甘特图

1
2
3
4
5
6
7


```mermaid
gantt
 title 项目计划
 section 阶段一
 任务1: 2024-01-01, 5d
 任务2: after 任务1, 3d
```

高级用法

自定义样式

graph TD
 A[开始] --> B[处理]
 B --> C[结束]
 
 style A fill:#f9f,stroke:#333,stroke-width:2px
 style C fill:#bbf,stroke:#333,stroke-width:2px

复杂的序列图

sequenceDiagram
 participant A as 用户
 participant B as 系统
 participant C as 数据库
 
 A->>B: 登录请求
 B->>C: 验证用户
 C-->>B: 返回结果
 alt 验证成功
 B-->>A: 登录成功
 else 验证失败
 B-->>A: 登录失败
 end

支持的图表类型

图表类型	关键词	用途
流程图	`graph` / `flowchart`	流程展示
序列图	`sequenceDiagram`	交互过程
甘特图	`gantt`	项目计划
状态图	`stateDiagram`	状态转换
类图	`classDiagram`	类关系
饼图	`pie`	数据占比
ER图	`erDiagram`	数据库设计
用户旅程图	`journey`	用户体验

切换功能说明

每个 Mermaid 图表都会显示两个切换按钮：

图表：显示渲染后的 SVG 图表
源码：显示原始的 Mermaid 代码

你的选择偏好会自动保存，下次访问时会记住你的选择。

故障排除

图表不显示？

检查配置：确保 hugo.yaml 中 params.mermaid.enable 为 true
检查语法：确保 Mermaid 语法正确
查看控制台：打开浏览器开发者工具查看错误信息

图表显示异常？

刷新页面重新加载
检查网络：确保 CDN 资源能正常加载
尝试不同的图表主题

Mermaid 图表测试

Thu, 18 Sep 2025 18:04:05 +0800

这篇文章用于测试博客的 Mermaid 图表支持功能。

流程图 (Flowchart)

graph TD
 A[开始] --> B{判断条件}
 B -->|是| C[执行操作A]
 B -->|否| D[执行操作B]
 C --> E[结束]
 D --> E

序列图 (Sequence Diagram)

sequenceDiagram
 participant 用户
 participant 浏览器
 participant 服务器
 
 用户->>浏览器: 访问网站
 浏览器->>服务器: 发送请求
 服务器-->>浏览器: 返回数据
 浏览器-->>用户: 展示页面

甘特图 (Gantt Chart)

gantt
 title 项目开发计划
 dateFormat YYYY-MM-DD
 section 设计阶段
 需求分析 :done, des1, 2024-01-01, 2024-01-05
 UI设计 :done, des2, 2024-01-06, 2024-01-12
 原型制作 :active, des3, 2024-01-13, 2024-01-20
 section 开发阶段
 前端开发 :dev1, 2024-01-21, 2024-02-10
 后端开发 :dev2, 2024-01-25, 2024-02-15
 测试阶段 :test, 2024-02-16, 2024-02-25

状态图 (State Diagram)

stateDiagram-v2
 [*] --> 空闲
 空闲 --> 运行: 开始
 运行 --> 暂停: 暂停
 暂停 --> 运行: 继续
 运行 --> 完成: 结束
 完成 --> [*]

类图 (Class Diagram)

classDiagram
 class Animal {
 +String name
 +int age
 +makeSound()
 +move()
 }
 
 class Dog {
 +String breed
 +bark()
 +wagTail()
 }
 
 class Cat {
 +boolean indoor
 +meow()
 +purr()
 }
 
 Animal <|-- Dog
 Animal <|-- Cat

饼图 (Pie Chart)

pie title 编程语言使用比例
 "JavaScript" : 35
 "Python" : 25
 "Java" : 20
 "Go" : 10
 "其他" : 10

ER图 (Entity Relationship Diagram)

erDiagram
 USER ||--o{ ORDER : places
 USER {
 int id
 string name
 string email
 }
 ORDER ||--|{ LINE-ITEM : contains
 ORDER {
 int id
 date order_date
 int user_id
 }
 LINE-ITEM {
 int id
 int quantity
 int product_id
 int order_id
 }
 PRODUCT ||--o{ LINE-ITEM : "ordered in"
 PRODUCT {
 int id
 string name
 decimal price
 }

用户旅程图 (User Journey)

journey
 title 用户购买流程
 section 发现产品
 浏览商品: 5: 用户
 比较价格: 3: 用户
 阅读评价: 4: 用户
 section 购买决策
 添加到购物车: 5: 用户
 查看购物车: 3: 用户
 结算付款: 2: 用户
 section 收货体验
 等待发货: 2: 用户
 收到商品: 5: 用户
 使用体验: 5: 用户

以上就是各种类型的 Mermaid 图表示例。每个图表都应该可以在"图表"和"源码"之间切换显示。

传奇（Legenda）

Tue, 07 Feb 2023 00:00:00 +0000

歌曲信息

Legenda - Kino

专辑：《Gruppa Krovi》（血型）
发行时间：1988年
作词：Viktor Tsoi（维克多·崔）
作曲：Viktor Tsoi（维克多·崔）

专辑《血型》（Gruppa Krovi）封面

歌词

在声带之间，
喉咙里哽着一声呐喊，
但那一刻终将到来，
无论你嘶吼与否。
只有在事后，
才会有人久久无法忘怀，
那些摇摇晃晃的战士，
如何用青草擦拭刀剑。

黑色的鸦群曾如何振翅，
天空曾如何大笑，
而后又缄默不语。
幸存者的手，
曾如何颤抖，
而一刹那，仿佛化作了永恒。

落日如葬礼的柴堆般燃烧，
星辰如饿狼从云后窥探。
逝入黑夜的人们，张开双臂躺卧，
而幸存者们，则疲惫地倒下沉睡，
没有梦境……

而“生命”——不过是一个词语，
世间唯有爱与死……
嘿！如果所有人都沉睡，
那谁来歌唱？
死亡，值得我们为之而活，
而爱，值得我们为之等待……

MV

福音（Yevangeliye）

Mon, 16 Jan 2023 00:00:00 +0000

歌曲信息

Yevangeliye - Yegor i Opizdenevshie

专辑：《Sto Let Odinochestva》（百年孤独）
发行时间：1993年
作词：Yegor Letov（叶戈尔·列托夫）
作曲：Yegor Letov（叶戈尔·列托夫）

专辑《百年孤独》（Sto Let Odinochestva）封面

歌词

警觉的窗户——
谁会温暖这警觉的窗户？
用无声的言语怜悯，
你那无神的基督。

贪婪的手指——
谁来喂饱这贪婪的手指？
用饥饿的双臂拥抱，
你那无救的基督。

逃亡的影子——
谁会抓住这逃亡的影子？
用结实的链条束缚，
你那无望的基督，

光滑的静脉——
惊慌又光滑的静脉，
用冰冷的唇亲吻，
你那镜中的基督，

环形的苍穹——
谁来惩罚这环形的苍穹？
用顺从的双手扼杀，
你那不从的基督。

MV

Hello World

Sun, 15 Jan 2023 00:00:00 +0000

印象·日出（法语：Impression, soleil levant）是法国画家克劳德·莫奈的著名画作，绘制的是故乡勒阿弗尔的景色。1872年莫奈回到故乡勒阿弗尔，绘制了六幅描绘勒阿弗尔港的作品，分别描绘不同时间段的勒阿弗尔港口景色，《印象·日出》为其中一幅。

路易·勒鲁瓦根据这幅画提出了“印象派”称呼。现在该画存放在巴黎的玛摩丹美术馆内。

塑料世界的玻璃球

从 Dune 到 Dune Rev：一次 Playnite 主题兼容性改造记录

起点：好看的主题，不完整的生态

把插件数据变成主题的一部分

最难处理的并不是“显示”，而是状态

Details View 与 Grid-Details View 不是同一种布局

为什么选择 Fluent Dim

从修改版到可以发布的 fork

总结

CK3 缺失的姓名本地化条目修补脚本

前言

脚本

代码

使用

记一次老电脑升级

平台配置

升级思路

CPU 升级：E5 1650 v2 ￥45

选购

测评

硬盘升级：固态硬盘 - Acer RE100 256GB - ￥115

选购

开箱

测评

方案

性能

其他

网卡升级：RTL8852BE - ￥28

选购与安装

驱动

其他升级：米家开机卡 - ￥15

总结

为 Hugo 博客扩展 Mermaid 图表支持

什么是 Mermaid？

功能特性

代码编辑

创建布局文件

配置选项

使用方法

基本语法示例

简单流程图

带标签的流程图

简单序列图

简单甘特图

高级用法

自定义样式

复杂的序列图

支持的图表类型

切换功能说明

故障排除

图表不显示？

图表显示异常？

更多资源

Mermaid 图表测试

流程图 (Flowchart)

序列图 (Sequence Diagram)

甘特图 (Gantt Chart)

状态图 (State Diagram)

类图 (Class Diagram)

饼图 (Pie Chart)

ER图 (Entity Relationship Diagram)

用户旅程图 (User Journey)

传奇（Legenda）

歌曲信息

专辑《血型》（Gruppa Krovi）封面

歌词

MV

福音（Yevangeliye）

歌曲信息

专辑《百年孤独》（Sto Let Odinochestva）封面

歌词

MV

Hello World