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

genre: 汇总 YAML

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

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

image

DataviewJS 代码
const files = dv.pages(`"文件目录"`)  // 换上你的文件夹路径和筛选排序条件
  .filter(p=> p.cover)  // 过滤没有 cover 键的文档
files.map(async p=> {
  const coverUrl = (p.file.frontmatter.cover.startsWith('http'))
    ? p.cover
    : encodeURI(`file:${app.vault.adapter.basePath}/${p.cover.path}`)
  , cover = `[![|200](<${coverUrl}>)](<${p.file.path}>)`
  dv.paragraph(cover)  // 输出
})

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

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

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

格式行依然按照 MD 格式,|200 就是限制的宽度。

效果展示的 CSS 来源 更新了坛里 Minimal Dataview 伪卡片 CSS,若使用此 CSS,由于另设置了图片样式,需通过指定 cssclasses 调整图片宽度。

学习本代码的关键,在于分清代码中 p.coverp.cover.pathp.file.frontmatter.cover 各自含义。

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

手机移动端不显示,可能是权限问题。file:// does’t work 提供了一种可供尝试的路径,但似乎就不是很好处理了。

可先不要加 [](),在文档中写 <img> 标签,看能否正常显示,来验证。

<img src='file:D:\..\测.试.png'>
// 这是电脑端的例子,基于操作系统的绝对路径,前面加了 file:
// 你也可以尝试 file:// 或其他格式

如何使用:

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 的传参与复用

这样的写法在移动端好像无法显示图片。有什么解决办法吗?

我刚刚测试了一下,在移动端的预览模式下,[![|200](${p.cover})](<>)如果连接到一个http链接,就可以正常显示,如果连接到一篇笔记,就无法显示。

另一方面,即使连接到笔记,在编辑模式下也可以显示。但是,如果是用dataviewjs的话,编辑模式下也无法显示。

[![|200](${p.cover})](<${p.file.path}>),也就是前者。

我知道怎么回事了,我小丑了,对不起,非常抱歉。
我拿沙盒库测试,发现可以正常显示。
一开始我没有使用沙盒库,是因为我已经更换了包括默认主题在内的多个主题,也排除了css片段的影响,至于插件,在移动端与桌面端完全一致。
现在经过排查, konodyuk/obsidian-typing: Programmatic customizations for groups of notes (github.com)这个插件,我在桌面端和移动端的设置不同。
把其React links:preview modeReact links:live preview mode设置关闭即可解决。

这个在移动端应该是没法显示的吧?我在沙盒库试过了

嗨,我想到一个办法,把图片文件读取为二进制数据再进行 base64 编码,这样用基本语法可以在 Dataview 表格中正常使用了,因为用的是基本语法,手机端应该也是可以用的。

但是我不是计算机专业的,不知道读取二进制数据会不会影响性能。想问问你的意见。

嗨。你是否知道这个插件?

我没有做过任何严谨的测试,但是在内容不太多的情况下,将图片数据直接写在文件里貌似不会影响性能。