QuickAdd JS & Templater JS 简介及相互修改

原求助帖,如果有坛友有在 Dataview 插件用 dv.view 加载的 JS 中使用 ES6 模块相关经验,希望能告诉楼主,向你请教。

原帖内容存档,点击展开

把 DataviewJS 显示图片相关代码总结为函数传到“DataviewJS 的传参与复用”蓝奏云链接里了,文件名“dv-图片.js”,是用 module.exports 导出的。

最初想使用 ES6 模块(ESM),也就是 import/export 方式导入导出,报错 SyntaxError: Cannot use import statement outside a module

看了相关视频和帖子,说要修改 HTML <script> 添加 type='module',使用开发控制台尝试寻找对应元素未能找到。询问 AI 尝试在 JS 中使用:

let script = document.querySelector('script')  // 获取第一个 script 元素
script.setAttribute('type', 'module')  // 设置 type 属性为 module

未成功。Win11,当前及安装版本 v1.5.3,Dataview 插件版本 0.5.64,默认主题,已沙箱测试。


简介

QuickAdd Capture 加载内部代码
1-3、命名、选择 Capture、点击 Add

4-5、点击小齿轮、选择任意非脚本 MD 档

多库用户推荐选择一个单独的空 MD 档,同时启用“Create file if it doesn’t exist”。

6、配置 Capture format

image

对于 JS 代码,格式:用代码块包裹,语言“js quickadd”。

```js quickadd
代码
```
7-8、点亮闪电、找到命令设置快捷键

image

提醒:设置 QuickAdd Capture 第 5 步一定要选择文档,不要勾选 Capture to active file,
原因见 实现 Vim Mode 的切换 #4 提到的意外。多个代码可以选同一个文档。

QuickAdd Macro 加载外部 JS
一、在外部 JS 书写代码

按需导入 API,如 module.exports = async ({ quickAddApi })=> { 代码 },即可在外部 JS 代码中使用 quickAddApi,无需前加 this.

二、配置 User Scripts

需要快捷键:

1、命名、选择 Macro、点击 Add

image

2、点击小齿轮、点击 Create

image

3、点击 Configure

法 1:直接点击 image

法 2:回到主界面、点击 Manage Macros、点击 Configure

image 20240207210159

4、选择对应外部 JS、点击 Add

image

5、点亮闪电、找到命令设置快捷键

image image

不需要快捷键:

1、同“需要快捷键”步骤 3 法 2 点击 Manage Macros

2、命名、点击 Add image

3、同“需要快捷键”步骤 3 法 2 点击 Configure

4、同“需要快捷键”步骤 4

5、按需选择启动插件时加载、在文档加载或在模板加载,实例见相关话题

启动插件时加载:20240207210160

在模板加载示例:

QuickAdd Macro 加载 QuickAdd Capture

通常用于启动插件时静默加载。

第 1-3 步同“QuickAdd Macro 加载外部 JS”二、配置 User Scripts“不需要快捷键”第 1-3 步。

第 4 步改为“点击 Add Capture、点击小齿轮”。

image

image

第 5-6 步同“QuickAdd Capture 加载内部代码”第 5-6 步。

第 7 步同“QuickAdd Macro 加载外部 JS”“不需要快捷键”第 5 步“选择启动插件时加载”。

最终效果:image

Templater Hotkeys 加载 MD 脚本档
1、在 MD 档书写代码,格式:用 <%* -%> 包裹
<%*
代码
-%>

image

2、配置 MD 档所在文件目录

image

3、配置 MD 档到 HotKeys

image

4、找到命令设置快捷键

不习惯快捷键,或者移动端,用 Commander 插件 将录入的命令变成一个可交互按钮,放在 Obsidian 的某个栏上。

相关话题:

相互修改

QuickAdd JS 和 Templater JS 交互相关代码存在相互对照。

以选单(suggester)和填空(prompt)为例:

this.quickAddApi.suggester() || tp.system.suggester()

image

this.quickAddApi.inputPrompt() || tp.system.prompt()

image image

基于 JS 的共性,我们可以预先做一些处理,以便日后根据需要相互修改。

一、书写代码时,将存在对照的部分声明为函数,迁移时只需修改函数即可。

举例

1、声明函数,以 Templater 填空为例:

function prompt(str) { return tp.system.prompt(str) }
// 或 let prompt = str=> tp.system.prompt(str)
return await prompt('输入:')

2、Templater → QuickAdd,只需将 tp.system.prompt(str) 修改为 this.quickAddApi.inputPrompt(str)

imageimage

二、适当用通用 API 代替插件 API,减轻修改成本。

如用 app.workspace.getActiveFile()(Obsidian API)代替 tp.file.find_tfile(tp.file.path(1))(Templater API)。

为什么不直接导入 Templater API?
const tp = app.plugins.plugins['templater-obsidian'].templater.current_functions_object

1、楼主测试这样切换文档首次执行命令返回的是上个文档的结果,需再执行一次才能得到正确结果。

2、理论上 Templater JS 代码直接粘贴进 QuickAdd Capture format 即可用,无需代码块包裹,留待自行尝试。

image

三、QuickAdd 内部 JS 代码个别字符可能存在解析问题,可用变通方式。

const bQs = String.fromCharCode(96).repeat(3) 作为 ``` 的变通,
如何设置默认编程语言 #4

此外,如果是正则表达式里有 ```,可用 new RegExp() 作变通,
QuickAdd 正则保值替换选单“简要解析”。

更多请参各插件文档或详询 AI。

2 个赞