Merge pull request #903 from PandaNocturne/FAQ+Docs

8 Faq+1 docs

10-Obsidian/Obsidian外观/CSS 片段/Obsidian插件样式-修改note toolbar插件布局像cmenu那样显示.md

@@ -0,0 +1,111 @@
+---
+uid: 20241214165026
+title: Obsidian 插件样式 - 修改 note toolbar 插件布局像 cmenu 那样显示
+tags: []
+description: 
+author: 
+type: other
+draft: false
+editable: false
+modified: 20241214171631
+---
+
+# Obsidian 插件样式 - 修改 note toolbar 插件布局像 cmenu 那样显示
+
+Note Toolbar 它可以为不同的文件夹配置不同的工具栏，并能够在文件夹之间自适应切换，而且可以非常方便的编辑工具栏按钮。
+
+![24.12.14_Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示.md](https://cdn.pkmer.cn/images/202412141716376.png!pkmer)
+
+可以用下面的样式定制 Note Toolbar 布局以模拟 Cmenu 显示
+
+![24.12.14_Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示.md](https://cdn.pkmer.cn/images/202412141716981.png!pkmer)
+
+## 样式设置
+
+您可以将 Note Toolbar 的显示样式更改为类似于 Cmenu 插件的样式。这种设置仅在工具栏名称中包含“cmenu”时生效。
+
+![24.12.14_Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示.md](https://cdn.pkmer.cn/images/202412141716382.png!pkmer)
+
+---
+
+- 将工具栏的位置设置为“置顶（固定位置）”即可，其他设置保持默认。
+- 注意：目前，该设置暂不支持移动端，因此建议在移动设备上隐藏此工具栏。
+
+![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那样显示 */
+div[data-name *="cmenu"] {
+  z-index: var(--layer-status-bar);
+  position: absolute;
+  bottom: 60px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  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;
+  }
+
+  ul[role="menu"] {
+    width: fit-content;
+    max-width: 450px;
+    /* display: grid !important;
+    grid-template-columns: repeat(10, minmax(0, 1fr)); */
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    gap: 8px 5px !important;
+
+    padding: 10px !important;
+    transition: 200ms ease;
+    height: auto;
+    min-width: fit-content;
+    border-radius: 6px !important;
+
+    z-index: var(--layer-status-bar);
+    box-shadow: 0px 3px 30px rgb(31 38 135 / 15%);
+    margin: 30px !important;
+    border: 1px solid var(--background-modifier-border);
+
+    /* 添加毛玻璃效果 */
+    backdrop-filter: blur(10px) !important;
+    background-color: rgba(255, 255, 255, 0.3) !important;
+
+    li {
+      border-radius: 6px;
+      background-color: var(--background-secondary) !important;
+
+      &>span {
+        width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 6px !important;
+
+        svg {
+          transform: scale(1.2);
+        }
+
+      }
+
+      .cg-note-toolbar-item-label {
+        display: none;
+      }
+    }
+
+  }
+
+}
+```

10-Obsidian/Obsidian外观/OB样式调整基础课-CSS入门科普.md

@@ -116,7 +116,7 @@ modified_date: 2024-12-14T00:32
 }
 ```
 
-把这段 CSS 代码应用到你的 OB——如果不知道怎么应用，参考：[[241213_如何在OB内应用CSS修改|如何在OB内应用CSS修改]]。
+把这段 CSS 代码应用到你的 OB——如果不知道怎么应用，参考：[[如何在OB内应用CSS修改|如何在OB内应用CSS修改]]。
 
 应用后重复第一步里的流程：随便点击一个标题，查看它的样式：
 

10-Obsidian/Obsidian外观/Obsidian外观.md

@@ -43,4 +43,5 @@ Obsidian 提供一些和其他软件类似的基础外观设定和操作
 
 如果你想学习如何自己定义样式，那么你可以参考 [[Obsidian的CSS代码片段#自定义 CSS 简单上手指南]] 中的 Obsidian 建议样式指导。当然你可能还需要附带了解下，[[Obsidian的YAML和Frontmatter]]。[[设计极简风 Obsidian 主页]] 则提供了如何设计简单的主页方式。
 
-- [[OB样式调整基础课-CSS入门科普]]
+- [[OB样式调整基础课-CSS入门科普]]
+- [[如何在OB内应用CSS修改]]

10-Obsidian/Obsidian外观/Obsidian的CSS代码片段.md

@@ -7,7 +7,7 @@ author: OS,PKMer
 type: awesome
 draft: false
 editable: false
-modified: 20241102205801
+modified: 20241214170754
 ---
 
 # Obsidian 的 CSS 代码片段
@@ -227,12 +227,21 @@ Obsidian 还支持一种外部样式代码引用的方式。
 ### 插件样式
 
 - [[Obsidian样式-Calendar插件的样式修改]]
-- [[Obsidian样式-DataView在table视图下标签出现错位断裂的修复]]
-- [[Obsidian样式-简单更改Excalidraw工具栏布局]]
 - [[Obsidian样式-HoverEditor插件弹窗中隐藏Properties属性面板]]
 - [[Obsidian样式-建立书籍电影的卡片化视图]]
+
+#### Excalidraw
+
 - [[Obsidian样式-简单更改Excalidraw工具栏布局]]
+
+#### Dataview
+
 - [[Obsidian样式-可滚动的Dataview表格视图]]
+- [[Obsidian样式-DataView在table视图下标签出现错位断裂的修复]]
+
+#### Note toolbar
+
+- [[Obsidian插件样式-修改note toolbar插件布局像cmenu那样显示]]
 
 #### Thino
 
@@ -253,6 +262,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 
 - [[Obsidian样式-看板样式]]
 - [[Obsidian样式-Kanban魔改之四象限模式和康奈尔笔记模式]]
+
 ## 自定义 CSS 简单上手指南
 
 如果你正在设计你个性化的 CSS，你可以通过使用开发者工具来获得更多元素信息，提高设计效率。使用开发者工具

10-Obsidian/Obsidian外观/如何在OB内应用CSS修改.md

@@ -0,0 +1,63 @@
+---
+uid: 20241213233727
+title: 如何在 OB 内应用 CSS 修改
+tags: [Obsidian]
+description: 
+author: Moy
+type: other
+draft: false
+editable: false
+modified: 20241214173629
+
+---
+
+# 如何在 OB 内应用 CSS 修改
+
+> 如果你看到群友或者资料里写“用 CSS 改”，或者下载到了一个 CSS 文件，不知道如何使用——这篇文章能教你学会它！
+
+## CSS 文件
+
+CSS 片段其实就是这样一段的代码：
+
+````
+```css
+/* 隐藏标题栏文本 */
+.titlebar-text {
+  display: none;
+}
+
+```
+````
+
+想要在 OB 内应用 CSS，你需要做的是：
+
+1. 创建一个文本文档，命名为 `xxx.css` （后缀名用 `css` 而不是 `txt`）
+2. 用记事本或者任意编辑器打开，将 css 代码粘贴进去，保存
+
+（有现成的 css 文件可以直接前往下一步）
+
+## 启用 CSS
+
+在 OB 设置中找到 **外观**，往下翻到 **CSS 代码片段** 并点击最右边的**文件夹按钮**：
+
+![](https://cdn.pkmer.cn/images/202412141725823.webp!pkmer)
+
+将 CSS 文件放入打开的文件夹，然后回到 OB 点击文件夹边上的**刷新按钮**。
+
+对应 CSS 片段会出现在下方，打开开关即可生效。
+
+![](https://cdn.pkmer.cn/images/202412141725824.webp!pkmer)
+
+> 顺便，上一章里的那个 **隐藏标题栏文本** 其实就是个可用的小片段，可以用它做个测试！成功的话你的标题栏中文本会隐藏起来~
+
+## 修改 CSS 代码
+
+用文本编辑器修改对应的 CSS 文件之后，保存，OB 内会实时更新效果。
+
+在你调试一些样式的时候，**实时更新**的特性会很有帮助。
+
+另外，推荐使用像是 [VSCode](https://code.visualstudio.com/) 这样的代码编辑器，除了会提供语法高亮、自动补全外，还有像是颜色代码高亮、取色器之类的便利工具：
+
+![](https://cdn.pkmer.cn/images/202412141725825.webp!pkmer)
+
+如果想要尝试自己修改一些 OB 内的样式（例如标题颜色），可以查看：[[OB样式调整基础课-CSS入门科普]]。

10-Obsidian/Obsidian常见问题汇总/Obsidian主题常见问题.md

@@ -1,19 +1,13 @@
 ---
 uid: 20230601185441
 title: Obsidian 主题常见问题
-tags:
-  - Obsidian
-  - 主题
-  - 常见问题
-  - BT示例库
-  - Bluetopaz
-  - faq
+tags: [Obsidian, 主题, 常见问题, BT示例库, Bluetopaz, faq]
 description: Obsidian主题常见问题
 author: PKMer
 type: other
 draft: false
 editable: false
-modified: 20241209145940
+modified: 20241214172300
 ---
 
 # Obsidian 主题常见问题
@@ -24,6 +18,34 @@ modified: 20241209145940
 
 ## 样式的问题
 
+### 请问中英文能分别设置不同的字体吗？(by 熊猫)
+
+- 设置里面的字体设置是系统找不到对应字体时，切换下一个字体 最后就是默认字体的设置，因为不同设备可能没有当前字体。
+- 如果是中英文不同字体，可以把英文放在中文字体前面
+- 对中英文设置不同字体的标题的 CSS 的 CSS 片段：
+
+```css
+body:not(.heading-indicator-off)
+  :is(.markdown-rendered, .markdown-preview-view)
+  :is(h1, h2, h3, h4, h5, h6) {
+    font-family:'Times New Roman', 宋体 !important;
+}
+```
+
+### 有没有什么办法在 obsidian 里面实现子页面的效果 (by 熊猫)
+
+![24.12.14_ObsidianFAQ整理记录.md](https://cdn.pkmer.cn/images/202412141722276.png!pkmer)
+
+答：[Obsidian 插件：【Readme】Folder notes](https://pkmer.cn/show/2023080322184310)，插件作者：LostPaul，市场中有很多类似名称的插件，请下载该作者插件
+
+配合 Minimal 主题的 list-card 的 css 片段可以实现以下效果 [Obsidian 样式：minimal 主题 Cards 卡片布局](https://pkmer.cn/show/20230905221421)
+
+![24.12.14_ObsidianFAQ整理记录.md](https://cdn.pkmer.cn/images/202412141722693.png!pkmer)
+
+鼠标右键选择 `Creat folder overview`：
+
+![24.12.14_ObsidianFAQ整理记录.md](https://cdn.pkmer.cn/images/202412141722176.png!pkmer)
+
 ### ob 怎么用 tab 输入制表符而不是行首缩进呀？(by 熊猫)
 
 答：在设置面板的编辑器下方的使用制表符中开启
@@ -75,6 +97,14 @@ Obsidian 样式：minimal 主题 Cards 卡片布局，详情可以参考 PKMer 
 
 ### Bluetopz 主题和 BT 示例库
 
+### 菜单透明效果怎么设置? (by 熊猫)
+
+![24.12.14_ObsidianFAQ整理记录.md](https://cdn.pkmer.cn/images/202412141722129.png!pkmer)
+
+答：在 BT 主题下可以通过 Style Seting 中可以进行设置：
+
+![24.12.14_ObsidianFAQ整理记录.md](https://cdn.pkmer.cn/images/202412141722528.png!pkmer)
+
 #### 文档属性不显示内容 (by 熊猫)
 
 如图