「CSS」阅读模式仅显示URL属性(紧凑metadata栏)

一句总结

阅读模式下,metadata栏仅显示含有内外链的属性

主要用途是避免无用的属性占用阅读模式的页面空间,例如“创建时间”、“cssclasses”等
最近快速取用一些归档笔记的URL的场景比较多,就写了个这个脚本

效果如图(左编辑右阅读):

如何添加css脚本:【新手向教程】OB样式调整基础课:CSS入门科普

/* 隐藏metadata属性栏,除了包含链接的项 */
.markdown-reading-view .metadata-container .metadata-property:not(:is(:has(.metadata-property-value > .metadata-link > *:is(.external-link, .internal-link)),
                                                                      :has(.metadata-property-value > .multi-select-container > *:is(.external-link, .internal-link)),
                                                                      :has(.metadata-property-value > .multi-select-container > .multi-select-pill > *:is(.external-link, .internal-link))
                                                                     )),
.markdown-reading-view .metadata-container .metadata-add-button,
.markdown-reading-view .metadata-container .metadata-properties-heading{
	display:none!important;
}

经测试支持以下属性的保留:

  • 仅含内链(创建/未创建)的文本/列表属性
  • 仅含外链的文本/列表属性
  • 含内链+外链的列表属性 (这项的CSS记号居然和第二项不一致)

相关

属性列表折叠的方法也也可以参考这个:「CSS」默认隐藏特定文档属性