10 行代码实现对全库的图片、excalidraw 白板进行统一管理

经验分享
1

最近一直忙于插件开发中，好久没来论坛了，今天来分享几个非常简短的 dataviewjs 代码，实现对 obsidian 库里的图片、excalidraw 白板的统一管理。

为论坛添砖加瓦 :sunglasses:

需求

  • 因为库里有一些图片是属于可重复使用的素材，希望能集中的查看和使用，最好是有预览图

  • 想全局的查看目前已经创建的 Excalidraw 白板，最好是有预览图

最开始想做成一个插件，但是最近一直专注在 components 插件的开发上，不想再分心投入时间在其它事情上了，于是就简单研究了下 dataviewjs，发现用很短的代码也能实现一个差不多的功能，给大家分享分享。

效果图

数量和名称筛选输入框是基于 components 插件的 dataview 组件扩展而来，并不是 dvjs 原生实现的

  • 图片管理

image
image1466×992 60.2 KB

  • Excalidraw 管理

image
image1451×1167 128 KB

源码

  • 图片管理
const app = this.app;
const files= app.vault.getAllLoadedFiles()
.filter(file => file.extension && file?.extension !== 'md') // 这里我过滤的是非 md 文件
.sort((a,b) => a.stat.ctime < b.stat.ctime) // 创建时间排序
.slice(0, 30) // 只显示 30 条数据

const data = files.map(f => {
	return [f.name, dv.fileLink(f.path, true)]
})
dv.table(['file', 'image'], data)
  • Excalidraw 管理
const app = this.app;
const files= app.vault.getAllLoadedFiles()
.filter(file => file.path.endsWith('excalidraw.md')) // 得到所有 excalidraw.md 结尾的文件
.slice(0, 30) // 只展示 30 条数据
const data = files.map(f => {
	return [f.name, dv.fileLink(f.path, true)]
})
dv.table(['file', 'excalidraw'], data)
3 个赞
2

可以请教一下怎么按时间顺序展示库里面的PDF文件吗？
我修改了一下代码可以展示PDF链接，但是不能按照创建时间排序，不太懂js所以想请教一下

image
image979×347 9.67 KB

代码在这里

const app = this.app;
const files= app.vault.getAllLoadedFiles()
.filter(file => file.path.endsWith('pdf')) // 得到所有 pdf 结尾的文件
.slice(0, 10) // 只展示 10 条数据
const data = files.map(f => {
return ['[['+f.name+']]', f.ctime]
})
dv.table(['file', '创建时间'], data)
3

参考下面注释中标记了 ！！！ 的代码

.filter(file => file.path.endsWith('pdf')) // 得到所有 pdf 结尾的文件
.sort((a, b) => b.stat.ctime - a.stat.ctime) // ！！！ 这里是新增的，如果想反序，就改为 `a.stat.ctime-b.stat.ctime`
.slice(0, 10) // 只展示 10 条数据
``
1 个赞
4

可以了，感谢！！！