Merge pull request #855 from juestchaos/main

更新

10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-限制笔记内的所有图片宽度.md

@@ -0,0 +1,87 @@
+---
+uid: 20240829210510
+title: Obsidian 样式：限制笔记内的图片宽度（可点击放大）
+tags: [Obsidian, css, 图片]
+description: Obsidian 样式：限制笔记内的图片宽度（可点击放大）
+author: Moy
+type: other
+draft: false
+editable: false
+modified: 20240905143349
+modified_date: 2024-08-29T21:31
+---
+
+# Obsidian 样式：限制笔记内的图片宽度（可点击放大）
+
+一个简单的 css，分享一下。
+
+在笔记里有很多图片的时候，图片占用的空间过大，导致一页能显示的内容有限。
+
+利用这个样式可以批量限制这个笔记内所有图片的大小，在需要的时候点击图片进行放大。
+
+应用前：
+
+![c44becbc5021233fd3341ea9bfe61fb5.png|600](https://cdn.pkmer.cn/images/c44becbc5021233fd3341ea9bfe61fb5.png!pkmer)
+
+应用后：
+
+![25f8ba5c825f4f16e9dcbe27e0f01782.png|600](https://cdn.pkmer.cn/images/25f8ba5c825f4f16e9dcbe27e0f01782.png!pkmer)
+
+css 代码：
+
+````css
+/* 特定页面的图片限宽 */
+/* 限制最大宽度为 400px */
+.small-image img {
+    max-width: 400px !important;
+    max-height: 400px !important;
+    transition: max-width 0.2s ease, transform 0.3s ease;
+}
+
+/* 第一种方法：恢复最大宽度（高度也会随之变化） */
+.small-image img:active {
+    max-width: 100% !important;
+    max-height: 100% !important;
+}
+
+/* 第二种方法：放大到1.5倍（高度不变） */
+/* 并添加阴影 */
+/* 
+.small-image img:active {
+    transform: scale(1.5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+} 
+*/
+
+````
+
+使用方法：
+
+1. 把上面的 css 代码放进 CSS Snippets（样式片段）
+2. 在需要限制图片宽度的笔记里，添加元数据 `cssclasses: small-image`
+
+提供了两种变换的方法，任选一种即可。
+
+默认是第一种，需要第二种话把第一种注释掉，然后取消第二种的注释。
+
+效果演示：
+
+第一种方法：
+
+![2055ce959a185237196970bd79ebed12.gif|660](https://cdn.pkmer.cn/images/2055ce959a185237196970bd79ebed12.gif!pkmer)
+
+第二种方法：
+
+![0430150484c6c5167d8797bbb7a53106.gif|660](https://cdn.pkmer.cn/images/0430150484c6c5167d8797bbb7a53106.gif!pkmer)
+
+主要区别在于第二种方法**高度不变，下方的内容不会随之移动**。
+
+另外，在阅读模式下，第二种方法会更好看些，图片会浮在文本上方：
+
+## 自留
+
+示例图片：
+
+![428957d3762ea3c76a0d49874c6e28e3.png|660](https://cdn.pkmer.cn/images/428957d3762ea3c76a0d49874c6e28e3.png!pkmer)
+
+![0782ca83be7535d2605dfef9837425ac.jpg|660](https://cdn.pkmer.cn/images/0782ca83be7535d2605dfef9837425ac.jpg!pkmer)

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

@@ -7,7 +7,7 @@ author: OS,PKMer
 type: awesome
 draft: false
 editable: false
-modified: 20240426093024
+modified: 20240905145641
 ---
 
 # Obsidian 的 CSS 代码片段
@@ -107,6 +107,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 - [[Obsidian样式-调整图片不同布局样式]]
 - [[Obsidian样式-如何让插入笔记中的图片水平居中]]
 - [[Obsidian样式-hover出现图片描述]]
+- [[Obsidian样式-限制笔记内的所有图片宽度]]
 
 ### callout
 

10-Obsidian/Obsidian社区插件/Obsidian社区插件.md

@@ -493,6 +493,7 @@ Obsidian 最具吸引力的特点之一，就是它拥有一个丰富的、逐
 - [[obsidian-tracker]]：将笔记中的变化收集起来，并且提供不同预设的图形分析模板
 - [[size-history]]：用一个简单图表来展示查看仓库中笔记的增长曲线
 - [[typing-speed]]：在状态栏显示你的输入速度
+- [[battery-indicator]]：给你的 Obsidian 添加电池电量指示器
 
 ### 标签页管理
 

10-Obsidian/Obsidian社区插件/battery-indicator.md

@@ -0,0 +1,44 @@
+---
+uid: 20240907212209
+title: Obsidian 插件：Batteryindicator 给你的 Obsidian 添加电池电量指示器
+tags: ['obsidian插件']
+description: Batteryindicator 给你的 Obsidian 添加电池电量指示器
+author: OS
+type: other
+draft: false
+editable: false
+modified: 20240907213734
+---
+
+# Obsidian 插件：Batteryindicator 给你的 Obsidian 添加电池电量指示器
+
+## 概述
+
+这个插件很简单，面向的用户群体，偏向全屏使用 Obsidian 的用户，当你全屏使用时可以看到自己移动设备的电量指示器。
+
+> [!Note] 插件名片
+> - 插件名称：Kacper Darowsk
+> - 插件说明：给 Obsidian 的状态栏添加电池电量指示器
+> - 插件分类：[' 插件管理 ', 'obsidian 插件 ']
+> - 插件分类：[' 插件管理 ', 'obsidian 插件 ']
+> - 项目地址：[点我访问](https://github.com/Opisek/obsidian-battery-indicator/)
+> - 国内下载地址：[下载安装](https://pkmer.cn/products/plugin/pluginMarket/?battery)
+
+## 效果&特性
+
+![](https://cdn.pkmer.cn/images/20240907212547.png!pkmer)
+
+- 默认会在 Obsidian 状态栏显示一个带有
+百分比，和电池状态的图标
+- 你可以通过插件设置控制
+电池充电比例和状态显示样式
+
+## 使用
+
+- 安装插件
+- 并在 Obsidian 中启用该插件即可
+
+### 其他设置
+
+- Show percentage：可以控制是否在电池图标旁边显示当前电量的百分比
+- Sepatate cahrging icon：打开后，电池的充电和使用装填，会独立在电池图标外显示