how to build this garden

首先，开一个 git repo 并 clone 下来，新建 src 目录（用于堆杂物）和 .gitignore （用于忽略 src 目录）：

src/
.gitignore

.gitignore 内容如下：

src/

接下来导出要做成静态站点的 trilium 文档树，选择 this note and all of its descendants → HTML in ZIP archive，把 zip 文件保存到 src 目录下，解压。

然后，把里面的东西都掏出来，复制到外面一层目录里，此时这个目录内容大致如下：

src/
Garden/
index.html
navigation.html
Garden.html
style.css
.gitignore
...

到这里，已经可以直接部署到静态站点托管服务了。我用的是 vercel，netlify 也是比较常见的选择。把代码都 push 到 git repo：

git add .
git commit -m "first commit blah blah"
git push

登入 vercel，选择从 github 或 gitlab 导入项目。……然后就完成了。vercel 会在每次 push 后自动部署。

打开部署完成的地址，会看到一个奇丑无比的页面，左边是导航树，右边是内容。虽然目前还很丑陋，页面之间的联系都已经有了。接下来的任务就是把它弄得体面点。

trilium 默认导出用了 frameset 和 frame，这是一套古董级的 html 元素，可能存在适配问题；再加上默认导出的链接 target 为 self，也就是外部链接会在原来的 frame 里打开，很多浏览器都会拦截这个行为。总之：别用默认的 frame！

有两种方法绕开原来的首页布局：

我选择了方案一，因为我并不想显示整棵导航树。更多的相关思考详见 handcrafted links 这个页面。

那么我的做法就是把 Garden.html 这个入口文件直接改名为 index.html，就完工了。

测试中发现，移动端缩放还存在问题，页面特别小。需要添加这一行 meta：

<meta name="viewport" content="width=device-width, initial-scale=1">

这是为了自动调整 viewport 比例。

由于我们无法改变 trilium 的导出逻辑，所以解决方法是用 python 脚本自动给目录里所有的 html 文件添加 meta。具体见 git repo 里的 prune.py 脚本。

如果不想导出整棵树，也可以导出单个 html 文件并保存到指定位置，但是需要手动链接 css。参考同级页面的 link 写法即可。

页面中的图片等媒体也需要重新链接。

需要手动添加 <h1> 标题。

以上 3-6 步还可以写成批处理脚本，进一步自动化。

暂时不支持搜索中文。

moved to roadmap