隐藏frontmatter段的CSS代码

以前可以用CSS片段隐藏:

.is-live-preview .cm-hmd-frontmatter {
    display: none;
}

刚测试,在新版本,已无效。
若要隐藏,CSS如何修改?

1 个赞

我刚才也碰到文档属性显示隐藏的问题 核心插件,文档属性视图显示和隐藏开关失效

设置→编辑区→显示→文档属性 里可以控制显示隐藏

如果非要用css的话,可以这样(只在版本1.5.12中测试通过)

/* 阅读模式 */
.markdown-source-view.is-live-preview.show-properties .metadata-container{
    display: none;
}
/* 编辑模式 */
.markdown-preview-view.show-properties .metadata-container{
    display: none;
}
/* 源码模式 */
.cm-line:has(.cm-hmd-frontmatter){
    display: none!important;
}
2 个赞

原来设置里有文档属性了。

有无可能做到,对大多数MD,文档属性隐藏,而指定的MD,则显示文档属性?

测试成功,感谢大大分享

也是可以的,只不过比较麻烦点,比如,你可以下载我的插件: 我开发了一个快速输入Markdown代码+禅模式的插件(ii-quicker)

然后,把下面的代码粘贴到JavaScript代码片段里(在版本1.5.12上测试通过)

this.app.workspace.on("layout-change", ()=>{
    setTimeout(()=>{
        var targetTitles = [
            "Demo1",
            "Demo2",
        ];
        var activeLeaf = ".workspace-split.mod-root .workspace-tabs.mod-active .workspace-leaf.mod-active "
        var inlineTitle = document.querySelector(activeLeaf+'.inline-title');
        if (inlineTitle && targetTitles.includes(inlineTitle.innerText)) {
          var frontmatter = document.querySelectorAll(activeLeaf+".cm-line:has(.cm-hmd-frontmatter)")
          if(frontmatter.length > 0) {
              document.querySelector(activeLeaf+".metadata-container").style.display='none';
              var forceStyle = document.head.querySelector("#force-style");
      		  if (!forceStyle) {
      			document.head.appendChild(
      				createEl("style", {
      					attr: { id: "force-style" },
      					text: activeLeaf+`.cm-content.force-display .cm-line:has(.cm-hmd-frontmatter){display:block!important}`,
      					type: "text/css",
      				})
      			);
      		  }
              document.querySelector(activeLeaf+".cm-content").classList.add("force-display")
          } else {
              document.querySelector(activeLeaf+".metadata-container").style.display='block';
              document.querySelector(activeLeaf+".cm-content").classList.remove("force-display")
          }
        } else {
           document.querySelector(activeLeaf+".metadata-container").style.display='none';
            document.querySelector(activeLeaf+".cm-content").classList.remove("force-display")
        }
    }, 42)
})

如图:

注意:别忘了把变量targetTitles里的Demo1,Demo2改成你自己的文章标题,填写到这里的文章都会显示文档属性。

==========================================

更新:注意这个代码要配合css样式使用,并且不要关闭设置里的显示文档属性开关

/* 阅读模式 */
.markdown-source-view.is-live-preview.show-properties .metadata-container{
    display: none;
}
/* 编辑模式 */
.markdown-preview-view.show-properties .metadata-container{
    display: none;
}
/* 源码模式 */
.cm-line:has(.cm-hmd-frontmatter){
    display: none!important;
}

ii plugin是否可以通过javascript片段,实现 记录阅读位置,下次打开MD自动恢复位置?提供最近使用文件的快速切换?

移动或win端,在同一个workspace里,不能避免重复打开文件,特别是在移动端,因看不到标题栏,经常就是打开多个相同的文件。

粘贴了这个JS,反复重启,但所有文档属性还是显示!
若在设置里把文档性性设为隐藏,则指定的文档又不会显示!

首先先添加上面的样式,再贴js,另外,需要显示文档属性的标题放到targetTitles里

看我上面的说明,回复更新了下

这个代码要配合上面css样式使用,并且不要关闭设置里的显示文档属性开关

另外,这个代码在版本1.5.12上测试通过,低版本可能不同。如果你的版本较低,建议升级到1.5.12试试。

我印象中记住阅读和防止重复打开都有相关插件,你找找看,理论上代码前端都可以实现,但就是比较麻烦,要写代码,测试等

win v1.5.3
CSS有效果,但ii的js无效果,已修改

