新的Gallery插件Note Gallery,配合css可替代Dataview Cards视图

一个比Dataview更快的检索插件:Note Gallery

配合css只显示图片

  • 由于包含笔记所有内容,因此只需隐藏除了图片的内容即可,脚本如下:
/* Note Gallery插件除图片元素 - 隐藏 */
.card-content:has(div > .card-content-container > div > p > span > img) .card-content-container > div > :not(p), /* p元素以外的元素 - 隐藏 */
.card-content:has(div > .card-content-container > div > p > span > img) .card-content-container p:not(:has(span > img)), /* 不含图的p元素 - 隐藏 */
.card-content:has(div > .card-content-container > div > p > span > img) .card-content-container > div > p > :not(span)/* 图片之外的p元素的子元素 - 隐藏 */{
  display: none!important;
}
.card-content .card-content-container > div > p:has(span > img)/* p元素中的文本 - 隐藏 */{
  font-size: 0;
}
.note-card .card-content {
  min-height: 0;
}

  • 另外还有一些样式改进:
search-empty-state{
  display: none;
}
.card-content img{
  max-width:100%;
}
.card-content p, .card-content h1, .card-content h2{
  margin-top: 0;
  margin-bottom: 0;
}
.note-card hr{
  display: none;
} 
.note-card:hover{
  transform: scale(1.1); 
  transition: transform .1s!important; 
}
.note-card{		
  border: none;
  transform: scale(1);		
  transition: transform 0.3s!important;		
}	

效果如图,只保留了图片的部分:

7 个赞

更新了css,使无图条目也能显示,即:有图只显示图,无图显示内容

2 个赞

你好大神,我在使用note gallery时,想把某个标签的内容检索显示出来,但效果不是该标签内容。使用语法为:query: ‘tag:#语录’ 。请问这个问题如何解决?

大佬为什么我卡片上的图片不显示

把这个笔记的源码贴上来/检查一下路径

好像用相对路径就不行

![[img.png]]吧,ob对这种写法支持好一些

1 个赞



为什么我的是失败的:broken_heart::broken_heart::broken_heart:

css脚本不是粘贴在文档中,是在snippet目录下启用的
不知道咋添加css脚本的话看这帖子2楼CSS 分享:自动隐藏式十字花左侧边栏 - #2,来自 PlayerMiller

1 个赞

好的(`・ω・´)ゞ

请问下我安装了Note Gallery插件,并且粘贴了 css 片段,但是看不到界面有什么变化,我是第一次安装插件,不知道还需要操作什么


上面的css是改你的note gallery组件的样式的,不知道你附的图是指什么

另外,最近出的 vault explorer 插件的grid视图可以是note gallery的上位替代了,可以试试看,我后续也出个帖子,做一些css优化,类似这样: