如何为 TiddlyWiki 编辑栏添加块引用按钮

背景

我利用 TiddlyWiki 来记录读书笔记，更希望使用带双引号的块状引用格式来呈现。TiddlyWiki 提供了默认的引用按钮，但是默认的引用格式是没有双引号的，但它提供了一个 .tc-big-quote 的语法来实现带双引号的块状引用。但如果每一次使用都要输入这个有一点麻烦，所以希望添加一个按钮来快速添加这个语法块。该方法也适用于添加其他语法较复杂的输出块按钮。

方法

创建一个新按钮的最简单方式，就是 Clone 一个现有的按钮 tiddler，然后修改这个 tiddler。

1. 克隆按钮 tiddler

   • 找到一个现有的按钮 tiddler，例如 $:/core/ui/EditorToolbar/quote
   • Clone 出一个新的 tiddler，修改 tiddler的标题为 $:/core/ui/EditorToolbar/bigquote

2. 修改 tiddler 调用引用块语法

   <$action-sendmessage
       $message="tm-edit-text-operation"
       $param="wrap-lines"
       prefix="
   <<<"
       suffix="<<<"
   />
   

   以上是 quote 的调用语法块，$message 保持不变，这个相当于调用一个语法函数，以便在我们的调用文本前后添加指定的语法符号。$param 保持不变，这个参数使用 wrap-lines 来实现文本块前后添加指定语法符号。其中 prefix 指要添加在文本前面的语法符号，suffix 指要添加在文本后面的语法符号。这里我们要调用 .tc-big-quote的语法，只需要将prefix的语法变为 <<<.tc-big-quote 即可。

   <$action-sendmessage
       $message="tm-edit-text-operation"
       $param="wrap-lines"
       prefix="
   <<<.tc-big-quote"
       suffix="<<<"
   />
   

3. 修改 tiddler 相关的属性设置

   • caption: 这个属性用于设置在 $:/ControlPanel 这个 tiddler 中设置的按钮名字，也用于设置快捷键时区分按钮名字。如果你希望在多语言中该按钮也有正确的对应显示，你应该使用类似于 {{$:/language/Buttons/bigquote/Caption}} 这样的字段来显示标题，以便翻译人员可以添加翻译，创建一个名为 $:/language/Buttons/bigquote/Caption 的 tiddler，并在其中写入英文的按钮标题。当然最简单的方式是使用固定文本作为标题，建议你可以先用这个进行尝试，在进行多语言的 tiddler 替换。
   • conditon: 这个属性用于填入一个 tiddler filter expression, 用于判断是否显示该按钮。如果不设置该属性，默认会显示该按钮。通常不需要修改我们复制出来的这个 tiddler 的设置。
   • description: 这个属性用于设置在 $:/ControlPanel 中的描述，同时这个描述也会显示在当你鼠标悬停在按钮中的提示信息。如果你也希望在多语言中该描述也有正确的对应显示，你应该使用类似于 {{$:/language/Buttons/bigquote/Hint}} 这样的字段来显示描述，以便翻译人员可以添加翻译，创建一个名为 $:/language/Buttons/bigquote/Hint 的 tiddler，并在其中写入英文的按钮描述。当然最简单的方式是使用固定文本作为描述，建议你可以先用这个进行尝试，在进行多语言的 tiddler 替换。
   • icon：这个属性用于设置按钮的图标。我这里采用和 quote 一样的图标，因为实际上我是要禁用 quote 按钮，而启用 bigquote 按钮。
   • shortcut: 这个属性用于设置按钮的快捷键。我这里没有使用快捷键。如果你需要使用快捷键，最兼容性的做法实际上需要创建三个 tiddler，分别是 $:/config/shorcuts-not-mac/bigquote, $:/config/shorcuts-mac/bigquote, $:/cofig/ShortcutInfo/bigquote。在前两个 tiddler 中分别键入对应不同系统的快捷键设置，最后一个 tiddler 中键入 {{$:/language/Buttons/bigquote/Hint}} ，也就是对应的刚刚上面的 description 字段，如果你上面采用的是 tidder 变量的形式这里就可以跟随，如果不是，那么在上面修改 description的时候，这里也应该一并修改。
   • list-before: 这个属性可以调整这个按钮的显示位置，默认会显示在最末尾，你可以通过填入该字段来调整按钮的显示位置。例如填入 $:/core/ui/EditorToolbar/more， 这个按钮就会显示在 more 按钮的前面。

4. 保存 tiddler，注意复制出来的 tidder 是有个 $:/tags/EditorToolbar 标签的，这个标签不能移除，必须保留

5. 现在你就可以在编辑工具栏中看到这个新添加的按钮了，并且你可以在 $:/ControlPanel 的 Appearance > Toolbars > Editor Toolbar 选项卡里面控制这个按钮的显示或隐藏。

参考资料

• TiddlyWiki v5.3.8 — a non-linear personal web notebook