在 TiddlyWiki 添加外部媒体内容。内容可以是图片、音视频、PDF 等等，但由于 TW 的单 HTML 特性，视频 / PDF 等体积较大的内容并不适合直接加载进 TW。仅推荐导入图片。

导入图片

使用图片有两种方式：

• 将图片导入进来，这会使得 TW 的单页 HTML 体积明显增大（因为包含了图片的 Data URI）
• 使用 外部图片 的机制，在打开图片所在 tiddler 时再做加载

我目前的实践是：

• 本地的 wiki 使用导入图片的方式。这样离线也可以正常察看及编辑
• 线上的 公开 wiki 使用外部图片机制，这使得生成的单页 HTML 小，而且图片可以放在 COS / CDN 等加速加载。这套 发布流程 已经自动化

导入图片的方法

将图片拉进 TW 页面中 import 进来，然后修改它的标题。我一般用小写字母加连字符，不带文件格式后缀，如 git-cheet-sheet。这样做之后，tiddlers/ 目录中会多两个文件，如 git-cheet-sheet.jpg 及 git-cheet-sheet.jpg.meta。

外部图片的方法

外部图片的方式仅与导入图片方式略有不同。过程如下：

1. 使用上面讲的导入图片方式先导入图片，获得两个文件，如 http-basic-auth.png 及 http-basic-auth.png.meta
2. 图片发布到 COS，得到链接如 https://wiki-1251140025.cos.ap-shanghai.myqcloud.com/tiddlers/assets/http-basic-auth.png
3. 将 http-basic-auth.png 内容清空（可以用文本编辑器强行打开并删空，也可以用程序清空）
4. 在 http-basic-auth.png.meta 中加入 _canonical_uri 属性，如：

   _canonical_uri: https://wiki-1251140025.cos.ap-shanghai.myqcloud.com/tiddlers/assets/http-basic-auth.png
   created: 20200415234405142
   modified: 20200820061954300
   title: http-basic-auth
   type: image/png

这样就可以了。

我写了 发布脚本 来实现自动化过程。

嵌入图片到 tiddler 中

无论使用的是上述哪种方法导入图片，使用图片的过程都是一样的：

1. 可以使用 img 标签，可以带 width：[img width=500 [css-core-concepts-diagram]]
2. 或者使用更简单的 Transclusion：{{Git Cheat Sheet}}，缺点是无法控制图片的各项属性

参考 Images in WikiText 。

我还没找到一种足够好的实践来管理图片，等后面图片内容多了后再思考下。

导入音视频

参考 TiddlyWiki: Using Recodings。视频与音频类似。

导入 PDF

将 PDF 文件放在 /files 或者是 COS 中。使用 Text Snippet: Inline PDF 这个 snippet 来插入 PDF。Chrome 浏览器需要搭配安装 PDF Viewer 插件。具体示例看 HyperLogLog。