升级Obsidian首页：构建AI驱动智能仪表盘赋能知识工作流

Q: 需要让Claude Code一直在后台运行吗？

只有想从仪表盘触发AI任务时才需要。claude-code serve 命令在8080端口运行轻量级HTTP服务器，监听仪表盘请求。不使用时可以停止以释放资源。仪表盘本身在没有服务的情况下正常工作——只是在服务运行前无法使用一键AI执行功能。

对于长期Obsidian用户来说，大多数自定义首页仪表盘依赖基础Markdown配合DataviewJS插件。这些简单布局能显示最近笔记、每日任务清单、阅读热力图和文件目录，但缺乏与现代AI编码工具（如Claude Code、Codex、自定义Skills、RSS数据源和GitHub开源同步）的兼容性。本教程分享完整实操工作流，将你的Obsidian首页重建为自动化AI中心，连接你的知识库与所有主流LLM编码代理。

传统Dataview首页方案的局限性

经典DataviewJS首页只关注本地仓库数据查询和静态页面渲染，在当前AI工作场景中有明显不足：

无法在仓库内触发一键AI脚本执行
没有原生集成通道调用Claude Code / Codex编码代理
无法加载外部动态数据，如GitHub更新和RSS新闻
无法基于收件箱原始材料通过LLM自动生成结构化笔记
缺少一键仓库健康检查和知识整理自动化

升级后的AI仪表盘解决了所有这些痛点，同时保留你原有的笔记查询模块。

步骤1：搭建Obsidian自定义插件开发环境

构建轻量级自定义仪表盘插件，支持AI代理对接，独立运行不与现有社区插件冲突：

# 创建项目目录
mkdir obsidian-ai-dashboard
cd obsidian-ai-dashboard
# 初始化npm环境
npm init -y
# 安装官方Obsidian API依赖
npm install @obsidianmd/obsidian-api typescript
# 添加构建脚本依赖
npm install --save-dev esbuild

创建核心入口文件 main.ts：

import { Plugin } from "obsidian";

export default class AIDashboardPlugin extends Plugin {
  async onload() {
    // 注册首页仪表盘视图
    this.registerView("ai-dashboard-view", (leaf) => {
      return new AIDashboardView(leaf, this);
    });
    // 添加侧边栏按钮打开仪表盘
    this.addRibbonIcon("dashboard", "打开AI仪表盘", () => {
      this.activateView();
    });
  }

  async activateView() {
    const { workspace } = this.app;
    let leaf = workspace.getLeaf(false);
    await leaf.setViewState({ type: "ai-dashboard-view", active: true });
  }
}

在 package.json 中添加构建配置：

"scripts": {
  "dev": "esbuild main.ts --outfile=main.js --target=es2020 --watch",
  "build": "esbuild main.ts --outfile=main.js --target=es2020 --minify"
}

运行编译命令，将生成的文件复制到仓库的 .obsidian/plugins/obsidian-ai-dashboard/ 文件夹，然后在Obsidian设置中启用插件。

步骤2：用Frontend-Design Skill构建集成前端面板

无需笨重的UI框架，调用Claude Code官方的 frontend-design Skill生成轻量级仪表盘HTML组件。发送此提示：

创建一个Obsidian仪表盘UI，包含4个核心区域：
1. 原始Dataview模块：最近文件、待处理任务、月度笔记热力图
2. AI代理操作区：深度研究、代码生成、仓库整理的按钮
3. 外部数据面板：RSS源列表、GitHub仓库更新日志
4. 收件箱处理模块：通过LLM自动摘要原始markdown
使用纯HTML+内联CSS，兼容Obsidian内部视图。

步骤3：实现一键AI代理调用功能

在仪表盘按钮上添加点击触发器，通过本地API将任务发送给Claude Code或Codex：

// 触发深度研究任务
document.getElementById("btn-deep-research").addEventListener("click", async () => {
  const vaultPath = this.app.vault.getRoot().path;
  const prompt = `对 ${vaultPath}/Inbox 下所有未处理的收件箱文件进行深度研究，整理结构化知识笔记并保存到 /Research 文件夹`;

  const res = await fetch("http://127.0.0.1:8080/claude-code/run", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({ task: prompt })
  });
  const result = await res.json();
  new Notice(`深度研究完成：已生成 ${result.fileCount} 条笔记`);
});

先启动本地Claude Code后台服务：

claude-code serve --port 8080

步骤4：嵌入动态外部数据模块

RSS实时订阅

在仪表盘Markdown容器中添加DataviewJS代码块拉取订阅新闻：

const RSS = require("rss-parser");
const parser = new RSS();
const feedUrl = "https://example-tech-blog.com/feed.xml";
const feed = await parser.parseURL(feedUrl);
let list = "";
feed.items.slice(0,10).forEach(item => {
  list += `- [${item.title}](${item.link}) | ${item.pubDate}\n`
})
dv.header(3, "最新科技RSS");
dv.markdown(list);

GitHub仓库同步日志

调用GitHub开放API在首页显示代码仓库提交更新：

# 终端测试请求GitHub最新提交
curl https://api.github.com/repos/your-name/your-project/commits?per_page=5

将请求包装在仪表盘插件中，每小时自动刷新提交日志。

步骤5：自动仓库维护与知识整理

添加仓库检查按钮，通过Codex执行批量整理脚本：

扫描整个Obsidian仓库：
1. 标记没有内部链接的孤立文件
2. 通过LLM按内容主题为未标记笔记打标签
3. 合并重复概念笔记
4. 生成仓库结构概览报告并保存为 Vault-Overview.md

最终优化建议

保留原始Dataview查询代码，避免丢弃现有笔记统计
限制并发AI任务数量，防止本地端口服务过载
在插件设置中添加开关，不需要时关闭RSS/GitHub数据模块
通过Obsidian快捷键设置面板为核心仪表盘功能绑定热键

常见问题

这个插件会与我现有的Obsidian插件冲突吗？

不会。AI仪表盘插件是独立的自定义插件，独立运行。它不会修改或干扰Dataview、Templater或任何其他社区插件。你可以保留所有现有插件，只需将此插件添加为新的仪表盘层。

需要让Claude Code一直在后台运行吗？

只有想从仪表盘触发AI任务时才需要。claude-code serve 命令在8080端口运行轻量级HTTP服务器，监听仪表盘请求。不使用时可以停止以释放资源。仪表盘本身在没有服务的情况下正常工作——只是在服务运行前无法使用一键AI执行功能。

能自定义哪个AI代理处理哪个任务吗？

可以。步骤3中的按钮处理器完全可定制。你可以将不同任务路由到不同代理——例如将代码生成发给Codex，深度研究发给Claude Code，仓库整理发给本地LLM。只需修改每个按钮的fetch URL和负载即可。

上一篇： Codex超能力：将AI编码从随机输出升级为工程级别 ←