YAML 可点击 URL 和 Wiki 链了,分享几个兼适的 DataviewJS 点图跳转文档

genre: 汇总 YAML

v1.5.0 YAML 区可点击 URL 和 Wiki 链接了,写了支持 URL 网图和 Wiki 链接本地图的 DataviewJS,点击图片可跳转到对应文档,以实现更好的图片墙样式。

文本、列表输出,以存放图片的 YAML 键为 cover 为例,效果:

image

DataviewJS 代码
let files = dv.pages(`"文件目录"`)  // 换上你的文件夹路径和筛选排序条件
    .filter(p=> p.cover)  // 过滤没有 cover 键的文档
files.map(async p=> { p.cover = (p.file.frontmatter.cover.startsWith('http'))
    ? `[![|200](${p.cover})](<${p.file.path}>)` : `[![[${p.cover.path}|200]]](<${p.file.path}>)`
    dv.paragraph(p.cover)  // 输出
})
格式行注释,点击展开
p.cover = (p.file.frontmatter.cover.startsWith('http'))
    ? `[![|200](${p.cover})](<${p.file.path}>)` : `[![[${p.cover.path}|200]]](<${p.file.path}>)`

三元运算符,判断是否以 http 开头。
- 是,格式:[![|200](图片)](<文件路径>)
- 否,格式:[![[图片|200]]](<文件路径>)

格式行完全按照 MD 格式,很好懂,200 就是限制的宽度。
如果是其他键名将代码中的 cover 全部替换成你的键名。

表格输出配合 CSS,以汇总文档 YAML 键 cover作者 为例,效果:

DataviewJS 代码
let files = dv.pages(`"文件目录"`)
    .filter(p=> p.cover)
files.map(p=> p.cover = (p.file.frontmatter.cover.startsWith('http')) ? `[![|200](${p.cover})](<${p.file.path}>)`
    : `[<img width='200' src='${encodeURI(`${app.vault.adapter.basePath}/${p.cover.path}`)}'>](<${p.file.path}>)`)
dv.table( ['封面', '作者'], files.map(p=> [p.cover, p.作者]) )  // 输出

调整图片宽度在 [|200]width='200'200 这个数值。效果展示使用的 CSS:更新了坛里 Minimal Dataview 伪卡片 CSS 由于另设置了图片样式,需通过指定 cssclasses 调整图片宽度。

学习本代码的关键,在于分清代码中 p.coverp.cover.pathp.file.frontmatter.cover 各自含义。此外,可能是插件本身限制,return 出去本地图片用 [![[图片|200]]](<文件路径>) 格式显示为未加感叹号的样式(即不渲染图片),所以表格输出有别于文本、列表输出,用的是 Dataview 图片显示问题 中的 <img> 老办法。

如果出现图片不显示或排序错误,一般刷新一下代码块或重启 Ob 即可恢复。

如何使用:

1、在 Dataview 插件设置启用 DataviewJS。

2、用 ```dataviewjs 代码块将代码包裹起来放在合适位置即可。

1 个赞

原来DataviewJS还能实现这种操作!我一直用的是Dataview+minimal的cards视图(如图),但是苦于不能点击图片,只能点击链接打开,等有空了试试楼主的代码,感谢分享!!

旧帖存档,内容已合并至 #1

1 个赞

感谢分享。然而把不同长宽比的图片混在一起显示还是好难受…我是不是应该想办法把它们都裁剪一下…


像这里的效果可以完成么,是一个主题用了css调整固定了图片的大小和下方展示的大小,这样感觉舒服些。

发现了一个插件可以实现这样:

image

但是这个插件好像并不支持dataview吧?

它是另一套体系。我所说的只是它的视觉表现。

@铅笔小明 @aoout

本话题 #1 介绍了 CSS 所在帖子“更新了坛里 Minimal Dataview 伪卡片 CSS”,即“引出帖”,是扒的 CSS,无需 Minimal 主题。

引出帖 #1,就有 cssclasses 说明,如“末位元素底端对齐”、“图片填充”、“图片比例”、“指定列数(从 1 到 8)”。引出帖后面楼层也有 CSS 示范如何添加更多比例。

如果你有一个想法,比如 #11 提出的效果,试一试,你会有自己的判断。

image

由于样式修改和 CSS 不属于本话题范围,若有伪卡片 CSS 相关问题,可在“更新了坛里 Minimal Dataview 伪卡片 CSS”话题继续讨论。

Note Gallery 插件和 Dataview 伪卡片或者说卡片视图,似乎尚没有强关联或替代关系。

表现上,前者为瀑布流,后者为列表卡片。

功能上,前者类似将 Ob 核心插件“搜索”结果图形化,让我想起 Core Search Assistant 插件,似乎也仅限呈现文件名和部分正文,若数据储存在 YAML,大概不能很好作用。用 DataviewJS 汇总各文档首个出链,也能达到类似功能。

后者只是改变了 Dataview 插件生成元素的呈现方式,核心是 Dataview 插件,可自行选择显示哪些数据,也提供多样的数据处理,如本话题的实例不显示文件名,图片也不必在正文。

以上是简单试用 Note Gallery 插件的一个小报告。

1 个赞

感谢你所做的。
我个人其实并没有依赖于Dataview本身更高阶的能力,一直以来只是把它当作一个Gallery的工具在用。具体到应用场景下,我之前其实采用的是把笔记中出现的第一张图片的链接存储到YAML(这些笔记是通过我自己编写的插件生成的,所以可以做到)再通过Dataview展示的方式,相比于Note Gallery,其实更加反直觉了。

适合就是好的,简单使用场景有插件也省心。我不想图片再重复出现在正文,也主要用 DB Folder 插件管理文档。如果我想要 Note Gallery 插件类似的效果,可能会自己写 DataviewJS。


已写,详见话题 DataviewJS 的传参与复用