genre: 汇总 YAML
v1.5.0 YAML 区可点击 URL 和 Wiki 链接了，写了支持 URL 网图和 Wiki 链接本地图的 DataviewJS，点击图片可跳转到对应文档，以实现更好的图片墙样式。
文本、列表输出，以存放图片的 YAML 键为 cover 为例，效果：
DataviewJS 代码
let files = dv.pages(`"文件目录"`) // 换上你的文件夹路径和筛选排序条件
.filter(p=> p.cover) // 过滤没有 cover 键的文档
files.map(async p=> { p.cover = (p.file.frontmatter.cover.startsWith('http'))
? `[](<${p.file.path}>)` : `[![[${p.cover.path}|200]]](<${p.file.path}>)`
dv.paragraph(p.cover) // 输出
})
格式行注释，点击展开
p.cover = (p.file.frontmatter.cover.startsWith('http'))
? `[](<${p.file.path}>)` : `[![[${p.cover.path}|200]]](<${p.file.path}>)`
三元运算符，判断是否以 http 开头。
- 是，格式：[](<文件路径>)
- 否，格式：[![[图片|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')) ? `[](<${p.file.path}>)`
: `[<img width='200' src='${encodeURI(`file:${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.cover、p.cover.path、p.file.frontmatter.cover 各自含义。此外，可能是插件本身限制，return 出去本地图片用 [![[图片|200]]](<文件路径>) 格式显示为未加感叹号的样式（即不渲染图片），所以表格输出有别于文本、列表输出，用的是 Dataview 图片显示问题 中的 <img> 老办法。
如果出现图片不显示或排序错误，一般刷新一下代码块或重启 Ob 即可恢复。
如何使用：
1、在 Dataview 插件设置启用 DataviewJS。
2、用 ```dataviewjs 代码块将代码包裹起来放在合适位置即可。
1 个赞
原来DataviewJS还能实现这种操作！我一直用的是Dataview+minimal的cards视图（如图），但是苦于不能点击图片，只能点击链接打开，等有空了试试楼主的代码，感谢分享！！
aoout
(aoout)
9
感谢分享。然而把不同长宽比的图片混在一起显示还是好难受…我是不是应该想办法把它们都裁剪一下…
铅笔小明
11
像这里的效果可以完成么，是一个主题用了css调整固定了图片的大小和下方展示的大小，这样感觉舒服些。
@铅笔小明 @aoout
本话题 #1 介绍了 CSS 所在帖子“更新了坛里 Minimal Dataview 伪卡片 CSS”，即“引出帖”，是扒的 CSS，无需 Minimal 主题。
引出帖 #1，就有 cssclasses 说明，如“末位元素底端对齐”、“图片填充”、“图片比例”、“指定列数（从 1 到 8）”。引出帖后面楼层也有 CSS 示范如何添加更多比例。
如果你有一个想法，比如 #11 提出的效果，试一试，你会有自己的判断。
由于样式修改和 CSS 不属于本话题范围，若有伪卡片 CSS 相关问题，可在“更新了坛里 Minimal Dataview 伪卡片 CSS”话题继续讨论。
Note Gallery 插件和 Dataview 伪卡片或者说卡片视图，似乎尚没有强关联或替代关系。
表现上，前者为瀑布流，后者为列表卡片。
功能上，前者类似将 Ob 核心插件“搜索”结果图形化，让我想起 Core Search Assistant 插件，似乎也仅限呈现文件名和部分正文，若数据储存在 YAML，大概不能很好作用。用 DataviewJS 汇总各文档首个出链，也能达到类似功能。
后者只是改变了 Dataview 插件生成元素的呈现方式，核心是 Dataview 插件，可自行选择显示哪些数据，也提供多样的数据处理，如本话题的实例不显示文件名，图片也不必在正文。
以上是简单试用 Note Gallery 插件的一个小报告。
1 个赞
aoout
(aoout)
16
感谢你所做的。
我个人其实并没有依赖于Dataview本身更高阶的能力，一直以来只是把它当作一个Gallery的工具在用。具体到应用场景下，我之前其实采用的是把笔记中出现的第一张图片的链接存储到YAML（这些笔记是通过我自己编写的插件生成的，所以可以做到）再通过Dataview展示的方式，相比于Note Gallery，其实更加反直觉了。
适合就是好的，简单使用场景有插件也省心。我不想图片再重复出现在正文，也主要用 DB Folder 插件管理文档。如果我想要 Note Gallery 插件类似的效果，可能会自己写 DataviewJS。
已写，详见话题 DataviewJS 的传参与复用。
aoout
(aoout)
18
这样的写法在移动端好像无法显示图片。有什么解决办法吗？
aoout
(aoout)
20
我刚刚测试了一下，在移动端的预览模式下，[](<>)如果连接到一个http链接，就可以正常显示，如果连接到一篇笔记，就无法显示。
aoout
(aoout)
21
另一方面，即使连接到笔记，在编辑模式下也可以显示。但是，如果是用dataviewjs的话，编辑模式下也无法显示。
我确认一下，你链接笔记是用的 [](<${p.file.path}>)，还是
[![[${p.cover.path}|200]]](<${p.file.path}>)。
aoout
(aoout)
23
[](<${p.file.path}>)，也就是前者。
---
cover1: https://forum-zh.obsidian.md/uploads/default/original/2X/1/1e9a4eb6741c8ffd05f5cc1b3bb0abc5f8e3a7c7.png
cover2: "[[测.试.png]]"
---
```dataviewjs
const file = dv.current()
console.log(file.cover1) // 结果: http...
console.log(file.cover2.path) // 结果: 文件目录/测.试.png
```
aoout
(aoout)
25
我知道怎么回事了，我小丑了，对不起，非常抱歉。
我拿沙盒库测试，发现可以正常显示。
一开始我没有使用沙盒库，是因为我已经更换了包括默认主题在内的多个主题，也排除了css片段的影响，至于插件，在移动端与桌面端完全一致。
现在经过排查， konodyuk/obsidian-typing: Programmatic customizations for groups of notes (github.com)这个插件，我在桌面端和移动端的设置不同。
把其React links:preview mode和React links:live preview mode设置关闭即可解决。
有可能。你可以先不要加 []()，在文档中写 <img> 标签，看能否正常显示。
<img src='file:D:\..\测.试.png'>
// 这是电脑端的例子，基于操作系统的绝对路径，前面加了 file:
// 你也可以尝试 file:// 或其他格式
若始终不能显示，可能是权限问题，img src file:// does’t work 提供了一种可供尝试的路径，但似乎就不是很好处理了。
另外，#17 链接话题蓝奏云链接中的“dv-检索.js”使用 await obsidian.MarkdownRenderer.render() 方式，你也可以用那个 JS 测试，比如启用 mline 时能否正常显示及跳转（没有预览），如果可以的话就参考那个代码。
