Live Editor：给写博客添个顺手的工具

写一篇项目介绍，正文还没写几段，窗口倒是开了不少：编辑器里放着 Markdown，文件管理器里找截图，浏览器里检查排版。准备补一张图，又要复制文件、填路径，再切回来确认效果。

这些操作都不难，但夹在写作中间，总有点打断思路。

Thus.Live 已经把博客的展示和发布流程安排好了。我想再补上写作这一侧：打开就能找到文章，图片放进去就能用，修改之后不用切换窗口也能看到排版。

Live Editor 就是为这件事做的。应用里的完整名称是 Thus.Live Editor，它连接本地的 Thus.Live 博客，把文章管理、Markdown 编辑与预览，以及首页和站点配置放进同一个桌面窗口。

从找到那篇文章开始 ​

截图来自实际运行的 Windows 应用，使用示例博客和演示文章。

打开项目之后，左边是博客信息、首页、全部文章和草稿等入口，中间找文章，右边看内容。

单击一篇文章，可以先读预览；确定要修改，再双击，或者点击“开始写作”。文章多了，可以通过关键词、日期和标签筛选，不用先到文件夹里挨个翻。

这个页面也方便回头翻旧文。比如只记得以前写过一个问题，却忘了标题，筛选后可以逐篇查看正文，不必把每个文件都打开。找到那一段之后，想引用还是补充，再决定要不要进入编辑。

仓库首页里还有其他页面的截图。

文章仍然放在原来的目录里 ​

Live Editor 使用的是已有的 Thus.Live 项目。启动后，选择博客的根目录，检查连接结果，就可以进入写作界面。

这里选的是放着 content、site.config.ts 等文件的项目目录。文章、首页和站点信息，仍然对应原来的文件：

原有文章不需要导入到另一套资料库，保存的结果就是项目文件。用其他编辑器打开、通过 Git 查看修改记录，或者把整个博客备份到别处，都沿用原来的方式。具体位置见文件与保存说明。

编辑和预览，按需要切换 ​

分栏模式下，Markdown 源文和渲染结果可以对照查看。

编辑器提供三种布局：写作、分栏和预览。

分栏模式支持同步滚动，修改长文中间的一段代码时，预览会跟到相应位置。编辑字号和分栏宽度也可以调整，笔记本屏幕上可以给正文多留一点空间。

标题、摘要、标签、草稿状态和更新日期可以在界面里编辑。需要看完整文件时，也可以切换到 Markdown 源码，把开头的元信息和正文一起检查。这些写作功能在首个版本的介绍里有整理。

预览不必一直开着。写初稿时可以只留正文，等内容连贯了，再切到预览检查标题层级、图片大小和段落长度。排版需要反复调整时，分栏才更方便。

预览要能看懂博客里的写法 ​

开发笔记里的 Markdown 往往不只有标题和列表。一段代码可能标了修改行，几个文件可能放在同一组里，中间还穿插一张流程图。编辑时能看到这些效果，才容易判断说明是否清楚。

代码高亮、行号、指定行高亮、diff 和代码分组都能预览。数学公式、Mermaid 图表、提示块、折叠内容和脚注等，也在支持范围内。

编辑器会读取博客项目的主题和正文样式，让本地预览尽量接近文章在网站上的样子。自己调整过字体或正文配色，也能在写作时看到相应效果。

不过，正式发布前还是要在博客里看一遍。自定义 Vue 组件、<<< 外部代码片段和 @include 等内容，目前需要到实际站点确认；内置预览也不会加载远程图片。如果文章使用的是网络图片地址，编辑器里的显示情况不能直接当作线上结果。

预览与兼容范围列出了目前的支持情况。使用这些扩展能力时，可以据此判断哪些内容需要留到站点构建后检查。

少走几步的图片插入 ​

项目介绍里经常要放好几张截图。文件名可能都叫“截图”，有的还留在剪贴板里，整理到文章目录之后才能引用。

Live Editor 支持选择、拖入和粘贴本地图片，导入时会把文件复制到文档附近的 assets/ 目录，再插入引用。遇到同名图片，可以选择保留两份，或者使用已有图片。

例如刚截完一张界面图，可以直接粘贴到编辑器中，完成导入后接着写图下的说明。同名处理也留在这一步确认，避免不小心引用了上一张截图。相关操作见版本说明。

