Obsidian首页实在忍不了了,花了两个小时,没想到能捣鼓到这么漂亮

0 阅读4分钟

上一篇讲了"为什么选 Obsidian"。这篇只聊一件事:怎么定制自己喜欢的首页。

01 为什么定制首页

大家都知道,Obsidian 的首页实在不敢恭维。

既然 Obsidian 定位成个人知识库,首页自然要定位成个人工作台。每天打开,里面展示的信息,一是要有美感,二是信息密度和布局,得是自己想要的。

今天下午实在忍不了了,花了两个小时,没想到能捣鼓到这么漂亮,信息展示也正符合我心意,于是成文一篇。

02 效果

先直接看效果。

图片图片图片图片图片图片图片

怎么样,还不错吧。

03 为什么要这么设计

首页既然是个人工作台,总得摆盆盆景吧,这样至少显得不寒碜。

我喜欢绿植,于是让 Codex 直接生成了张背景图,现在看确实挺好看,尤其炎炎夏日,显得格外清凉。

整个首页分成 操作台 和 洞察镜 两块。操作台管日常操作;洞察镜一半靠 Dataview 自动汇总数据,一半靠 AI 分析:跑一条刷新指令,把七维洞察写进 AI洞察/当日.md,首页再嵌进来。

对 操作台今日行动 自然成为重点,关注的是今天的 待办 。然后是 今日输入 和 今日输出。在我看来,这是典型的费曼学习法,也是知识库之所以叫知识库,而不是收藏夹的要义所在。

于是,很自然的,我把这三块,设计成了 待办 + 输入 + 输出 三块卡片。

对 洞察镜 ,具体要包含哪些内容,其实一开始也没想法,说来也巧,正好今天看到篇 OpenWiki 的文章,里面有提到 七维注意力分析,看后感觉有些道理,于是将这种思维,运用了过来。

七个维度分别是:

  • 总览你保存了什么,整体画面是什么样的
  • 潜意识偏好你可能没意识到,但你反复在关注的方向
  • 被遗忘的内容你存了但从没回看的东西,可能值得重新看看
  • 认知盲区基于你的阅读模式,推测你可能忽略了哪些领域
  • 热点趋势你最近关注的主题是在升温还是降温
  • 注意力热力图你的注意力在哪些领域最密集
  • 行动建议基于以上分析,给你具体的下一步建议

跑完第一版洞察后我看了下,有些角度确实是自己没意识到的,挺有意思。

04 具体是怎么做的

别问,问就是 AI 实现的。

全程主要工具是 Cursor,背景图用 Codex + GPT Image 2.0 生成。

总体实现框架

先说清楚这首页是用什么搭起来的,其实就三层东西:

  • 一个首页文件首页.md,整张页面的骨架,HTML 卡片 + 区块嵌入都写在这里。
  • 一份样式文件.obsidian/snippets/knowledge-home.css,所有颜值都靠它,配色、圆角、毛玻璃、洞察镜的淡绿底,全在这一个 CSS 片段里。
  • 一份洞察数据AI洞察/当日.md,七维分析的正文单独放这,首页只是把它一段段「引」过来,不重复写。

再配上三个插件:Homepage(开 Obsidian 自动打开首页)、Dataview(动态抓取最新素材、生成热力图)、Heatmap Calendar(画那张注意力日历)。

一句话:结构、样式、数据三者分开,首页只管展示,数据各回各家。

画成图,大概是这么个关系:

图片

看图就清楚了:首页只是个「展示台」,样式负责好看,数据负责内容,AI 负责扫描 vault 后写入洞察。

总体实现流程

整个过程不是一次到位,而是按这个顺序推进的:

  1. 先定信息架构想清楚首页到底要展示什么——上面是操作台(待办 / 输入 / 输出),下面是洞察镜(七维分析)。
  2. AI 写骨架把卡片、分区标题、洞察嵌入的 Markdown 骨架敲出来,先不管好不好看。
  3. 写样式让 AI 按「绿植工作台」的调性写 CSS,统一配色、卡片、间距。
  4. 接数据用 Dataview 把「笔记同步助手」最新几篇、各栏目资讯自动抓上来,热力图也接上。
  5. 反复微调截图 → 圈问题 → 改 → 再截图,配色、字号、边框、间距一点点抠。

前面四步搭出能用的版本,真正花时间的是第五步。

整个过程大概迭代了三个版本,才到现在这个样子。

实现过程

跟 AI 聊需求、定目标,是第一关:

图片

装插件、调样式、抠细节,能交给 AI 的就直接丢给它;UI 风格要说清楚,细节靠截图一轮轮改。

图片

05 写在最后

要是你也想给 Obsidian 换个顺眼的开门页,不妨动手试试,打造一个自己喜欢的首页。

看得舒心,又更加高效。