TiddlyWiki: Import Media Contents to TiddlyWiki

onlyice1st March 2021 at 9:59am
TiddlyWiki

在 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.jpggit-cheet-sheet.jpg.meta

外部图片的方法

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

  1. 使用上面讲的导入图片方式先导入图片,获得两个文件,如 http-basic-auth.pnghttp-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