Merge pull request #628 from juestchaos/main

更新
PKM-er · Jan 19, 2024 · 0fa7288 · 0fa7288
2 parents d1bf118 + 36578f2
commit 0fa7288
Show file tree

Hide file tree

Showing 22 changed files with 53 additions and 12 deletions.
diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidain样式-自定义文件夹图标.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidain样式-自定义文件夹图标.md
@@ -15,7 +15,7 @@ modified: 20230905153454
 ## 引言
 
 自定义优化文件管理器中的文件夹样式图标
-
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 实践
 
 ![cover](https://cdn.pkmer.cn/images/image-20230718005419020.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-Calendar插件的样式修改.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-Calendar插件的样式修改.md
@@ -17,7 +17,7 @@ modified: 20230905152858
 - 根据笔记 yaml 区域的 tag 内容，在日历展示不同的图标，比如把 tags 中的 emoji 符号展示在日历中。
 - tags 值包含 flagged 显示星标
 - 周末背景色加深
-
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 实现效果
 
  ![image.png](https://cdn.pkmer.cn/images/202305042319386.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-Callout样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-Callout样式.md
@@ -15,7 +15,7 @@ modified: 20230610160256
 ## 概述
 
 Obsidian 的 callout 因为可以自定义 class 所以配合 css 可以实现各种样式，属于 DIY 比较丰富的。下面举几个 callout 的改造例子，抛砖引玉。
-
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 样式举例
 
 ### 更改图标

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-Canvas样式的修改及增强卡片的显示效果.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-Canvas样式的修改及增强卡片的显示效果.md
@@ -14,8 +14,9 @@ modified: 20230723164619
 
 **Canvas 样式的修改及增强卡片的显示效果**：
 
-![Pasted image 20230722052842](https://cdn.pkmer.cn/images/Pasted%20image%2020230722052842.png!pkmer)
+![Obsidian样式-Canvas样式的修改及增强卡片的显示效果|1000](https://cdn.pkmer.cn/images/Pasted%20image%2020230722052842.png!pkmer)
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## Canvas 卡片局部 CSS 设置
 
 ### 卡片的 label 的 CSS 设置

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-canvas白板卡片中文字居中.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-canvas白板卡片中文字居中.md
@@ -16,6 +16,7 @@ modified: 20230623102841
 
 Obsidian 白板是去年末出来的新特性，凭借着极简的操作和易用的特性，受到了很多人喜爱。但是做为刚诞生的不久的功能，那么肯定会有一些“差强人意”的地方，比如没有各种自定义外观的设置。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 样式设置
 
 下面的方法可以帮助你调整白板中卡片的文字对齐情况，比如使用居中对齐方式

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-修改内链的链接颜色.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-修改内链的链接颜色.md
@@ -18,6 +18,7 @@ modified: 20230619201503
 
 但是默认主题的样式可能让你觉得不够习惯，如何自定义内链的样式呢？
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 方法
 
 1. 利用 Obsidian 特性，在设置 - 外观 中，直接调整 主题色，来实现切换内链链接的目的

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-如何让插入笔记中的图片水平居中.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-如何让插入笔记中的图片水平居中.md
@@ -0,0 +1,27 @@
+---
+uid: 20240119105759
+title: Obsidian 样式：如何让插入笔记中的图片水平居中
+tags: [Obsidian, 排版, 图片]
+description: Obsidian 样式：如何让插入笔记中的图片水平居中
+author: OS
+type: other
+draft: false
+editable: false
+modified: 20240119110532
+---
+
+# Obsidian 样式：如何让插入笔记中的图片水平居中
+
+## 概述
+
+这是不少同学在 PKMer 交流群问到的问题，这种排版方式也很符合很多同学在日常办公或者网页浏览时候常见的布局结构。所以把这段 CSS 固化下来，大家自己使用。
+
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
+
+```CSS
+div.internal-embed.media-embed.image-embed{
+	display: flex;
+	justify-content: center;
+    align-items: center;
+}
+```
diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-建立书籍电影的卡片化视图.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-建立书籍电影的卡片化视图.md
@@ -18,6 +18,7 @@ Obsidian 被很多人认为是“All in one”的绝佳选择，抛开主观感
 
 但是很多人因为不太容易入门折腾，对别人效果心驰神往，又对高门槛望而却步。比如今天要介绍的，将书籍、电影生成卡片墙。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 使用
 
 很多人有这样的需求，详细是看到 Minimal 和 Blue-Topaz 的一些示例库，其中好看的卡片墙。

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-待办完成样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-待办完成样式.md
@@ -18,6 +18,7 @@ modified: 20230628210647
 
 但是有些主题和样式总是不那么令人满意，下面内容就收集了相关的任务完成的想过效果信息
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 待办完成但是任务文字上没有删除线
 
 这是一些主题，或者主题中某些特殊配置方案引起的。

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-文件浏览器样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-文件浏览器样式.md
@@ -16,6 +16,7 @@ modified: 20230703104612
 
 Obsidian 自带的文件浏览器，样式单一，有很大的改造余地，通过 css 可以让文件夹变的更醒目更个性化。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 文件夹添加图标
 
 根据自己的文件夹名称，把名称写到 css 中就可以自定义文件夹图标，其中文件夹图标使用的是 svg 格式，[iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/) 这里有很多图标可供选择。css 中 svg 图标需要转成 base64 格式才能正确解析，通过这个网页实现转换 [SVG to CSS converter | SVG Backgrounds](https://www.svgbackgrounds.com/tools/svg-to-css/)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-标签页Tab样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-标签页Tab样式.md
@@ -16,6 +16,7 @@ modified: 20230616143919
 
 自从 Obsidian 实现了标签页后，美观度有一定的提升，标签页越来越像浏览器了，本文就是对标签页进行美化。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ### 按钮标签页样式
 
 应用片段的效果如图，可以看到默认的标签页变成了按钮样式。

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-标题栏样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-标题栏样式.md
@@ -16,6 +16,7 @@ modified: 20230616145408
 
 Obsidian 默认的标题栏会占用一部分屏幕空间，对笔记本用户来说，希望标题栏保留功能的同时尽可能不占用空间。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ### 悬浮标题栏样式 (显示阅读图标)
 
 应用片段的效果如图，可以看到默认的标题栏移到了左侧并处于悬浮状态。

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-特殊标签-让Markdown的文本多彩多色.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-特殊标签-让Markdown的文本多彩多色.md
@@ -18,6 +18,7 @@ Obsidian 作为 md 文档编辑器，在编辑书写文本的时候，无法让
 
 **“特殊标签”** ，这里是指类似 `#h/red` 这样的标签 [^1]。 直接给需要文字渲染预设的颜色，这样就省去了使用 html 的标签语法
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 效果
 
 ![8c647c459bf32f92b2451ed69034c39.png](https://cdn.pkmer.cn/images/8c647c459bf32f92b2451ed69034c39.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-编辑模式下当前行高亮.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-编辑模式下当前行高亮.md
@@ -16,6 +16,7 @@ modified: 20230602191810
 
 Obsidian 默认主题 在编辑模式下，没有当前行高亮功能，可以通过下面片段实现。为了达到更好的效果，可以在 Ob 中开启 `编辑器`-`显示行号` 设置项。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 样式效果
 
 ![image.png](https://cdn.pkmer.cn/images/202305061135730.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-编辑模式代码块显示行号.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-编辑模式代码块显示行号.md
@@ -16,6 +16,7 @@ modified: 20230715010726
 
 Obsidian 作为 md 文档编辑器，写代码块本来就不是强项，无法跟专业的代码编辑相比，比如代码块无法显示行号。本文通过 css 的方法实现在编辑模式下显示代码行号 ，但因为受限于 Obsidian 的渲染机制，如果代码长度超过一屏幕，代码行号会被重置，也算一个瑕疵。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 效果
 
 ![image.png](https://cdn.pkmer.cn/images/202307141144679.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-自定义大纲缩进线样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-自定义大纲缩进线样式.md
@@ -18,6 +18,7 @@ modified: 20230709151825
 
 但是默认样式的大纲线略微有些纤细，在深色主题下可能不够明显，除了通过彩色大纲线进行优化外，还可以优化本身的粗细来实现。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 实践
 
 - 可以选择一些带有大纲优化样式的主题

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-自定义待办图标.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-自定义待办图标.md
@@ -16,6 +16,7 @@ modified: 20230709151216
 
 `- [T] 示例待办样式`
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 效果
 
 ![Pasted image 20230610160521](https://cdn.pkmer.cn/images/Pasted%20image%2020230610160521.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-表格样式简明方法.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-表格样式简明方法.md
@@ -16,6 +16,7 @@ modified: 20230703133705
 
 Markdown 的表格展示形式一般比较单一，有必要通过 CSS 实现加强 Markdown 的表格展示效果。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 样式举例
 
 - 奇偶行背景色加深

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-调整图片不同布局样式.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-调整图片不同布局样式.md
@@ -1,18 +1,16 @@
 ---
 uid: 20231202002300
-title: Obsidian 样式 - 调整图片不同布局样式
-tags:
-  - 图片
-  - CSS自定义
-description: 将图片渲染为圆形或者控制图片在文本的左侧或者右侧，可组合。
+title: Obsidian 样式：调整图片不同布局样式
+tags: [图片, CSS自定义]
+description: Obsidian 样式 - 调整图片不同布局样式，将图片渲染为圆形或者控制图片在文本的左侧或者右侧，可组合。
 author: 余月鱼鸽
 type: other
 draft: false
 editable: false
-modified: 20231202002326
+modified: 20240119110622
 ---
 
-# Obsidian 样式 - 调整图片不同布局样式
+# Obsidian 样式：调整图片不同布局样式
 
 ## 1.css 来源
 
@@ -50,7 +48,6 @@ modified: 20231202002326
 
 > [!note] 3.两种效果混合使用
 > 例：插入图片后，在图片名后面添加 `#O` 设置图片为圆形后，后面添加 `L` 可控制图片出现在左侧；后面添加 `R` 可控制图片出现在右侧；格式为：`![[DSC04693.jpg#OL|200x200]]`
->
 
 **具体效果如下**：
 

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-超长文件名换行.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-超长文件名换行.md
@@ -13,6 +13,7 @@ modified: 20230809123145
 # Obsidian 样式：超长文件名换行或多行显示
 
 倘若笔记的命名一直简短那得多爽，但这是个不可能的事情，当我们的笔记命名过于长，又不想让左侧边栏占据整体画面空间太多，这时候就可以考虑到让文件名换行。
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 
 可以采用以下独立片段（snippets css）：
 

diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Obsidian网址前自动加图标.md b/10-Obsidian/Obsidian外观/CSS 片段/Obsidian网址前自动加图标.md
@@ -16,6 +16,7 @@ modified: 20230602192456
 
 这个片段可以在预览文档时对网址识别，并加上网站的 Logo，提高网址的识别度。
 
+- 通过使用 自定义样式来完成，使用方法参考 [[Obsidian的CSS代码片段]]
 ## 样式
 
 ![image.png](https://cdn.pkmer.cn/images/202305061057186.png!pkmer)

diff --git a/10-Obsidian/Obsidian外观/Obsidian的CSS代码片段.md b/10-Obsidian/Obsidian外观/Obsidian的CSS代码片段.md
@@ -81,6 +81,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 
 - [[Obsidian样式-图片点击长按放大]]
 - [[Obsidian样式-调整图片不同布局样式]]
+- [[Obsidian样式-如何让插入笔记中的图片水平居中]]
 
 ### callout