文章之外，还有首页和站点信息 ​

写文章的时候，偶尔也会想更新一下首页。比如最近又在学什么，主站换了地址，或者原来的自我介绍看着已经有点过时。

“首页信息”直接编辑 content/index.md，支持正文和完整源码切换，并保留 layout: home 等元信息。它有自己的入口，和普通文章分开管理。

“博客信息”则把站点名称、作者、标题、简介、网址、头像、页脚和每页文章数等配置放到界面里，保存后写回 site.profile.json。项目说明中有对应介绍。

这两处修改频率通常不高，单独保留入口，需要时能找到就够了。日常编辑文章时，也不会把首页误当成一篇博文。

同一个文件被改了两次怎么办 ​

同一篇文章，有时会同时在几个地方打开。可能在 Live Editor 里写着，又切到代码编辑器改了几行，也可能刚从 Git 拉回一份更新。

这时候，直接拿旧内容保存，很容易把刚才的修改盖掉。

Live Editor 保存前会比对文件版本，检测到外部修改时会提示；未保存的内容也有提醒和恢复副本。文章可以另存副本，删除则交给系统回收站处理。

整理文章时，可以移动或重命名，并检查、更新能够识别的 Markdown 引用。不过，动态引用和已经发布的网页地址，还需要自己处理，尤其是旧链接的重定向。相关行为在数据与保存说明里写得更具体。

文件既然允许在其他工具里编辑，保存时就得考虑这种情况。发现版本不同，先停下来处理，比写完之后才发现内容被覆盖要省心得多。恢复副本之外，项目本身也值得保留一份日常备份。

保存之后，还要发布一次 ​

编辑器管理本地内容，网站更新仍然走博客项目的构建和部署流程。

在 Live Editor 里按下 Ctrl+S，macOS 对应 Cmd+S，完成的是本地文件保存。把文章设为非草稿之后，也仍然需要使用博客项目原来的流程构建和部署，访客才能看到新内容。

日常写作大致就是：

1. 打开博客项目，找到文章或新建草稿。
2. 编写正文，补好标题、摘要、标签和图片。
3. 检查预览，保存需要发布的内容。
4. 在博客项目里构建、检查，再部署网站。

最后一步继续使用 Thus.Live 原有的发布方式。如果博客已经接上自动部署，保存完成后，还需要提交并推送到对应的部署分支。编辑器本身不会因为点击保存就替你上传或发布。开始使用里也说明了这个流程。

下载与日常操作 ​

可以到 GitHub Releases 下载适合自己系统的版本，具体文件和使用说明以对应版本的发布页为准。项目提供 Windows、macOS 和 Linux 的分发形式。

第一次连接后，可以先选一篇熟悉的文章，核对正文和本地图片是否正常显示，再开始编辑。外观和项目兼容情况也能在设置里查看。

几个常用快捷键也比较熟悉：

应用支持浅色、深色和跟随系统，外观与写作设置可以在项目设置中调整。完整操作见快捷键说明。

Live Editor 不需要账户，也不提供云同步；文章、图片和配置保存在本地。应用启动时会检查 GitHub 上的稳定版本，也可以手动检查，但不会上传博客内容，或自动下载安装更新。这些行为在隐私说明里有交代。

从源码运行 ​

项目使用 Electron、Vue 3、TypeScript 和 CodeMirror 6。Electron 负责桌面应用和本地文件交互，Vue 负责界面，CodeMirror 提供 Markdown 编辑能力。

想自己调整界面或者继续扩展功能，可以准备 Node.js 24 和 pnpm 11，然后运行：

git clone https://github.com/uMisty/LiveEditor.git
cd LiveEditor
pnpm install
pnpm dev

首次启动可能需要下载 Electron。更完整的开发、测试和打包步骤，可以看开发与维护指南。

Live Editor 也有 Vibe Coding 参与，项目采用 0BSD 协议开源。使用中遇到问题，或想参与改进，可以到 GitHub 反馈。

让刚才那句话接得上 ​

我希望这个工具解决的，主要就是开头那些打断：插图前还记得要解释什么，放好图片回来，已经忘了下一句怎么接；想改个标签，注意力却被目录里别的文件带走。

能在一个窗口里完成这些操作，少找一次路径，少切一次页面，就多一点机会把刚才的想法写完整。这也是 Live Editor 最值得继续打磨的地方。