this.app.workspace.on("layout-change", ()=>{
    setTimeout(()=>{
        var targetTitles = [
            "闪念重现",
            "闪念重现全功能版",
        ];

如果你用Style-Setting的话,可以默认保持关闭,然后添加cssclasses: show-yaml 就会单独显示:

默认保持关闭也可以通过命令控制开关:

/* @settings
name: 【Properties】控制Yaml的显示
id: 【Properties】控制Yaml的显示
settings:
-
  id: hide-yaml
  title: 显示或隐藏YAML(Properties)
  type: class-toggle
  addCommand: true
  default: true
*/
body.hide-yaml .view-content>:not(.show-yaml) {

  /* Source:[隐藏frontmatter段的CSS代码 - 疑问解答 - Obsidian 中文论坛](https://forum-zh.obsidian.md/t/topic/32576/2) */
  /* 阅读模式 */
  .markdown-source-view.is-live-preview.show-properties .metadata-container,
  /* 编辑模式 */
  .markdown-preview-view.show-properties .metadata-container,
  /* 源码模式 */
  .cm-line:has(.cm-hmd-frontmatter) {
    display: none;
  }
}

已把win端升级到1.5.12,但仍然无效果!

另外,选择IIZ,现在是可以再次选择就能完全退出了,但全屏时仍然是缺了右侧大纲显示的区域。

是指要在需要显示属性的文档,添加属性 cssclasses: show-yaml ?

是的,如果想某个笔记单独显示的话,就给它的yaml的cssclasses属性添加show-yaml的值

抱歉,之前的代码确实有bug,没有考虑多标签及多个窗口拆分的情况,代码已更改,现在应该可以了,如下:

this.app.workspace.on("layout-change", ()=>{
    setTimeout(()=>{
        var targetTitles = [
            "Demo1",
            "Demo2",
        ];
        var activeLeaf = ".workspace-split.mod-root .workspace-tabs.mod-active .workspace-leaf.mod-active "
        var inlineTitle = document.querySelector(activeLeaf+'.inline-title');
        if (inlineTitle && targetTitles.includes(inlineTitle.innerText)) {
          var frontmatter = document.querySelectorAll(activeLeaf+".cm-line:has(.cm-hmd-frontmatter)")
          if(frontmatter.length > 0) {
              document.querySelector(activeLeaf+".metadata-container").style.display='none';
              var forceStyle = document.head.querySelector("#force-style");
      		  if (!forceStyle) {
      			document.head.appendChild(
      				createEl("style", {
      					attr: { id: "force-style" },
      					text: activeLeaf+`.cm-content.force-display .cm-line:has(.cm-hmd-frontmatter){display:block!important}`,
      					type: "text/css",
      				})
      			);
      		  }
              document.querySelector(activeLeaf+".cm-content").classList.add("force-display")
          } else {
              document.querySelector(activeLeaf+".metadata-container").style.display='block';
              document.querySelector(activeLeaf+".cm-content").classList.remove("force-display")
          }
        } else {
           document.querySelector(activeLeaf+".metadata-container").style.display='none';
            document.querySelector(activeLeaf+".cm-content").classList.remove("force-display")
        }
    }, 42)
})

另外,全屏是只会保留当前焦点文档,其他都不显示,自然不包括左右的面板。这个是禅模式和全屏的意义不同,如果你想使用全屏且包含右侧面板,可以使用官方自带的全屏触发。或者通过修改css代码来调整(较为麻烦,不建议)。

后记:
2024-04-07 发现源码模式跟QuickAdd 添加Template链接到鼠标位置有点冲突,改为透明高度设为0就好了:

/* @settings
name: 【Properties-熊猫】控制Yaml的显示情况
id: 【Properties-熊猫】控制Yaml的显示情况
settings:
-
  id: hide-yaml
  title: 显示或隐藏YAML(Properties)
  type: class-toggle
  addCommand: true
  default: true
*/
body.hide-yaml .view-content>:not(.show-yaml) {

  /* Source:[隐藏frontmatter段的CSS代码 - 疑问解答 - Obsidian 中文论坛](https://forum-zh.obsidian.md/t/topic/32576/2) */
  /* 阅读模式 */
  .markdown-source-view.is-live-preview.show-properties .metadata-container,
  /* 编辑模式 */
  .markdown-preview-view.show-properties .metadata-container {
    display: none;
  }

  /* 源码模式 */
  .cm-line:has(.cm-hmd-frontmatter) {
    height: 0px;
    opacity: 0;
  }
}

明白。
要已打开的文档,并不会生效,要关闭,重新打开才生效,这和CSS设置不一样。

BTW:
能加入js代码,检查打开的MD文件是否已存在leaf,若存在,就不重复打开,而是把相应leaf设为active?

在安卓1.4.16下无效,试卸载1.4.16,安装1.5.12,但ii js脚本仍然是无效。

能否让ii js脚本兼容安卓和ios等移动端?

安装 了style settings,也在snippets里创建了这个css,为什么在它的settings,还是什么也没有?

可能你没有启动该css,在外观里面启用Snippets片段,我用沙盒测试是生效的