在 Heptabase 中编写笔记,自动同步到个人的数字花园中。
-
展示 Heptabase 的笔记内容
-
Heptabase 编辑笔记可一键更新到网站
-
双向链接
-
深浅色模式
-
面包片导航交互(参考了 Andyʼs working notes)
-
文字高亮
-
嵌入网易云音乐歌曲、专辑
-
嵌入视频
-
在 Heptabase 中创建一个白板,这个白板中的所有卡片都可以在数字花园中查看
-
公开此白板
-
根据你的喜好在上述白板中创建一些卡片,例如 About 介绍自己、Projects 介绍自己参与的项目等等
-
Fork 项目
-
在项目文件夹下运行
npm install
-
在
config.js
中设置你的api_url
(下面会介绍) -
设置
pages
,分别设置页面名称和页面 ID页面名称将显示在网站导航栏中,点击将打开页面 ID 对应的卡片
-
将项目部署到 Vercel
因为 Heptabase 还没有开放的 API,所以只能通过后端程序来避免前端直接请求数据带来的跨域问题。
-
Fork 后端项目
-
部署到 Vercel 上
-
获取前面创建的公开白板 ID
-
将白板 ID 填入
index.py
中的HEPTABASE_WHITEBOARD_ID
-
将 API URL 填入前端
config.js
中的api_url
尝试过 HUGO 和 Notion 等方式、研究了 obsidian publish,也实践用 Notion 维护了一年的博客,但一直没有找到比较理想的方案。
一方面,笔记在 Heptabase 中,文章放到其他平台会导致双向链接失效。我在实践卡片笔记法,文章与笔记有高度的关联性,例如下面这篇文章中就存在多个卡片链接,但是这些链接在 Heptabase 以外的地方显示时就无法正常打卡笔记,所以不得不转为普通文本,这不但增加了工作量,也使得原本文章的脉络失效。
另一方面,笔记、文章数据在不同平台有多份副本,后续修改起来就要穿梭在不同平台中进行更新,维护成本高。
Heptabase 本身也支持公开笔记,但移动端的支持不太好,于是决定自己开发了一个。
数字花园的理念与我正在使用的卡片笔记法、Heptabase 的设计哲学更加贴近,所以放弃了持续 1 年的博客,改用数字花园的方式维护自己的个人站点,下面会详细介绍一下原因。
聊一下我对数字花园理解,以及如何将这些理解体现到网站的设计上。
数字花园的内容是持续迭代的,我可以发布尚不成熟的想法(不一定要等到输出完整的文章)并且可以在发布后持续的修订。所以在笔记列表中,不是强调笔记的创建时间而是展示最近编辑时间,并将最近编辑的笔记展示在最前,方便阅读者理解笔记的活跃状态。
这和我运用的卡片笔记法理念一致,通过不断的积累、迭代卡片完成文章的输出,而不是一来就面对一张白纸一步到位完成创作。
传统博客通常会按创建时间展示文章列表供用户阅读,通过标签筛选某个类型的文章。而数字花园则强调思考的脉络,具体体现在以下几点
-
弱化文章列表,用一个介绍页/索引页作为阅读者漫游的起点
-
支持双向链接,阅读者可以看到与当前文章关联的其他知识、想法
-
支持开头提到的面包片导航的交互方式,阅读者可以快速地在不同笔记间流转
数字花园的首页与双向链接:
总的来说,使用持续迭代的、重在体现思考脉络的方式记录想法,最终也用同样的方式分享知识,这是我选择数字花园并开发此网站的原因。