Obsidian_css_snippets

# 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 许可证。

## 联系方式

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