动态挂件

原本我只想到了使用 Custom Frame 的方法，但是占用侧边一条，多个挂件的话只能切换显示（虽然这样性能更好），但多少显得局限了。我就想如何让这个问题变得自由一点。

白板（Canvas）是 Obsidian 中可以自由布局的笔记形式，而且卡片内支持 Markdown。我们知道 Markdown 支持混入 HTML，那在白板卡片中框架其他页面（小挂件），是不是可行呢？答案是可以的。

到这里并不完美，因为白板中的卡片默认是有边距的，而我们会希望小组件充满整个卡片。是的，可以写一段 CSS Snippets，但这样是对所有白板笔记生效的，似乎副作用有点大。然后正好找到一款插件 Canvas CSS Class，作用就是给白板笔记加入一个类（class），也可以给特定的白板笔记加入你预设的类。这样在 CSS 中就可以针对性的定义了。

具体操作

安装 Canvas CSS Class并启用
打开打算放置挂件的白板笔记，Ctrl+P 输入 canvas，找到 Canvas CSS class:Add a CSS Class to the active canvas 命令
输入你自定义的类（class），并记住，比如我使用的是 start-widget
创建 CSS Snippets，位置在 .obsidian/snippets 中，名称随意，在其中放入后续代码
记得在 设置——外观——CSS 代码片段 中开启此片段
至此准备工作完成

CSS 代码（注意每一条开启的 .start-widget 是和上面自定义的类对应的）：

/* ---- 白板起始页样式 ---- */
.start-widget .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view {
 padding: 0;
 overflow: hidden;
}
.start-widget .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view::before,
.start-widget .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view::after {
 display: none;
}
.start-widget .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div {
 width: 100%;
 height: 100%;
}
.start-widget .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div。markdown-preview-pusher {
 display: none;
}
.start-widget .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > iframe {
 width: 100%;
 height: 100%;
}

添加挂件

新建一个卡片，在其中写入如下内容，注意是文本格式，而不是代码块。

<iframe src="https://wo.zji.me/Tools/TomatoTimer.html"></iframe>

然后点击空白位置即可。此挂件的使用说明请见：番茄计时器，后续我还会做一些挂件，大家可以在本站顶部导航切换到 Tools 进行查看。

如果添加其他挂件，只需要修改上述代码中的网址即可。

使用与调整

CSS 隐藏了一些元素，我没认真研究它们的作用，不过目前看没啥影响。点击卡片，使其进入被选中状态，这时候可以拖动边框调整大小，上面有删除、编辑等按钮，基本功能都在。

如果想和小部件中的网页进行交互，要先让此卡片进入选中状态才能操作。

缺点 2023-07-26 07:44:51

为什么这个方案后来我不太想推进了呢，记录一下想法，避免以后自己想不起来。

请求数

如果一个页面有好多小挂件，意味着大量网络请求，虽然相较于有着大量图片的页面来说，这个请求量也不算过分，但是我觉得作为一个笔记的起始页还是不那么美好。而且我能找到的托管服务器速度并不很快，大量请求会看到明显的缓慢加载。

冗余信息

如果将多个工具合并到一个页面，用参数进行区分，可以降低请求数，但如果用户只需要一个挂件呢？这就附带了很多无用的冗余信息。

本地化（最可能的方法）

这里说的是将页面放到电脑本地，这就涉及引用资源路径的问题。如果用 base64 解决，代码有点难以维护（或者写个生成器），大概只能使用 dataview 的视图方法才行。

静态服务器

另一种方法是在本地运行静态服务器，但总觉得有点小题大做，怪怪的。而且不同系统和环境下的效果及问题也可能不一致。

灵活性

Canvas 的好处是调整直观，但是对齐啥的并不太完美，比如像保持卡片间的距离一致就很麻烦。而小挂件因为可能存在顺序关系（比如影响层叠效果），也没法直观调节（只能改代码）。不能响应式，在手机上和电脑上不太好通用一套方案等。