隐藏frontmatter段的CSS代码

itdawns · 2024 年4 月 3 日 18:13

以前可以用CSS片段隐藏：

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

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

wilson · 2024 年4 月 4 日 00:52

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

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

如果非要用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;
}

itdawns · 2024 年4 月 4 日 10:44

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

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

熊猫别熬夜 · 2024 年4 月 4 日 12:13

测试成功，感谢大大分享

wilson · 2024 年4 月 4 日 14:23

也是可以的，只不过比较麻烦点，比如，你可以下载我的插件: 我开发了一个快速输入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;
}

itdawns · 2024 年4 月 6 日 13:45

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

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

itdawns · 2024 年4 月 6 日 13:56

wilson:

this.app.workspace.on("layout-change", ()=>{
    setTimeout(()=>{
        var targetTitles = [
            "Demo1",
            "Demo2",
        ];
        var inlineTitle = document.querySelector('.inline-title');
        if (targetTitles.includes(inlineTitle.innerText)) {
          var frontmatter = document.querySelectorAll(".cm-line:has(.cm-hmd-frontmatter)")
          if(frontmatter.length > 0) {
              document.querySelector(".metadata-container").style.display='none';
              frontmatter.forEach(element => {
                element.style.display = 'block';
              });
          } else {
              document.querySelector(".metadata-container").style.display='block';
          }
        } else {
           document.querySelector(".metadata-container").style.display='none';
        }
    }, 42)
})

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

wilson · 2024 年4 月 6 日 15:01

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

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

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

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

wilson · 2024 年4 月 6 日 15:05

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

itdawns · 2024 年4 月 7 日 03:56

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

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

熊猫别熬夜 · 2024 年4 月 7 日 04:50

如果你用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;
  }
}

itdawns · 2024 年4 月 7 日 06:39

已把win端升级到1.5.12，但仍然无效果！

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

itdawns · 2024 年4 月 7 日 06:56

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

熊猫别熬夜 · 2024 年4 月 7 日 07:13

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

wilson · 2024 年4 月 7 日 09:01

抱歉，之前的代码确实有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 年4 月 7 日 13:57

后记：
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;
  }
}

itdawns · 2024 年4 月 7 日 15:01

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

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

itdawns · 2024 年4 月 7 日 17:00

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

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

itdawns · 2024 年4 月 7 日 17:19

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

熊猫别熬夜 · 2024 年4 月 7 日 17:24

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