diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md" "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md"
index 6968d8669..49b3f2fed 100644
--- "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md"
+++ "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md"
@@ -24,7 +24,7 @@ modified: 20231128100839
 - [[Obsidian多标签查询功能]]
 - [[Obsidian搭配 Vim Mode]]
 - [[文字转语音朗读你的笔记]]
-- [[个人图书馆的简单构建]]
+- [[利用Obsidian轻松构建个人图书馆]]
 - [[附件-豆瓣读书导入模板]]
 - [[Obsidian-为什么输入annotor的yaml模板时会被解析成分割线或文档属性]]
 - [[提升安卓手机使用obsidian笔记体验的几个软件]]
diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\344\275\231\346\234\210\351\261\274\351\270\275/\344\270\252\344\272\272\345\233\276\344\271\246\351\246\206\347\232\204\347\256\200\345\215\225\346\236\204\345\273\272.md" "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\344\275\231\346\234\210\351\261\274\351\270\275/\345\210\251\347\224\250Obsidian\350\275\273\346\235\276\346\236\204\345\273\272\344\270\252\344\272\272\345\233\276\344\271\246\351\246\206.md"
similarity index 71%
rename from "10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\344\275\231\346\234\210\351\261\274\351\270\275/\344\270\252\344\272\272\345\233\276\344\271\246\351\246\206\347\232\204\347\256\200\345\215\225\346\236\204\345\273\272.md"
rename to "10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\344\275\231\346\234\210\351\261\274\351\270\275/\345\210\251\347\224\250Obsidian\350\275\273\346\235\276\346\236\204\345\273\272\344\270\252\344\272\272\345\233\276\344\271\246\351\246\206.md"
index 647d0bdab..de23f933c 100644
--- "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\344\275\231\346\234\210\351\261\274\351\270\275/\344\270\252\344\272\272\345\233\276\344\271\246\351\246\206\347\232\204\347\256\200\345\215\225\346\236\204\345\273\272.md"
+++ "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\344\275\231\346\234\210\351\261\274\351\270\275/\345\210\251\347\224\250Obsidian\350\275\273\346\235\276\346\236\204\345\273\272\344\270\252\344\272\272\345\233\276\344\271\246\351\246\206.md"
@@ -1,16 +1,16 @@
 ---
 uid: 20231120182926
-title: 个人图书馆的简单构建
+title: 利用 Obsidian 轻松构建个人图书馆
 tags: []
-description: 个人图书馆的简单构建
+description: 利用 Obsidian 轻松构建个人图书馆
 author: 余月鱼鸽
 type: other
 draft: false
 editable: false
-modified: 20231121131828
+modified: 20231206000352
 ---
 
-# 个人图书馆的简单构建
+# 利用 Obsidian 轻松构建个人图书馆
 
 ## 个人图书馆简介
 
@@ -21,14 +21,14 @@ modified: 20231121131828
 1. 可以通过主页的快捷按钮打开【个人图书馆】
 2. 在个人图书馆中可以通过对 yaml 数据的筛选或排序快速定位书籍
 
-![Pasted image 20231120151341.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120151341.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120151341.png!pkmer)
 
 1. 点击书籍后，可以直接查看书籍的基础信息并进行阅读
-![Pasted image 20231120152059.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120152059.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120152059.png!pkmer)
 
 ## 构建方式
 
-![Pasted image 20231120165222.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120165222.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/9TP~LH%5DOE2NQUU39I9PD%7DJI.png!pkmer)
 
 个人图书馆的构建方式比较简单，大致为以下 4 个步骤：
 
@@ -49,7 +49,7 @@ modified: 20231121131828
 
 [[obsidian-douban-plugin]] 插件的作者内置了一套模板，按照说明复制、黏贴即可正常使用。为了美观考虑，我自己 DIY 了一套模板，具体可参考：[[附件-豆瓣读书导入模板]]
 
