下面这份是基于前面已查信息，结合你「前端 + 技术写作 + 已有 Markdown 博客」这个身份，给你的**系统性方案**。我会尽量站在你已经会写 Markdown、会 Git、懂前端的前提上说，不从零讲 Obsidian，而是讲「怎么把它变成你的写作 IDE」。 --- ## 一、先定整体思路：用 Obsidian 做「写作单一事实源」 你的现状和目标可以抽象为三件事： 1. **统一内容源**：所有技术文章、公众号稿、零碎想法，统统进 Obsidian（本地 Markdown 仓库）。 2. **保留兼容性**：仍然可以无缝输出到现有 GitHub Pages 博客（frontmatter 不要破坏）。 3. **拥抱新范式**：利用 Obsidian 的双向链接、图谱、插件和 AI，把单篇文章写作升级为「持续演化的知识系统」。 可以理解为： - 写作环境：**Obsidian Vault + 一组插件** - 存储格式：**纯 Markdown + YAML frontmatter**（和你现在用的一样） - 发布出口： - GitHub Pages（你已有博客） - 公众号 / 其它平台（通过 HTML/Markdown 导出） 后面所有建议都围绕这个思路展开。 --- ## 二、迁移策略：如何把现有博客搬进 Obsidian，又不破坏 frontmatter 你原来的文件已经是 Markdown + frontmatter，这是最省心的格式：Obsidian 原生支持 YAML frontmatter，并且 1.4 之后有**属性面板**，可以直接在 UI 里修改 metadata，而不会破坏 YAML 语法[3][4]。 ### 1. 迁移步骤建议 1. **创建新的 Vault** 建一个专门的写作仓库，比如：`BlogVault/` - 结构可以先简单一点： ```text BlogVault/ 00-Inbox/ # 临时记录 / 灵感 10-Drafts/ # 草稿 20-Articles/ # 已完成文章（技术文等） 30-Notes/ # 学习笔记、踩坑记录 assets/ # 图片等资源 ``` 2. **把旧博客文章直接复制到 `20-Articles/`** Obsidian 对普通 `.md` 文件是「开箱即用」的[1][7]，你只要： - 用系统文件管理器把原来博客 repo 里的 `posts`（或类似目录）复制进 `20-Articles/` - 注意图片：如果你原来用的是相对路径图片，把图片也复制到 `assets/` 下，对应路径修一下 3. **保持原 frontmatter 不动** 你给的例子： ```yaml --- title: vite + vue3 + ts 使用总结 date: 2021-11-29 19:34:48 permalink: /pages/33f292/ categories: - 文章 - 前端 tags: - vue --- ``` - 这是 Hugo / Jekyll 等常见的格式，Obsidian 会把这些识别为**属性**，但不会影响你继续用 SSG 构建博客[2][3]。 - 将来你可以考虑加上一些**Obsidian 专用字段**（比如 `status`, `series`），对 SSG 没影响，但方便在 Vault 里筛选。 4. **可选：通过脚本统一 frontmatter** 如果你文章很多，格式不统一，可以用一个简单 Node/Python 脚本批量补充字段（如 `status: published` / `draft` 等），方便后续 Dataview 查询。 --- ## 三、写作流程设计：从「记想法」到「发文章」 你现在主要是写技术文章，习惯 Markdown，目标是 Obsidian 里同时服务： - 技术博客（GitHub Pages） - 公众号文章 - 长期的技术积累 我建议你把写作拆成四个阶段，每个阶段在 Obsidian 里都用**固定入口 + 模板**来操作： ### 阶段 0：快速捕捉（Idea / 灵感） - 目标：先把想法记下来，不必管结构，类似「Issue 草稿」。 - 做法： - 新建一个 `快捷模板`（用核心插件 Templates 或社区插件 **Templater**）： ```markdown --- type: idea created: {{date:YYYY-MM-DD HH:mm}} related-tech: - status: inbox --- # {{title}} ## 想法 - 简述：…… - 适合写成：博客 / 公众号 / 两者皆可 - 目标读者：入门 / 中级 / 高级前端 ## 相关资料 - 链接1： - 链接2： ``` - 配快捷键：比如通过 QuickAdd / Templater 绑定 `Ctrl+Alt+N`，随时新建。 这个阶段纯粹为了「**不丢点子**」，不要求优雅。 ### 阶段 1：结构化大纲（Outline） 当你决定「这篇要写成文章」时： 1. 基于一个「文章模板」（用 Templater）新建： ```markdown --- title: {{title}} date: {{date:YYYY-MM-DD HH:mm:ss}} permalink: /pages/{{date:YYYYMMDDHHmmss}}/ categories: - 文章 - 前端 tags: - status: draft source: obsidian --- ## 1. 写这篇文章的背景 / 动机 - 我在项目中遇到的问题： - 当前社区常见做法的痛点： ## 2. 目标读者 & 前置知识 - 读者水平：如「有 Vue3 基础的前端」 - 需要先懂的概念： ## 3. 大纲（先列标题） 1. 2. 3. ## 4. 参考资料链接 - ``` 2. 这一步你可以充分利用： - **AI**：让 AI 帮你丰富大纲（下文专门讲 AI）。 - **双向链接**：把会用到的旧文章 / 笔记 `[^链接]` 上，后面写时只要点进去看。 ### 阶段 2：正式写作（Drafting） 这里可以把 Obsidian 当「写作 IDE」来用，建议： 1. **开启以下核心特性**： - 实时预览（默认模式） - 折叠标题/列表（对长文非常重要） - 代码块语法高亮：用 ```js / ```ts / ```vue 等 2. 代码片段写法建议： ```markdown ```ts interface User { id: number name: string } ``` ```vue ``` ``` 这些语法 Obsidian 渲染效果和大部分博客框架兼容[9]。 3. 长文结构管理： - 利用目录视图（Outline / 文档标题面板）。 - 使用「折叠标题」插件或 Obsidian 自带折叠功能，在写某节时把别的部分折叠掉，专注眼前这一层级。 ### 阶段 3：定稿 & 发布 在 Obsidian 中标记文章状态： - `status: draft` → `reviewing` → `ready` → `published` 你可以用 **Dataview** 写一个简单的「文章管理面板」： ```markdown ```dataview table date, status, tags from "20-Articles" where contains(categories, "前端") sort date desc ``` ``` 发布到各渠道： 1. **GitHub Pages / 静态博客** - 如果你继续沿用当前博客体系，只需要： - 保持 frontmatter 字段不变； - 用 Git（手动或 **Obsidian Git** 插件）把 `20-Articles/` 里确认好的文稿同步到博客 repo 对应目录； - 由原来的构建脚本 / GitHub Actions 继续发布[8][9][10]。 - 若以后想直接用 Obsidian → GitHub Pages，有现成模板如 `obsidian-publish-mkdocs`[3]、`obsidian-static-site-export`[5] 可以对接。 2. **公众号 / 其他富文本平台** - 安装 **Copy as HTML** / **Copy document as HTML** 之类插件[1][9]； - 选中全文 → 「Copy as HTML」 → 在公众号后台粘贴，一般能基本保持标题/列表/代码块样式； - 如需要特别的代码着色，可以用自己现有的公众号排版方案叠加。 --- ## 四、插件推荐：按「新手 → 熟练」分层 ### 第一层：新手也值得马上装的（强烈建议） 这些可以说是「写作向必备」。 | 插件名 | 用途 | 你这类用户的价值 | |--------|------|------------------| | **Templater** | 高级模板引擎，支持变量 / JS 脚本 | 一键新建带 frontmatter 的文章、笔记模板，比默认 Templates 强很多[3][8] | | **Dataview** | 用查询语法在文档中生成列表/表格 | 做「文章索引」、「草稿看板」、「按标签列出 Vue 相关文章」等[5] | | **Obsidian Linter** | 自动规范 Markdown 格式 | 统一列表、空行、标题格式，保证导出到博客时干净[10] | | **Obsidian Git** | 把 Vault 当 Git 仓库 | 把写作历史 & 笔记直接备份到 GitHub，同时可以触发博客发布[4][7] | | **Calendar + Periodic Notes** | 日记/周记管理 | 用来做「周报 / 月度复盘」，对长期写作很有帮助[4][5] | ### 第二层：写作变多后非常好用 | 插件名 | 用途 | 推荐原因 | |--------|------|----------| | **QuickAdd** | 快速新建各种类型的笔记 | 为「新文章草稿」、「新 idea」、「读书笔记」等分别设入口，避免手点菜单[5] | | **Advanced Tables** | 增强表格编辑体验 | 技术文经常需要对比表，Plain Markdown 表写起来很痛，这个会自动对齐、补管道[10] | | **Tasks / Todo 插件** | 任务管理 | 把「补图」「写 demo」这类任务直接写在文章里，再统一汇总 | | **Image/Attachment 管理插件** | 管理 / 压缩图片 | 按路径自动归类图片，博客图片也更好管[4] | ### 第三层：针对开发者/技术写作者的增强 | 插件名 | 用途 | 说明 | |--------|------|------| | **Code Runner / Execute Code**[8][9] | 在笔记里直接运行代码块 | 快速验证算法 / demo 片段，特别是文章里的小代码示例。建议只运行轻量级代码。 | | **Collapsible Code Blocks**[9] | 让长代码块可折叠 | 写文章时方便折叠掉某些长代码片，聚焦讲解部分。 | | **Webpage HTML Export / Webpage HTML Export Optimized**[3][7] | 整库导出 HTML 网站 | 如果你未来想把整个 Vault 公开成「数字花园」，这些插件可以当静态站生成器用。 | 你完全没必要一上来装几十个插件。按照写作频率，先把「Templater + Dataview + Linter + Git + Copy as HTML」这 5 件打牢，已经够你用一阵子。 --- ## 五、如何结合 AI：从「写代码的 AI」到「写文章的 AI」 你这类前端开发者，对 AI 已经不陌生了（比如用来写/看代码），重点在于**怎么让 AI 服务于你的写作，而不是接管你的写作**。 ### 1. AI 在写作流程里的 4 个角色 1. **选题 & 角度辅助** - 对话示例： > 「我想写一篇关于 vite + vue3 + ts 项目实践的文章，读者是有 Vue2 经验的前端，请帮我想 5 个有区分度的切入角度，并按难度排序。」 2. **大纲生成 / 精炼** - 你先写出粗糙大纲，用 AI 要求： > 「请在不改变技术内容的前提下，把这份大纲重组得更有层次，保证每章逻辑递进清晰，并列出每部分的关键问题。」 3. **局部润色 & 解释补全** - 对一小节内容： > 「请串联这几段话，让逻辑更顺畅，但不要替换掉我原来的术语。保留中文技术词，适度增加过渡句。」 4. **生成多版本输出**（例如同一技术文 → 公众号 / 知乎 / 英文博客） ### 2. 在 Obsidian 里用 AI 的几种方式 #### （1）内嵌 AI 插件（如 Obsidian Copilot、LLM Workspace 等）[6][7] - 典型能力： - 在侧边栏开一个 Chat 窗口，选中当前文档内容作为上下文； - 或者对选中的一段直接右键「让 AI 总结 / 改写」； - 有的插件支持**接 OpenAI / 本地 LLM / 第三方 API**[2][6][7]。 - 优点： - 所有对话都在 Obsidian 里，不用来回切窗口； - 一些插件可以把对话记录也作为 Markdown 保存回 Vault，形成「写作对话历史」。 - 注意： - 在设置里确认**只上传当前文档或选中内容**，避免整库被扫走； - 敏感内容优先用本地 LLM 或自己部署的 API。 #### （2）本地 LLM 集成（Ollama / LM Studio + 对应插件）[2][6][7] 如果你担心隐私 / 费用： 1. 在本地跑一个模型（Ollama / LM Studio 等）； 2. 用例如 **AI LLM**、**LLM Workspace** 或「Local GPT」一类插件，把 Obsidian 指向本地 HTTP 接口； 3. 这样： - 上下文是本地 Vault 文本； - 模型也是本地； - 整个「Second Brain」实现真正的本地化[2][6][7]。 适合的任务：总结你自己的旧文章、帮你在已有笔记上做回顾、问「我以前写过关于虚拟滚动的哪些内容？」等。 #### （3）「编辑器外」的 AI 工具仍然有价值 比如你已经习惯用某个在线大模型（ChatGPT、Claude 等）： - 可以在 AI 里生成一个初版大纲 / 代码讲解； - 最终落地还是要贴回 Obsidian 文档里，以 Vault 为「单一事实源」。 --- ## 六、从「文章仓库」进化到「前端知识库」 Obsidian 相比你原来直接写 Markdown 最大的价值，不只是在「写文章」，而是在于： 1. **双向链接 + graph view**：把散碎文章串成网。 2. **frontmatter / 属性 + Dataview**：让内容可以被「查询」，而不只是「翻搜索」。 针对你这个方向，可以慢慢做几步升级： ### 1. 标签和分类体系升级 你原来有： ```yaml categories: - 文章 - 前端 tags: - vue ``` 建议在 Obsidian 内部再加一些只在 Vault 内使用的标签/属性，比如： ```yaml topic: - 构建工具 - 性能优化 stack: - vue3 - vite level: 中级 status: published ``` 博客框架一般会忽略不认得的字段[2][3]，但在 Vault 里，你就可以通过 Dataview 做： ```markdown ```dataview table date, topic, stack, level from "20-Articles" where contains(stack, "vue3") and level = "中级" sort date desc ``` ``` 这就和「技术导航页」一样。 ### 2. 利用双向链接搭建「系列 / 专栏」 比如你写一系列 vite + vue3 的文章，可以： - 每篇文章 frontmatter 里加 `series: vite-vue3`； - 建一个「系列页」： ```markdown # vite + vue3 系列文章索引 ```dataview table date, status, tags from "20-Articles" where series = "vite-vue3" sort date asc ``` ``` - 在每篇文章开头加一句： `属于 [^vite + vue3 系列文章索引]，建议按顺序阅读。` 这样你在 Vault 里就有一个「真正的专栏」，以后搬到博客 / 公众号也更好组织。 --- ## 七、你可以立刻实践的一套「最小可行配置」 怕信息太多不好落地，我帮你收敛成一套可以本周就完成的 MVP： ### 步骤 1：新建 Vault + 迁移部分文章 - 建 `BlogVault/`； - 建 4 个主目录：`00-Inbox/`、`10-Drafts/`、`20-Articles/`、`30-Notes/`； - 从旧博客里先挑 5~10 篇代表性文章，复制到 `20-Articles/`，确保图片路径正确。 ### 步骤 2：安装 6 个高价值插件 1. Templater 2. Dataview 3. Linter 4. Obsidian Git 5. Copy as HTML 6. QuickAdd（用于一键创建草稿/idea） 先别动其它插件，避免「插件地狱」。 ### 步骤 3：配置两个模板 1. **Idea 模板**（存到 `templates/idea.md`） 2. **文章模板**（存到 `templates/article.md`，带好 frontmatter） 用 QuickAdd / Templater 给它们绑定两个快捷键。 ### 步骤 4：实现「从 Obsidian 到博客」的最小链路 - 用 Obsidian Git 把 Vault 也变成一个 Git 仓库； - 简单做法： - Vault 作为写作仓库； - 你写完一篇文章后，**手动复制**该 `.md` 文件到原博客 repo 对应目录； - push 原博客 repo 到 GitHub，继续沿用你现有的构建逻辑。 - 之后再考虑用「脚本 + GitHub Actions」或者 `obsidian-publish-mkdocs` 这种模版做自动化[3][5][8][9]。 ### 步骤 5：选一篇你新近想写的文章，全流程走一遍 1. 用 Idea 模板记录这个选题； 2. 转成 Article 模板，写大纲； 3. 找一两个现有旧文 `[^链接]` 过来当参考； 4. 至少用一次 AI： - 帮你补全大纲，或重排某一节逻辑； 5. 写完后： - Linter 格式化； - Copy as HTML 试着贴到公众号后台，看看效果； - 手动复制到博客 repo，发布一次。 经历一遍之后，你就会感受到：Obsidian 和你之前「纯 VSCode + Markdown」写作的差异点在哪里，下一步要重点优化哪环（比如是模板、是标签体系，还是 AI 协同）。 --- 如果你愿意，可以把你当前博客仓库的大致结构（目录名）贴一遍，我可以帮你设计一个「一键同步到 Obsidian Vault」的文件结构和简单脚本，让迁移这一步更顺滑。 也可以告诉我你常写的主题（比如「构建工具 / Vue 生态 / 工程化 / 性能优化」各占比例），我可以按这些主题帮你定制一套 frontmatter 字段和标签规范。 --- References [1] Import Markdown files. [2] Obsidian properties in YAML frontmatter (v1.4). [3] Plugins - Obsidian（frontmatter / export / AI 等插件列表）. [4] Essential Obsidian Plugins - My Recommended Setup. [5] My Essential Obsidian Plugins. [6] Obsidian + AI 最佳实践：打造安全、高效的本地化智能笔记系统(2026版). [7] Obsidian Plugins（AI / LLM 集成相关插件索引）. [8] jobindjohn/obsidian-publish-mkdocs. [9] Webpage HTML Export Plugin / Webpage html export optimized. [10] A Roundup of the Best Obsidian Plugin in 2024.