DataviewJS 的传参与复用

本话题及相关资源作教学用,请自行确保加载外部 JS 安全性问题,包括本话题中的 JS。

蓝奏云下载链接 密码: 7mcr

遇任何问题,请使用最新代码,先电脑端沙箱测试,尝试刷新代码块或重启 Ob。
额外需求仍请另建话题。友链:


DataviewJS 的翻页与随机 中,我们了解到 dv.view 语法调用外部 JS,同一文件可以在不同文档重复调用,这就达成了基本的复用。

然而,有时我们想要汇总的项目不尽相同。这时,需要用到 dv.view 的另一个功能:传参。

Dataview 官方文档 相关部分介绍如下:

如果你知晓 DataviewJS 小白手册“小白入门 DataviewJS 方法”,你会发现,这是导出一个对象,各属性逗号分隔,分别为我们设置的值。提醒:最常见报错 Unexpected identifier 就是忘记每项后写上逗号。

先从改变目标文件夹路径开始。

内部 DataviewJS 代码:

// 假设外部 JS 名为"dv-表格.js"
await dv.view('外部 JS 所在文件目录/dv-表格', { files: dv.pages(`"文件目录"`) })

在外部 JS 首行导入我们设置的属性:image

然后,就可以在代码中使用这个属性的值了:image

看看效果,点击展开 GIF:

切换文件目录

20240120_222541

通过这个简单的实例,你已经掌握了所需知识,可以动手实践了。

提供两个实例,标题为对应 JS 名,见文首网盘链接。

dv-检索

原始代码参 DataviewJS 汇总全文及特定标题下内容并解决图片显示痛点

内部 DataviewJS 代码
const tars = [
    ['任务一', 2],
    ['任务二', 2],
]; await dv.view('JS 目录/dv-检索', { head: 0, kwd: 0, //mline: 5,
    files: dv.pages(`"文件目录"`), obsidian, scale: 0.8, //tars,
    //li: p=> dv.paragraph(`##### ${p.file.link}\n${p.li}`),
    tb: [
    ['文档', 'p.file.link'],
    ['档', 'p.档'],
]})
各自定义属性含义(仅适用此 JS)
  • head:是否显示标题,0 为关,1 为开。常用于汇总全文。
  • kwd:是否包括空文档,0 为关,1 为开。常用于汇总全文保留空文档。
    • 如汇总 1 周日记,可能其中有空文档,但汇总全文时依然希望保留跳转到这些文档的内部链接。
    • 启用 mline 时停用。
  • mline:常用于画廊瀑布流式汇总。启用后的表现为:
    • 若有嵌入图片,选择首个展示。
    • 若无,依设置值截取文档正文前几行展示。数值不要太大。
    • 点击图片、正文区域跳转到对应文档,按住 Ctrl 点击在新标签页打开。
  • files:目标文件夹路径,按照 DataviewJS 格式。排序、筛选等依然照基本用法添加。
  • obsidian:一个必要参数。
  • scale:表格输出原文缩放倍数,填 0 默认缩至 50% 大小。
  • tars:目标标题名称及级别,范围 1~6。可以写大于 6 的数值,表示不包含下级标题。
    • ['任务一', 7] 表现为假如标题“任务一”下还有低级别标题,只截取低级别标题前的内容。
    • 停用时,汇总全文。
  • li:文本、列表输出,按照 DataviewJS 格式。
    • p 为设定的函数变量,p.li 代表汇总到的文本,书写时不要忘记前面的 p=>
  • tb:表格输出,停用 li 属性时启用。
    • 二维数组每行第 1 项为表头、第 2 项为表体。
    • 不要忘记使用字符串格式,外部代码通过 JS 方法 eval() 将其转换。

// 为 JS 单行注释语法,行内其后部分将被识别为注释。通过灵活加减 //,我们能快速启动或停用某属性。

看看效果:

切换文本、表格输出

20240120_220710

tars + 列表卡片式布局

20240120_221810

mline + 瀑布流式布局

20240120_215811

效果展示使用的 CSS:更新了坛里 Minimal Dataview 伪卡片 CSS
若你看过,可前去查看新增 cssclasses 相关说明。

相关:【求助】Dataview 如何筛选各个二级标题中的内容并用表格呈现

dv-标签

原始代码同“dv-检索”。

适配格式
- 标签图片行(无顺序要求)
    - 文字行
    - 文字行(可选多行)
内部 DataviewJS 代码
await dv.view('JS 目录/dv-标签', { files: dv.pages(`"文件目录"`), //tags: ['#标签'],
})
各自定义属性含义
  • files:目标文件夹路径,按照 DataviewJS 格式。排序、筛选等依然照基本用法添加。
  • tags:启用时,筛选符合标签的列表项。支持多标签 ['#标签1', '#标签2']

看看效果

20240125_151928

不想说明文字展示为列表,将外部 JS 代码中表体第三项的 l.children.map(child=> child.text) 后加 .join('\n') 转为字符串,参照前两项修改。

相关:【求助】DataviewJS 提取单行内容分割展示

此外,将显示图片代码总结为函数,文件名“dv-图片.js”。是用 module.exports 导出的,想用这个函数的 JS 首行使用 require('绝对路径') 导入。

然后就可以在代码中使用这个函数。截图为“dv-标签.js”使用此方法修改的示例:

image

首次起效需重启 Ob。

函数参数介绍

image

第一项 p:表示每个文档,如 files.map(p=> ) 中的 p。从中得到出链元数据。

第二项 arr:一维数组,每项为字符串,如 ( await app.vault.readRaw() ).split() 得到的数组。从中得到原文与出链元数据比对。

第三项 only0 表示图文混排,1 表示只要图片。取决于你想要图片作为正文的一部分,还是想要单独放在一列。

image

image

6 个赞

有一个问题啊,在 inline js 中,用 await 好像显示不出来数据啊,这个怎么办

切阅读模式 :wink:

也许你应该去英文论坛或插件的 GitHub 页面报告。

阅读模式可以,谢谢。
看来这个可以算 dataview 或者 obsidian 的 bug 了

使用DV标签的检索源码模式如下


但是检索出来还是不显示图片请问是为什么呢。

不太清楚。是用的最新 JS 文件吗。

更新:经沟通,可能与系统有关。

是最新的js文件,然后源码模式检索格式是这个。


难道是这里格式有问题么。

可以直接使用 CustomJS插件 复用片段

1 个赞