Obsidian CSS Snippets

这是一个为 Obsidian 笔记应用创建的 CSS 代码片段集合，旨在提供更好的视觉效果和用户体验。

功能特点

• 模块化设计：将样式文件按照功能分类，便于维护和管理
• 详细的中文注释：为每个样式块添加了详细的中文注释，便于理解和自定义
• 响应式设计：支持不同屏幕尺寸的适配
• 社区主题兼容：支持 Minimal、AnuPpuccin、Catppuccin 等社区主题
• 功能丰富：包含基础样式、页面布局、多列布局、图片相关等多种样式设置

文件结构

.obsidian/snippets/
├── base.css           # 基础样式文件
├── layout.css         # 页面布局样式文件
├── multi-column.css   # 多列布局样式文件
├── images.css         # 图片相关样式文件
└── README.md          # 项目说明文件

文件说明

1. base.css

• 功能：包含全局变量、基础元素样式等
• 主要内容：
  • 全局变量定义（表格标题、链接颜色等）
  • 基础元素样式（编辑器行高、字间距等）
  • 文档标题样式
  • 表格整体居中设置

2. layout.css

• 功能：包含页面宽度控制、宽块设置等布局相关样式
• 主要内容：
  • 页面宽度控制（Wide Page、Narrow Page）
  • 宽块设置（表格、数据视图、调用框、反向链接）
  • 社区主题特殊调整
  • Style Settings 配置

3. multi-column.css

• 功能：提供多列布局功能
• 主要内容：
  • 2-10 列布局设置
  • 响应式调整

4. images.css

• 功能：包含图片居中、图片边框等常用图片样式设置
• 主要内容：
  • 图片居中样式
  • 图片边框样式
  • 图片阴影样式
  • 图片圆角样式
  • 图片缩放效果
  • 图片点击放大功能

使用方法

1. 启用样式文件：

   • 在 Obsidian 的设置中，进入「外观」->「CSS 代码片段」
   • 启用需要的样式文件（可以全部启用）

2. 在笔记中使用：

   • 图片居中：使用 ![[图片链接]] 并添加 image-center 类
   • 图片边框：使用 ![[图片链接]] 并添加 image-border 类
   • 图片阴影：使用 ![[图片链接]] 并添加 image-shadow 类
   • 图片圆角：使用 ![[图片链接]] 并添加 image-rounded 类
   • 图片缩放：使用 ![[图片链接]] 并添加 image-zoom 类
   • 多列布局：在笔记中添加 cssclass: multi-column-2（或其他列数）
   • 宽块设置：在笔记中添加 cssclass: wide-table（或其他宽块类型）

配置选项

本项目支持通过 Style Settings 插件进行配置，主要配置选项包括：

• Adjustable RLL Settings：调整可读行长度
• Vault-wide toggle for Wide Blocks：全局启用宽块功能
• Narrow Page Settings：设置窄页面的最大宽度

兼容性

• Obsidian 版本：建议使用 v1.0.0 及以上版本
• 社区主题：支持以下主题：
  • Minimal
  • AnuPpuccin
  • Catppuccin

自定义

如果需要自定义样式，可以修改相应的 CSS 文件：

1. 修改全局变量：在 base.css 文件中修改全局变量
2. 调整布局设置：在 layout.css 文件中修改布局相关设置
3. 修改图片样式：在 images.css 文件中修改图片相关样式
4. 调整多列布局：在 multi-column.css 文件中修改多列布局设置

注意事项

1. 备份：在修改样式文件前，建议先备份原始文件
2. 兼容性：不同版本的 Obsidian 可能会有不同的 CSS 结构，如有问题请调整相应的选择器
3. 性能：过多的 CSS 样式可能会影响 Obsidian 的性能，建议只启用需要的样式文件

更新日志

2026-01-13

• 优化了 CSS 文件结构，提高了可维护性
• 修复了图片点击放大后闪烁的问题
• 修复了 Obsidian 中使用 ** 的地方添加占位符的问题
• 添加了详细的中文注释
• 推送代码到 GitHub 仓库

贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

许可证

本项目采用 MIT 许可证。

联系方式

如果有任何问题或建议，欢迎联系我。