From 565049eb49232ff697eac771da1cda848fd981da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?=
<11595443+qiu-tenghuang@user.noreply.gitee.com>
Date: Wed, 18 Dec 2024 14:30:47 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=8D=8F=E5=8A=A9Moy=E6=8F=90=E4=BA=A41?=
=?UTF-8?q?=E7=AF=87=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...50\347\232\204\346\230\276\347\244\272.md" | 159 ++++++++++++++++++
...43\347\240\201\347\211\207\346\256\265.md" | 3 +-
2 files changed, 161 insertions(+), 1 deletion(-)
create mode 100644 "10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Moy/\344\274\230\345\214\226\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\347\232\204\346\230\276\347\244\272.md"
diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Moy/\344\274\230\345\214\226\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\347\232\204\346\230\276\347\244\272.md" "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Moy/\344\274\230\345\214\226\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\347\232\204\346\230\276\347\244\272.md"
new file mode 100644
index 00000000..6592d86a
--- /dev/null
+++ "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Moy/\344\274\230\345\214\226\346\226\207\344\273\266\346\265\217\350\247\210\345\231\250\347\232\204\346\230\276\347\244\272.md"
@@ -0,0 +1,159 @@
+---
+uid: 20241217204608
+title: 优化文件浏览器的显示
+tags: [CSS自定义, 💻教程, 文件夹管理]
+description: 优化文件浏览器的显示
+author: Moy
+type: other
+draft: false
+editable: false
+modified: 20241218142932
+aliases: []
+---
+
+# 优化文件浏览器的显示
+
+怎么打造一个干净且有条理的文件浏览器，效果如图：
+
+
+
+分为几个步骤：
+
+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 )
+
+## 调整排序
+
+有人可能会好奇，为啥我的文件夹没有按照首字母排序。
+
+其实它们是有数字前缀的：
+
+
+
+只不过我用了 **FolderNotes** 插件，将文件夹和笔记绑定在一起；
+
+同时，用 **Front matter title** 插件，给文件夹笔记添加了用于显示的标题：
+
+
+
+这样就能实现图上的效果了。
+
+
+
+*Front matter title 插件可以在各个地方修改笔记的显示名称*
+
+题外话：
+
+其实有一个 **Nav Weight** 插件可以根据元数据给笔记排序，也可以试试。
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md"
index 63fe630e..4dc1eb66 100644
--- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md"
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md"
@@ -7,7 +7,7 @@ author: OS,PKMer
type: awesome
draft: false
editable: false
-modified: 20241214170754
+modified: 20241218143024
---
# Obsidian 的 CSS 代码片段
@@ -161,6 +161,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
- [[Obsidian样式-超长文件名换行]]
- [[Obsidian样式-分割文件管理器]]
- [[Obsidian样式-粘性文件夹(Sticky Folder)]]
+- [[优化文件浏览器的显示]]
### 段落
From bfb5d5b53f284759d48ff16b56ccfc15a1cdc3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?=
<11595443+qiu-tenghuang@user.noreply.gitee.com>
Date: Wed, 18 Dec 2024 14:56:21 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B9=8B=E5=89=8D?=
=?UTF-8?q?=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...43\346\240\267\346\230\276\347\244\272.md" | 33 +-
...24\350\256\260\346\250\241\345\274\217.md" | 477 +++++++++++++++++-
2 files changed, 475 insertions(+), 35 deletions(-)
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md"
index c89a2a45..4ff21c13 100644
--- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md"
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md"
@@ -7,7 +7,7 @@ author:
type: other
draft: false
editable: false
-modified: 20241214171631
+modified: 20241218143252
---
# Obsidian 插件样式 - 修改 note toolbar 插件布局像 cmenu 那样显示
@@ -18,7 +18,7 @@ Note Toolbar 它可以为不同的文件夹配置不同的工具栏，并能够
可以用下面的样式定制 Note Toolbar 布局以模拟 Cmenu 显示
-
+
## 样式设置
@@ -28,25 +28,25 @@ Note Toolbar 它可以为不同的文件夹配置不同的工具栏，并能够
---
-- 将工具栏的位置设置为“置顶（固定位置）”即可，其他设置保持默认。
+- 将工具栏的位置设置为“置顶（固定位置）”， 样式只保留显示边框，其他设置保持默认，如下图所示。
- 注意：目前，该设置暂不支持移动端，因此建议在移动设备上隐藏此工具栏。
> [!tip] 自带的分割符和行号符可以正常运行
-> 
## 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 {
@@ -54,13 +54,15 @@ div[data-name *="cmenu"] {
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;
@@ -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;
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Kanban\351\255\224\346\224\271\344\271\213\345\233\233\350\261\241\351\231\220\346\250\241\345\274\217\345\222\214\345\272\267\345\245\210\345\260\224\347\254\224\350\256\260\346\250\241\345\274\217.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Kanban\351\255\224\346\224\271\344\271\213\345\233\233\350\261\241\351\231\220\346\250\241\345\274\217\345\222\214\345\272\267\345\245\210\345\260\224\347\254\224\350\256\260\346\250\241\345\274\217.md"
index ba5c8cf4..631d0eea 100644
--- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Kanban\351\255\224\346\224\271\344\271\213\345\233\233\350\261\241\351\231\220\346\250\241\345\274\217\345\222\214\345\272\267\345\245\210\345\260\224\347\254\224\350\256\260\346\250\241\345\274\217.md"
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-Kanban\351\255\224\346\224\271\344\271\213\345\233\233\350\261\241\351\231\220\346\250\241\345\274\217\345\222\214\345\272\267\345\245\210\345\260\224\347\254\224\350\256\260\346\250\241\345\274\217.md"
@@ -7,29 +7,207 @@ author: 熊猫别熬夜
type: other
draft: false
editable: false
-modified: 20241124223836
+modified: 20241218145504
---
# Obsidian 样式 -Kanban 魔改之四象限模式和康奈尔笔记模式
突发奇想改了下 Kanban 的布局样式，默认是无差异的，依赖 CssClasses 的特性给不同看板定义不同的布局：
-
+
-## 可提供的模式
+## 布局的模式
+
+可提供的布局模式：
- **四象限模式**：定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-four-quadrants`。
- - 
- - 配合 Task 的任务查询 [^1]，结果如下：
- - 
+ - 
+ - 配合 Task 的任务查询^[[[2024-04-30_利用 QuickAdd+Modal Form 表单创建一个便捷的任务 (Task) 编辑器]]]，结果如下：
+ - 
- **康奈尔笔记模式**：定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-cornell-note`。
- - 
- - - 这种模式比较定制化，只适用于 3 个卡片的布局，当然也可以手动修改布局，采用的是网格布局，可以自行修改为其他布局类型 (需要点 CSS 基础)。
+ - 
+ - 这种模式比较定制化，只适用于 3 个卡片的布局，当然也可以手动修改布局，采用的是网格布局，可以自行修改为其他布局类型 (需要点 CSS 基础)。
- 编辑效果体验：除了保存有点不习惯，其他的在 Kanban 中编辑与正常编辑基本无差别，Kanban 编辑中可以使用自定义快捷键和嵌入图片文档之类的。
+### 四象限模式
+
+- 定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-four-quadrants`。
+ - 
+- 定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-four-quadrants2`。
+ - 
+
+### 康奈尔笔记模式
+
+- 定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-cornell-note`。
+ - 
+- 定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-cornell-note2`。
+ - 
+
+### 每周任务周报
+
+- 定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-weekly-report`。
+ - 配合 tasks 查询语法搭建的，参考的 [taskCalendar 1](https://github.com/702573N/Obsidian-Tasks-Calendar?tab=readme-ov-file) 的界面：
+ - 
+
+每周周报 Tasks 查询文档：
+
+````md
+---
+
+kanban-plugin: board
+cssclasses:
+ - kanban-weekly-report
+
+---
+
+## 星期一
+
+- [ ] ```tasks
+ (done on this Monday) OR (happens on this Monday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+## 星期二
+
+- [ ] ```tasks
+ (done on this Tuesday) OR (happens on this Tuesday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+## 星期三
+
+- [ ] ```tasks
+ (done on this Wednesday) OR (happens on this Wednesday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+## 星期四
+
+- [ ] ```tasks
+ (done on this Thursday) OR (happens on this Thursday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+## 星期五
+
+- [ ] ```tasks
+ (done on this Friday) OR (happens on this Friday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+## 星期六
+
+- [ ] ```tasks
+ (done on this Saturday) OR (happens on this Saturday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+## 星期天
+
+- [ ] ```tasks
+ (done on this Sunday) OR (happens on this Sunday)
+ show tree
+ group by status.name reverse
+ group by filename
+ short mode
+ ```
+
+
+
+
+%% kanban:settings
+```
+{"kanban-plugin":"board","list-collapse":[false,false,false,false,false,false,false],"new-card-insertion-method":"prepend-compact"}
+```
+%%
+````
+
+### 堆叠模式
+
+- 定义当前 Kanban 文件的 cssclasses 属性值为：`kanban-stack`。
+ - 
+
+原文：[【Kanban】中国图书分类法简表.md · GitHub 7](https://gist.github.com/PandaNocturne/80ff0bd4dc8d5f9dd9ed9f1e1b956194)
+
+参考： [中国图书馆分类法简表-清华大学图书馆 (tsinghua.edu.cn)](https://lib.tsinghua.edu.cn/info/1011/4429.htm)
+
+可以结合 FolderNotes+ 它的查询语法管理自己的领域分类：
+
+
+
+## 卡片模式
+
+Kanban 子项目的卡片化展示，用于美化和减少占位。
+
+
+
+主要用以下 2 种模式：`kanban-col-items`、`kanban-card-items`。
+
+这 2 种模式在四象限模式以及自带的 List 模式下有奇效。
+
+- 四象限模式推荐用 `kanban-col-items`
+- 自带的 List 模式推荐用 `kanban-card-items`
+
+### Kanban 卡片子项目模式
+
+- cssclasses 值为 `kanban-card-items`
+ - 
+
+### Kanban 子项目分栏模式
+
+- cssclasses 值为 `kanban-col-items`
+ - 
+
## CSS Snippets
```css
+/* https://github.com/mgmeyers/obsidian-style-settings */
+/* @settings
+
+name: Kanban Styles
+id: kanban-styles
+settings:
+ - id: kanban-fold
+ title: 折叠Kanban子项目
+ type: class-toggle
+ addCommand: true
+ - id: kanban-card-items
+ title: Kanban卡片子项目
+ type: class-toggle
+ addCommand: true
+*/
+
+/* !折叠模式 */
+.kanban-fold .kanban-plugin__lane-wrapper .kanban-plugin__item-title-wrapper:not(:hover) {
+ .kanban-plugin__markdown-preview-view>:not(:first-child) {
+ display: none;
+ }
+}
+
/* !在左右侧边栏中不显示工具栏 */
.workspace-split.mod-horizontal.mod-right-split,
.workspace-split.mod-horizontal.mod-left-split {
@@ -44,8 +222,36 @@ modified: 20241124223836
}
}
-/* !正常堆叠模式 */
-.kanban-plugin {
+/* ! 堆叠模式 */
+.kanban-stack.kanban-plugin {
+ background-color: var(--background-primary);
+
+ .kanban-plugin__board>div {
+ display: grid;
+ width: 100%;
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+ gap: 10px 10px;
+ overflow: auto;
+ }
+
+ .kanban-plugin__lane-wrapper {
+ &.collapse-horizontal {
+ max-width: fit-content;
+ }
+
+ &:not(.collapse-horizontal) {
+ min-width: 100%;
+ max-height: 300px;
+ }
+ }
+
+ .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
+ display: none;
+ }
+}
+
+/* !Kanban：四象限模式*/
+.kanban-four-quadrants.kanban-plugin {
background-color: var(--background-primary);
.kanban-plugin__board>div {
@@ -58,21 +264,24 @@ modified: 20241124223836
overflow: auto;
}
+
.kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
display: none;
}
-}
-/* !Kanban：四象限模式 */
-.kanban-four-quadrants.kanban-plugin .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
- flex: 0 0 calc(50% - 20px);
- height: calc(50% - 20px);
- overflow: auto;
+ .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
+ flex: 0 0 calc(50% - 20px);
+ height: calc(50% - 20px);
+ overflow: auto;
+ }
}
+
+
/* !Kanban： 康奈尔笔记 */
.kanban-cornell-note.kanban-plugin {
background-color: var(--background-primary);
+
.kanban-plugin__board>div {
display: grid;
width: 100%;
@@ -88,13 +297,16 @@ modified: 20241124223836
.kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
min-width: 100%;
min-height: 100%;
- overflow: auto;
+ /* overflow: auto; */
+
&:nth-child(1) {
grid-area: cue;
}
+
&:nth-child(2) {
grid-area: note;
}
+
&:nth-child(3) {
grid-area: summary;
}
@@ -115,10 +327,235 @@ modified: 20241124223836
}
}
}
+
+
+/* !Kanban： 康奈尔笔记2 */
+.kanban-cornell-note2.kanban-plugin {
+ background-color: var(--background-primary);
+
+ .kanban-plugin__board>div {
+ display: grid;
+ width: 100%;
+
+ grid-template-columns: 2fr 8fr;
+ grid-template-rows: 3fr 3fr 2fr;
+ grid-template-areas:
+ "cue note"
+ "cue note"
+ "summary summary";
+ gap: 20px;
+ }
+
+ .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
+ min-width: 100%;
+ min-height: 100%;
+
+ &:nth-child(1) {
+ grid-area: cue;
+ }
+
+ &:nth-child(2) {
+ grid-area: note;
+ }
+
+ &:nth-child(3) {
+ grid-area: summary;
+ }
+ }
+
+ /* 隐藏按钮 */
+ .kanban-plugin__lane-collapse,
+ .kanban-plugin__item-prefix-button-wrapper,
+ /* 隐藏占位符 */
+ .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
+ display: none;
+ }
+
+ /* 字体大小设置 */
+ .kanban-plugin__item-content-wrapper {
+ .markdown-preview-view>*, .cm-content>* {
+ font-size: 22px !important;
+ }
+ }
+}
+
+/* !Kanban： 四象限任务板模式2 */
+.kanban-four-quadrants2.kanban-plugin {
+ background-color: var(--background-primary);
+
+ .kanban-plugin__board>div {
+ display: grid;
+ width: 100%;
+
+ grid-template-columns: 1fr 2fr 2fr;
+ grid-template-rows: 1fr 1fr;
+ grid-template-areas:
+ "area0 area1 area2"
+ "area0 area3 area4";
+ gap: 20px;
+ }
+
+ .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
+ min-width: 100%;
+ min-height: 100%;
+ overflow: auto;
+
+ &:nth-child(1) {
+ grid-area: area0;
+ }
+
+ &:nth-child(2) {
+ grid-area: area1;
+ }
+
+ &:nth-child(3) {
+ grid-area: area2;
+ }
+
+ &:nth-child(4) {
+ grid-area: area3;
+ }
+
+ &:nth-child(5) {
+ grid-area: area4;
+ }
+ }
+
+ /* 隐藏按钮 */
+ .kanban-plugin__lane-collapse,
+ /* 隐藏占位符 */
+ .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
+ display: none;
+ }
+}
+
+
+/* !Kanban： 每周任务周报 */
+.kanban-weekly-report.kanban-plugin {
+ background-color: var(--background-primary);
+
+ .kanban-plugin__board>div {
+ display: grid;
+ width: 100%;
+ max-width: 100%;
+ grid-template-columns: repeat(10, 1fr);
+ grid-template-rows: 2fr 1fr;
+ gap: 10px;
+ }
+
+ .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
+ min-width: 100%;
+ min-height: 100%;
+ grid-column: span 2;
+
+ &:nth-child(6) {
+ grid-column: span 5;
+ }
+
+ &:nth-child(7) {
+ grid-column: span 5;
+ }
+ }
+
+
+ /* 隐藏占位符 */
+ .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
+ display: none;
+ }
+
+ .kanban-plugin__item-prefix-button-wrapper {
+ visibility: hidden;
+ width: 0.8rem;
+ }
+}
+
+/* ! Kanban：卡片子项目模式 */
+.kanban-card-items .kanban-plugin,
+.kanban-card-items.kanban-plugin {
+ background-color: var(--background-primary);
+
+ /* 只当标题有标签是才启用子项目卡片模式 */
+ /* .kanban-plugin__lane:has(.kanban-plugin__lane-title-text a.tag) */
+ .kanban-plugin__lane-items {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 10px;
+ height: calc(100% - 40px);
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ align-content: flex-start;
+ justify-items: stretch;
+ align-items: stretch;
+
+ .kanban-plugin__item-wrapper {
+
+ /* border: 2px solid #ee0000; */
+
+ .kanban-plugin__item {
+ height: 100%;
+ display: grid;
+
+ .kanban-plugin__item-title-wrapper {
+ /* justify-self: stretch;
+ align-self: stretch; */
+ /* min-height: 150px; */
+ overflow: auto;
+ display: flex;
+ justify-content: center;
+ align-items: start;
+ }
+ }
+
+ }
+ }
+}
+
+/* ! Kanban：子项目分栏模式 */
+.kanban-col-items.kanban-plugin {
+ background-color: var(--background-primary);
+
+ .kanban-plugin__lane-items {
+ display: block;
+ column-width: 280px;
+ column-gap: 0.5rem;
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ .kanban-plugin__item-wrapper {
+ max-width: 100%;
+
+ .kanban-plugin__item {
+ display: grid;
+
+ .kanban-plugin__item-title-wrapper {
+ overflow: auto;
+ display: flex;
+ justify-content: center;
+ align-items: start;
+ }
+ }
+
+ }
+ }
+}
+
+/* !补丁 */
+.kanban-plugin__lane {
+ padding-bottom: 10px;
+}
+
+
+.kanban-plugin__lane-wrapper.collapse-horizontal {
+ max-width: fit-content !important;
+}
+
+.kanban-plugin__item-input {
+ min-height: 100px;
+}
```
## Reference
-- 24.06.12_Obsidian 样式 -Kanban 插件的堆叠模式 by Huajin
-
-[^1]: [[基于 QuickAdd+Modal Form的任务 (Task) 编辑器]]
\ No newline at end of file
+- 240612_Obsidian 样式 -Kanban 插件的堆叠模式 by Huajin
+- [[基于 QuickAdd+Modal Form的任务 (Task) 编辑器]]
\ No newline at end of file
From be171666fbd67ed64e43120cf713aba2d35f8bc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?=
<11595443+qiu-tenghuang@user.noreply.gitee.com>
Date: Wed, 18 Dec 2024 15:07:17 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E6=8A=95=E7=A8=BF2=E7=AF=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...32\346\240\217\345\270\203\345\261\200.md" | 32 +++++
...07\345\274\217\345\270\203\345\261\200.md" | 113 ++++++++++++++++++
...43\347\240\201\347\211\207\346\256\265.md" | 2 +
3 files changed, 147 insertions(+)
create mode 100644 "10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-MySnippets\347\232\204\345\244\232\346\240\217\345\270\203\345\261\200.md"
create mode 100644 "10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\346\240\267\345\274\217-\350\256\276\347\275\256\347\225\214\351\235\242\347\275\221\346\240\274\345\215\241\347\211\207\345\274\217\345\270\203\345\261\200.md"
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-MySnippets\347\232\204\345\244\232\346\240\217\345\270\203\345\261\200.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-MySnippets\347\232\204\345\244\232\346\240\217\345\270\203\345\261\200.md"
new file mode 100644
index 00000000..78dafab5
--- /dev/null
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-MySnippets\347\232\204\345\244\232\346\240\217\345\270\203\345\261\200.md"
@@ -0,0 +1,32 @@
+---
+uid: 20241218145625
+title: Obsidian 插件样式 -MySnippets 的多栏布局
+tags: [CSS自定义, 插件样式]
+description: 用于定义 MySnippet 插件的状态栏菜单及其内部滚动菜单，并提供一个流畅的列布局，同时确保菜单在屏幕上有一个合理的最大高度和最小宽度。
+author: 熊猫别熬夜
+type: other
+draft: false
+editable: false
+modified: 20241218145833
+---
+
+# Obsidian 插件样式 -MySnippets 的多栏布局
+
+
+
+用于定义 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%;
+ }
+
+}
+```
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\346\240\267\345\274\217-\350\256\276\347\275\256\347\225\214\351\235\242\347\275\221\346\240\274\345\215\241\347\211\207\345\274\217\345\270\203\345\261\200.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\346\240\267\345\274\217-\350\256\276\347\275\256\347\225\214\351\235\242\347\275\221\346\240\274\345\215\241\347\211\207\345\274\217\345\270\203\345\261\200.md"
new file mode 100644
index 00000000..e9899bf3
--- /dev/null
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\346\240\267\345\274\217-\350\256\276\347\275\256\347\225\214\351\235\242\347\275\221\346\240\274\345\215\241\347\211\207\345\274\217\345\270\203\345\261\200.md"
@@ -0,0 +1,113 @@
+---
+uid: 20241218150423
+title: Obsidian 样式 - 设置界面网格卡片式布局
+tags: [CSS美化, 设置面板]
+description: 将 Obsidian 的设置界面的快捷键、核心插件、第三方插件的显示样式变为卡片模式。
+author: 熊猫别熬夜,Huajin
+type: other
+draft: false
+editable: false
+modified: 20241218150642
+---
+
+# Obsidian 样式 - 设置界面网格卡片式布局
+
+本样式参考了 Huajin 的 [obsidian-settings-management](https://github.com/xhuajin/obsidian-settings-management/) 插件的样式，将 Obsidian 的设置界面的快捷键、核心插件、第三方插件的显示样式变为卡片模式。
+
+| 快捷键 | 核心插件 | 第三方插件 |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| 
| 
| 
|
+
+## Style Setting 设置
+
+在 Style Setting 设置中可以关闭某个界面的卡片化。
+
+
+
+```css
+
+/* @settings
+
+name: Obsidian-Setting-Grid-Layout
+description: 一个用于 Obsidian 设置页面的网格布局
+id: obsidian-setting-grid-layout
+settings:
+ -
+ id: Grid-Layout-info-text
+ title: Information
+ description: "本样式参考了Huajin的[obsidian-settings-management](https://github.com/xhuajin/obsidian-settings-management/)插件的样式。"
+ type: info-text
+ markdown: true
+ -
+ id: hotkey-layout
+ title: 关闭快捷键列表卡片化
+ type: class-toggle
+ default: false
+ -
+ id: plugin-layout
+ title: 关闭核心插件列表卡片化
+ type: class-toggle
+ default: false
+ -
+ id: installed-plugin-layout
+ title: 关闭第三方插件列表卡片化
+ type: class-toggle
+ default: false
+*/
+
+/* 设置界面的宽度设置 */
+.modal.mod-settings.mod-settings.mod-settings.mod-settings {
+ /* min-width: 1200px !important; */
+}
+
+/* 2024-12-17 参考Huajin的obsidian-settings-management插件的样式 https://github.com/xhuajin/obsidian-settings-management/blob/master/src/styles.css */
+/* 快捷键列表 */
+body:not(.hotkey-layout) .vertical-tabs-container .vertical-tab-content>.hotkey-list-container,
+/* 核心插件列表 */
+body:not(.plugin-layout) .vertical-tabs-container .plugin-list-plugins>div:not(.setting-item),
+/* 第三方插件列表 */
+body:not(.installed-plugin-layout) .vertical-tabs-container .installed-plugins-container {
+ display: grid;
+ gap: 15px;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+
+ /* 子项目设置 */
+ .setting-item:not(:has(~.setting-item-heading)):not(.setting-item-heading) {
+ border: 1px solid var(--background-modifier-border);
+ border-radius: 8px;
+ padding: 1em;
+ }
+
+ .setting-item:is(:has(~.setting-item-heading), .setting-item-heading) {
+ grid-column: 1 / -1;
+ }
+
+ .setting-item-info {
+
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ }
+}
+
+/* 第三方插件列表 按钮微调*/
+.installed-plugins-container .setting-item.mod-toggle {
+ position: relative;
+ display: flex;
+ flex-flow: column nowrap;
+
+ .setting-item-info {
+ flex: 2 0 auto;
+ width: 100%;
+ margin-left: 10px;
+ }
+}
+
+.installed-plugins-container .setting-item-control {
+ flex: 0;
+ display: flex;
+ flex-flow: row nowrap;
+ width: 100%;
+ right: 0px;
+ justify-content: right;
+}
+```
\ No newline at end of file
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md"
index 4dc1eb66..346789f2 100644
--- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md"
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/Obsidian\347\232\204CSS\344\273\243\347\240\201\347\211\207\346\256\265.md"
@@ -56,6 +56,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
- [[Obsidian样式-给Obsidian设置护眼的暖色模式]]
- [[Obsidian样式-多行标签页堆叠显示]]
- [[Obsidian样式-全宽的图谱搜索框样式]]
+- [[Obsidian样式-设置界面网格卡片式布局]]
### 大纲 (Outline)
@@ -230,6 +231,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
- [[Obsidian样式-Calendar插件的样式修改]]
- [[Obsidian样式-HoverEditor插件弹窗中隐藏Properties属性面板]]
- [[Obsidian样式-建立书籍电影的卡片化视图]]
+- [[Obsidian插件样式-MySnippets的多栏布局]]
#### Excalidraw
From 8fba5df173dbb802f90b5df6219260d4f2c0121e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?=
<11595443+qiu-tenghuang@user.noreply.gitee.com>
Date: Wed, 18 Dec 2024 15:17:20 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BD=B2=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...nu\351\202\243\346\240\267\346\230\276\347\244\272.md" | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md" "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md"
index 4ff21c13..948d6d74 100644
--- "a/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md"
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\217\222\344\273\266\346\240\267\345\274\217-\344\277\256\346\224\271note toolbar\346\217\222\344\273\266\345\270\203\345\261\200\345\203\217cmenu\351\202\243\346\240\267\346\230\276\347\244\272.md"
@@ -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: 20241218143252
+modified: 20241218151635
---
# Obsidian 插件样式 - 修改 note toolbar 插件布局像 cmenu 那样显示