-![Pasted image 20231120165222.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120165222.png!pkmer)
+![个人图书馆的简单构建g](https://cdn.pkmer.cn/images/Pasted%20image%2020231120165222.png!pkmer)
 
 #### 1.2 过一遍设置即可导入书籍
 
@@ -57,19 +57,19 @@ douban 插件的设置默认为中文，这里就不展开了。
 
 1.2.1 设置完成后即可按【ctrl + p】在命令面板中输入【douban】即可开始信息导入。
 
-![Pasted image 20231120170512.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120170512.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120170512.png!pkmer)
 
 1.2.2 在搜索框输入书籍名称开始查询：
 
-![Pasted image 20231120170635.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120170635.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120170635.png!pkmer)
 
 1.2.3 选择自己想要的书籍版本即可录入书籍信息。
 
-![Pasted image 20231120170652.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120170652.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120170652.png!pkmer)
 
 1.2.4 录入效果：
 
-![Pasted image 20231120152059.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120152059.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120152059.png!pkmer)
 
 ### 2.构建图书馆雏形
 
@@ -81,19 +81,19 @@ douban 插件的设置默认为中文，这里就不展开了。
 
 2.1.1 按【ctrl + p】在命令面板中输入【projects】，选中【新建项目】即可
 
-![Pasted image 20231120171422.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120171422.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120171422.png!pkmer)
 
 2.1.2 projects 支持的信息源主要有 3 种，个人更推荐使用标签（上方提到的 [[附件-豆瓣读书导入模板]] 默认设置好标签）
 
-![Pasted image 20231120171553.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120171553.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120171553.png!pkmer)
 
 2.1.3 设置完毕后，可以获得一个类似这样只有表格的界面。这个时候在右侧的【 + 】点击创建【画册】即可。
 
-![Pasted image 20231120172140.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120172140.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120172140.png!pkmer)
 
 值得注意的是，书籍的图片需要有个数据源，如果没有设置的话，默认会为空（如下图所示）。上方提到的 [[附件-豆瓣读书导入模板]] 默认设置好了【封面】数据源，在画册界面进行勾选即可。
 
-![Pasted image 20231120171905.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120171905.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120171905.png!pkmer)
 
 ### 3.导入书籍（或构建库外链接）
 
@@ -113,16 +113,16 @@ douban 插件的设置默认为中文，这里就不展开了。
 
 4.1.1 按【ctrl + p】在命令面板中输入【button】，选中【button maker】即可
 
-![Pasted image 20231120173609.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120173609.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120173609.png!pkmer)
 
 4.1.2 按【button maker】面板中进行参数设置：选中【command】选项后，即可把我们命令库的操作变成按钮。
 
-![Pasted image 20231120174013.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120174013.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120174013.png!pkmer)
 
 4.1.3 内嵌按钮，按【ctrl + p】在命令面板中输入【button】，选中【insert inline button】选中按钮的 id（上一个步骤设置按钮时设置的 id），即可复制这个按钮。
 
-![Pasted image 20231120174152.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120174152.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120174152.png!pkmer)
 
 这个按钮可以嵌入到任何你想嵌入的文件内。我的侧边栏就使用了这样的按钮：
 
-![Pasted image 20231120174453.png](https://cdn.pkmer.cn/images/Pasted%20image%2020231120174453.png!pkmer)
+![个人图书馆的简单构建](https://cdn.pkmer.cn/images/Pasted%20image%2020231120174453.png!pkmer)
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-\346\240\207\351\242\230-\345\210\227\350\241\250-\345\233\276\347\211\207\347\276\216\345\214\226.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-\346\240\207\351\242\230-\345\210\227\350\241\250-\345\233\276\347\211\207\347\276\216\345\214\226.md"
new file mode 100644
index 000000000..c61191fa5
--- /dev/null
+++ "b/10-Obsidian/Obsidian\345\244\226\350\247\202/CSS \347\211\207\346\256\265/Obsidian\346\240\267\345\274\217-\346\240\207\351\242\230-\345\210\227\350\241\250-\345\233\276\347\211\207\347\276\216\345\214\226.md"	
@@ -0,0 +1,157 @@
+---
+uid: 20231205195020
+title: Obsidian 样式：标题&列表&图片美化 CSS
+tags: ['Obsidian', '美化', 'css']
+description: Obsidian 样式：标题&列表&图片美化 CSS
+author: wang
+type: other
+draft: false
+editable: false
+modified: 20231205201601
+---
+
+# Obsidian 样式：标题&列表&图片美化 CSS
+
+## 示意图
+
+![a7e31a027262284eabb722fd8dbb3cb.png](https://cdn.pkmer.cn/images/a7e31a027262284eabb722fd8dbb3cb.png!pkmer)
+
+![901ff817838cf2628fee0acaedf2bfa.png](https://cdn.pkmer.cn/images/901ff817838cf2628fee0acaedf2bfa.png!pkmer)
+
+## 美化细节
+
+- 图片美化
+	- 添加边框
+	- 添加原角
+	- 设置最大宽度
+- 列表美化
+	- 缩小列表间的缩进，更加紧凑（**也可以自己修改**
+	- 增加绿色左侧框
+	- 在一级标题之间添加分割线
+	- 二级以下标题字体减小
+- 标题美化
+	- 居中
+	- 色块背景
+	- 大小设置等，可自行添加后续标题（只设计了两个）
+- 加粗和引用美化
+	- 设置粗体的颜色和背景色
+	- 设计引用的背景
+
+## 代码
+
+```CSS
+/* 对引用进行设计 */
+blockquote {
+    border-left: 4px solid #4caf50!important; /* 鲜明的绿色边界 */
+    background-color: #e8f5e9!important; /* 浅绿色背景 */
+    color: #2e7d32!important; /* 引用文本的深绿色 */
+    padding: 13px; /* 内边距 */
+    margin: 16px 0; /* 外边距 */
+ }
+ 
+ /* 对粗体文字设置橙色文字和淡色背景*/
+ b, strong {
+     color: rgba(255,69,0,1); /* 橙红色 */;
+ background-color: #f0f0f0; /* 淡灰色背景 */
+     padding: 2px 4px; /* 加点内边距让背景更明显 */
+     border-radius: 2px; /* 可选：为背景添加圆角 */
+ }
+ 
+/* 标题1设计，左侧边，居中，红色背景*/
+ h1 {
+  color: black!important;
+   margin-bottom: 2em;
+   margin-right: 5px;
+   padding: 8px 15px;
+   letter-spacing: 2px;
+    /* 保持文字颜色为纯白色 */
+   border-left: 10px solid rgba(240,19,19,0.5); /* 可以根据需要调整边框颜色 */
+   background:rgba(240,19,19, 0.25);
+   border-radius: 5px;
+   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影，增强对比 */
+   box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.5); /* 盒子阴影，可根据需要调整 */
+   text-align: center;
+ }
+ 
+/* 标题2设计，左侧边，居中，绿色背景*/
+ h2 {
+  color: black!important;
+   margin-bottom: 2em;
+   margin-right: 5px;
+   padding: 8px 15px;
+   letter-spacing: 2px;
+    /* 保持文字颜色为纯白色 */
+   border-left: 10px solid rgba(102, 204, 153,0.5); /* 可以根据需要调整边框颜色 */
+    background:rgba(102, 204, 153, 0.25);
+   border-radius: 5px;
+   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影，增强对比 */
+   box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.5); /* 盒子阴影，可根据需要调整 */
+   text-align: center;
+ }
+ 
+  /* 图片设计，左侧边，居中，绿色背景*/
+img{
+  max-width:400px !important;
+  width: auto; /* 对于其他图片保持原始宽度 */
+  height: auto; /* 保持图片的高宽比 */
+  border: 3px solid #a8d08d; /* 边框颜色和宽度 */
+  padding: 0px; /* 边框内的填充 */
+  background-color: white; /* 边框内部的背景颜色 */
+  display: block;
+  margin: 16px auto; /* 图片上下的间距，并在页面中居中显示 */
+  box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /* 阴影效果 */
+  border-radius: 15px; /* 边框圆角 */
+}
+
+  /* 总体的边框设计，有序和无序的样式*/  
+ol {
+  list-style-type: decimal;
+  border-left: 5px solid #a8d08d; /* 设置边框，这里使用浅绿色 */
+  border-radius: 10px; /* 圆角边框 */
+  text-indent: -5px;
+}
+ul {
+  border-radius: 10px; /* 圆角边框 */
+  border-left: 5px solid #a8d08d; /* 设置边框，这里使用浅绿色 */
+}
+/* 去除第二级有序列表项的底部边框 */
+ul > li >ul > li ,
+ol > li >ol > li,
+ul > li >ul > li li,
+ol > li >ul > li li
+{
+border-bottom: none;
+border-left: none;
+padding-bottom: 0px;
+margin-left: 0px;
+}
+/* 先加上所有的分割线*/
+ol > li:not(:last-child):not(li ol > li) {
+border-bottom: 3px solid #ccc;
+padding-bottom: 10px;
+margin-bottom: 5px;
+padding-top: 10px;
+}
+/*先加上所有的分割线 */
+ul > li:not(:last-child):not(li ul > li) {
+border-bottom: 3px solid #ccc;
+padding-bottom: 20px;
+margin-bottom: 5px;
+margin-top: 5px;
+padding-top: 10px;
+}
+/*为第二级及以下的列表项去除边框 */
+ul li ul, ol li ol, 
+ul li ol, ol li ul ,
+ul li ul li ul,ul ul ul ul ul,
+ol ol ol,ol ol ol ol{
+border: none;
+padding-left: 0;
+margin-left: 0;
+font-size: 17px;
+}
+```
+
+## 使用方法
+
+- 见链接:[Obsidian 的 CSS 代码片段]( https://pkmer.cn/show/20230329145845 )
\ 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 a030e5153..917a3ead2 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"
@@ -3,12 +3,11 @@ uid: 20230329145845
 title: Obsidian 的 CSS 代码片段
 tags: [Obsidian, CSS, snippets, 外观, 主题]
 description: Obsidian 的 CSS 代码片段
-author: OS
+author: OS,PKMer
 type: awesome
 draft: false
 editable: false
-modified: 20231202185502
-aliases: [Obsidian css代码片段]
+modified: 20231206000816
 ---
 
 # Obsidian 的 CSS 代码片段
@@ -47,6 +46,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 
 ### 编辑器
 
+- [[Obsidian样式-标题-列表-图片美化]]
 - [[Obsidian样式-minimal主题Cards卡片布局]]
 - [[Obsidian样式-编辑模式下当前行高亮]]
 - [[Obsidian样式-加粗粗体样式优化]]