优化文件浏览器的显示

怎么打造一个干净且有条理的文件浏览器，效果如图：

分为几个步骤：

1. 隐藏不必要的文件夹
2. 添加分隔线
3. （可选）调整排序

隐藏文件夹

/* 文件浏览器隐藏特定目录 */
/* 等于号是完全匹配，填写你想匹配的文件or文件夹名称 */
/* 星号+等于号是部分匹配，只要名字里包含就会隐藏 */
.nav-folder:has([data-path*="Assets"]),
.nav-folder:has([data-path="_export"]),
.nav-folder:has([data-path="_pdf"]) {
    display: none;
}

原理是根据左侧列表元素的 data-path 来隐藏文件/文件夹。

想要隐藏更多，只要添加 .nav-folder:has([data-path="你想隐藏的文件名"]), 即可。

记住，最后一条后面不需要加上逗号，前面的每条结尾都需要加英文逗号。

你也可以用 data-path*="hide-"，这样所有的名字里带有 hide- 的文件或文件夹都会被隐藏。

添加分隔线

这段代码来自：PKMer_Obsidian 样式 - 分割文件管理器

感谢 Huajin 佬分享！

/* 文件浏览器添加分隔线 */
/* 原始代码来自： https://github.com/replete/obsidian-minimal-theme-css-snippets */

/* 这里填写间距的尺寸 */
:root {
    --replete-custom-separators-vertical-padding: 6px;
    --replete-custom-separators-left-margin: -12px;
}

/* 这里填写文件夹名称 */
/* 例如，你填写了”学习笔记“，那就会在学习笔记后面添加分隔线 */
.nav-folder:has([data-path="4-Archive"])::after,
.nav-folder:has([data-path="_Inbox"])::after,
.nav-folder:has([data-path="学习笔记"])::after {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% + 32px);
    background: var(--tab-outline-color);
    margin: var(--replete-custom-separators-vertical-padding) 0 var(--replete-custom-separators-vertical-padding) var(--replete-custom-separators-left-margin);
}

这个原理也很简单，和上面类似，只不过是用了 ::after 在选定元素后面添加一个分隔线元素。

举个例子，你有「太阳、月亮、星星、地球」四个文件夹，想在「星星」画面加上分隔线，就加一条：

.nav-folder:has([data-path="星星"])::after,

（规则和上面一样，如果是最后一条，不需要逗号，否则需要英文逗号结尾）

--replete-custom-separators-vertical-padding: 6px 决定了分隔线上下有多高，默认是 6 个像素。

想要隔得更远，就改大一点。

--replete-custom-separators-left-margin 是左侧页边距，一般不用管。

完整代码

完整 CSS 如下：

/* Moy-文件浏览器优化.css */

/* 文件浏览器隐藏特定目录 */
/* 等于号是完全匹配，填写你想匹配的文件or文件夹名称 */
/* 星号+等于号是部分匹配，只要名字里包含就会隐藏 */
.nav-folder:has([data-path*="Assets"]),
.nav-folder:has([data-path="_export"]),
.nav-folder:has([data-path="_pdf"]) {
    display: none;
}

/* ======================================================== */

/* 文件浏览器添加分隔线 */
/* 原始代码来自： https://github.com/replete/obsidian-minimal-theme-css-snippets */

/* 这里填写间距的尺寸 */
:root {
    --replete-custom-separators-vertical-padding: 6px;
    --replete-custom-separators-left-margin: -12px;
}

/* 这里填写文件夹名称 */
/* 例如，你填写了”学习笔记“，那就会在学习笔记后面添加分隔线 */
.nav-folder:has([data-path="4-Archive"])::after,
.nav-folder:has([data-path="_Inbox"])::after,
.nav-folder:has([data-path="学习笔记"])::after {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% + 32px);
    background: var(--tab-outline-color);
    margin: var(--replete-custom-separators-vertical-padding) 0 var(--replete-custom-separators-vertical-padding) var(--replete-custom-separators-left-margin);
}

如果不知道怎么用这段 CSS，参考：

PKMer_如何在 Obsidian 内应用 CSS 修改

调整排序

有人可能会好奇，为啥我的文件夹没有按照首字母排序。

其实它们是有数字前缀的：

只不过我用了 FolderNotes 插件，将文件夹和笔记绑定在一起；

同时，用 Front matter title 插件，给文件夹笔记添加了用于显示的标题：

这样就能实现图上的效果了。

Front matter title 插件可以在各个地方修改笔记的显示名称

题外话：

其实有一个 Nav Weight 插件可以根据元数据给笔记排序，也可以试试。

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。