Skip to content

Commit

Permalink
Merge pull request #906 from PandaNocturne/prDoc
Browse files Browse the repository at this point in the history 
协助Moy投稿1篇+2篇文档
  • Loading branch information
@juestchaos
juestchaos authored Dec 18, 2024
2 parents f8ae8b9 + 8fba5df commit 94ac0a9
Show file tree
Hide file tree
Showing 6 changed files with 786 additions and 39 deletions.
159 changes: 159 additions & 0 deletions 10-Obsidian/Obsidian使用技巧/Moy/优化文件浏览器的显示.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
---
uid: 20241217204608
title: 优化文件浏览器的显示
tags: [CSS自定义, 💻教程, 文件夹管理]
description: 优化文件浏览器的显示
author: Moy
type: other
draft: false
editable: false
modified: 20241218142932
aliases: []
---

# 优化文件浏览器的显示

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

![](https://cdn.pkmer.cn/images/202412181426145.webp!pkmer)

分为几个步骤：

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

## 隐藏文件夹

```css
/* 文件浏览器隐藏特定目录 */
/* 等于号是完全匹配，填写你想匹配的文件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 样式 - 分割文件管理器]( https://pkmer.cn/show/20240323132950 )

感谢 Huajin 佬分享！

```css
/* 文件浏览器添加分隔线 */
/* 原始代码来自： 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 如下：

```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 修改]( https://pkmer.cn/show/20241213233727 )

## 调整排序

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

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

![](https://cdn.pkmer.cn/images/202412181426146.webp!pkmer)

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

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

![](https://cdn.pkmer.cn/images/202412181426147.webp!pkmer)

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

![](https://cdn.pkmer.cn/images/202412181426148.webp!pkmer)

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

题外话：

其实有一个 **Nav Weight** 插件可以根据元数据给笔记排序，也可以试试。
32 changes: 32 additions & 0 deletions 10-Obsidian/Obsidian外观/CSS 片段/Obsidian插件样式-MySnippets的多栏布局.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
uid: 20241218145625
title: Obsidian 插件样式 -MySnippets 的多栏布局
tags: [CSS自定义, 插件样式]
description: 用于定义 MySnippet 插件的状态栏菜单及其内部滚动菜单，并提供一个流畅的列布局，同时确保菜单在屏幕上有一个合理的最大高度和最小宽度。
author: 熊猫别熬夜
type: other
draft: false
editable: false
modified: 20241218145833
---

# Obsidian 插件样式 -MySnippets 的多栏布局

![241218_Obsidian插件样式：MySnippets的多栏布局.md](https://cdn.pkmer.cn/images/202412181456363.png!pkmer)

用于定义 MySnippet 插件的状态栏菜单及其内部滚动菜单，并提供一个流畅的列布局，同时确保菜单在屏幕上有一个合理的最大高度和最小宽度。

```css
/* ! 插件：MySnippet */
.MySnippets-statusbar-menu {
min-width: 50vw !important;
max-height: 80vh !important;
.menu-scroll {
display: block !important;
column-width: 320px;
width: 100%;
height: 100%;
}

}
```
39 changes: 21 additions & 18 deletions 10-Obsidian/Obsidian外观/CSS 片段/Obsidian插件样式-修改note toolbar插件布局像cmenu那样显示.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
uid: 20241214165026
title: Obsidian 插件样式 - 修改 note toolbar 插件布局像 cmenu 那样显示
tags: []
description:
author:
tags: [插件样式]
description: 修改 note toolbar 插件布局像 cmenu 那样显示
author: 熊猫别熬夜
type: other
draft: false
editable: false
modified: 20241214171631
modified: 20241218151635
---

# Obsidian 插件样式 - 修改 note toolbar 插件布局像 cmenu 那样显示
Expand All @@ -18,7 +18,7 @@ Note Toolbar 它可以为不同的文件夹配置不同的工具栏，并能够

可以用下面的样式定制 Note Toolbar 布局以模拟 Cmenu 显示

![24.12.14_Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示.md](https://cdn.pkmer.cn/images/202412141716981.png!pkmer)
![image.png](https://cdn.pkmer.cn/images/202412181431856.png!pkmer)

## 样式设置

Expand All @@ -28,39 +28,41 @@ Note Toolbar 它可以为不同的文件夹配置不同的工具栏，并能够

---

- 将工具栏的位置设置为“置顶（固定位置）”即可，其他设置保持默认。
- 将工具栏的位置设置为“置顶（固定位置）”， 样式只保留显示边框，其他设置保持默认，如下图所示。
- 注意：目前，该设置暂不支持移动端，因此建议在移动设备上隐藏此工具栏。

![24.12.14_Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示.md](https://cdn.pkmer.cn/images/202412141716747.png!pkmer)

> [!tip] 自带的分割符和行号符可以正常运行
> ![24.12.14_Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示.md](https://cdn.pkmer.cn/images/202412141716129.png!pkmer)
## CSS 样式

```css
/* NoteToolbar 像 Cmenu那样显示 */
/* note toolbar 像 cmenu那样显示 */
div[data-name *="cmenu"] {
z-index: var(--layer-status-bar);
position: absolute;
bottom: 60px;
width: 100%;
width: 100% !important;
pointer-events: none !important;
display: flex;
justify-content: center;
justify-content: center !important;
background-color: transparent !important;

div.callout, .callout-content {
background-color: transparent !important;
border: 0 !important;
margin: 0 !important;
opacity: 1 !important;
width: fit-content;
height: fit-content;
/* width: fit-content;
height: fit-content; */
}

ul[role="menu"] {
pointer-events: auto !important;

width: fit-content;
max-width: 450px;
max-width: 460px;
/* display: grid !important;
grid-template-columns: repeat(10, minmax(0, 1fr)); */
display: flex;
Expand All @@ -72,20 +74,21 @@ div[data-name *="cmenu"] {
transition: 200ms ease;
height: auto;
min-width: fit-content;
border-radius: 6px !important;
border-radius: 6px;

z-index: var(--layer-status-bar);
box-shadow: 0px 3px 30px rgb(31 38 135 / 15%);
margin: 30px !important;
margin: 33px !important;
border: 1px solid var(--background-modifier-border);

/* 添加毛玻璃效果 */
backdrop-filter: blur(10px) !important;
background-color: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(10px);
/* background-color: rgba(255, 255, 255, 0.1) !important; */
background-color: rgba(var(--primary-background), 0.1);

li {
border-radius: 6px;
background-color: var(--background-secondary) !important;
background-color: var(--background-secondary);

&>span {
width: 40px;
Expand Down
Loading

0 comments on commit 94ac0a9

Please sign in to comment.