本地预览与实时调试
在将文章或配置推送到远端之前，你可以在本地启动开发服务器，实时查看 Markdown 排版与样式效果。
准备工作
确保电脑上已具备两个本地目录：
- 主题代码仓库（例如本地路径为
D:\Code\Shirone）； - 个人内容仓库（例如本地路径为
D:\Code\my-blog-content）。
并在主题代码仓库目录下已经执行过依赖安装：
- Windows：
pnpm.cmd install - Linux / macOS：
pnpm install
方式一：快速单次同步预览 快捷
配置路径并执行内容同步
进入主题代码仓库根目录，依次执行：
Windows (PowerShell)# 1. 设置内容仓库的本地路径（请替换为你电脑上的真实绝对路径） $env:CONTENT_DIR = "<你的内容仓库绝对路径>" # 例如 "D:\Code\my-blog-content" # 2. 执行一次内容同步与配置合并 pnpm.cmd content:sync # 3. 启动本地开发服务器 pnpm.cmd devLinux / macOS (Bash / Zsh)# 1. 设置内容仓库的本地路径 export CONTENT_DIR="<你的内容仓库绝对路径>" # 例如 "/Users/yourname/Code/my-blog-content" # 2. 执行一次内容同步与配置合并 pnpm content:sync # 3. 启动本地开发服务器 pnpm dev设置内容路径并执行同步：
启动本地开发服务器
启动开发服务器并在终端查看输出：
在浏览器中查看效果
终端输出本地访问地址后：
Local http://localhost:4321/在浏览器中打开
http://localhost:4321/，即可看到由你的私有内容仓库驱动的博客页面：
方式二：双终端边写边看（实时增量监听） 推荐
如果你正在频繁撰写 Markdown 文章或调试 YAML 配置，反复手动执行同步命令较为繁琐。 你可以开启 实时增量监听模式：
启动本地预览服务（终端窗口 1）
$env:CONTENT_DIR = "<你的内容仓库绝对路径>" # 例如 "D:\Code\my-blog-content" pnpm.cmd dev启动实时增量监听（终端窗口 2）
$env:CONTENT_DIR = "<你的内容仓库绝对路径>" # 例如 "D:\Code\my-blog-content" pnpm.cmd content:watch
此时，只要你在外部编辑器（如 Obsidian、VS Code、Typora）中按 Ctrl + S 保存任何 Markdown 文件或修改 YAML 配置，监听器会自动捕获增量变更并同步至代码仓，触发浏览器的 局部热重载，体验与单仓开发完全一致。
简化环境变量配置
你可以直接在主题代码仓根目录下新建 .env 文件，写入内容仓库路径，这样无需每次在终端手动设置环境变量：
CONTENT_DIR="<你的内容仓库绝对路径>" # 例如 "D:/Code/my-blog-content"常见疑问排查
如何退出本地开发？
报错提示找不到路径
修改了外部图片但浏览器未更新
下一步
- 前往 CLI 命令行工具链：掌握预检、状态检查、反向导出与安全重置命令体系