新的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;		
}	

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

6 个赞

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

2 个赞

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

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

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

好像用相对路径就不行

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

1 个赞