这个网站是如何工作的：一份超媒体宣言
我们不分享文章，我们分享超媒介。这篇故事本身就是证明——每一个论点，都用能亲手触摸的媒介讲给你听。
- #超媒体
- #网站
- #宣言
你现在读到的不是一篇文章。它是一个超媒介——文字只是它的最低档位。
让我从一个简单的观察开始：信息媒介是有档位的。
第一档：文字
文字是最古老、也最抽象的媒介。我写下「远处有一座山，山后是落日」，你只能靠想象去补全画面。每个读者脑中的山都不一样——这既是文字的浪漫，也是它的局限。
第二档：图像
图像让你看见。不必再想象——拖动下面的分割线，亲眼看看两种媒介档位的差距：
第三档：声音与视频
声音有温度。视频有时间。它们让信息从静止变为流动：
第四档：可交互的软件
这是这个网站存在的理由。比视频更高一级的媒介，是你可以亲手操作的软件。
不信？下面这个知识网络，左边的滑块在你手里：
拖动滑块试试 →
滑到 200 张卡片，看连接密度如何爆炸式增长——这个体验，一千字的文字描述和十分钟的视频都给不了你。理解从操作中来。
再往前一步：把一个完整的小软件直接放进故事里。点击启动，然后在画布上点几下：
知识花园 · knowledge-garden
这就是我想做的事：当我想向你展示我做的工具，你不需要下载安装——演示就长在文章里。
用滚动讲故事
还有一种交互你每天都在做，却很少被认真利用：滚动。往下滚，看一个知识网络如何生长：
01 / 03
一切从一张卡片开始
每个想法都是一个节点。它们彼此孤立，安静地漂浮在你的笔记库里。
02 / 03
链接让知识生长
当你开始建立链接，节点之间涌现出结构。1+1 开始大于 2。
03 / 03
最终形成你的第二大脑
密集链接的知识网络，会在你需要的时候把答案递到手边。这也是这个网站的隐喻：每篇故事、每个项目，都是网络中的一个节点。
这个网站本身
说了这么多理念，来看看承载它们的容器长什么样：
- 10
- 媒介组件
- 4
- 媒介档位
- 0
- 页面加载时的视频字节
- 100%
- 无 JS 时内容可读性
它的演化路线也是一个故事：
- 📝
2026 · 春
Hugo 博客
一个安静的静态博客，只有文字档位。
- 🧬
2026 · 夏
超媒体容器（现在）
Astro + Svelte 岛屿 + GSAP：文章、软件演示、交互叙事在同一个容器里。
- 🚀
下一步
成为产品
账户、收藏、阅读进度、跨设备记忆 —— 网站开始认识回来的你。
对技术好奇的话，这个页面的写法大概是这样——组件像单词一样嵌进 Markdown：
how-this-site-works.mdx（节选）
import { ParamSlider } from '@/components/media';
滑到 200 张卡片，看连接密度如何爆炸式增长：
<ParamSlider
client:visible
label="卡片数量"
min={10} max={200} initial={60}
viz="network"
/>所以，这里分享什么
我做软件，也旅行、读书、录音、拍照。以前这些东西被迫散落在不同平台：文章发博客，视频传 YouTube，代码放 GitHub，各自孤立。
现在它们住进同一个容器：
- 能用文字讲清楚的，就安安静静用文字（比如我的 PKM 实践）
- 需要看见的，给你图像和视频
- 值得亲手体验的，直接给你软件
欢迎来到我的超媒体主页。去 作品馆 看看我做的软件，或者去 组件试验场 把每个媒介组件玩个遍。
这个网站会像软件一样持续加功能——因为它就是一个软件。