【亲测免费】 Obsidian Image Gallery 技术文档

安装指南

系统要求

• Obsidian：版本 1.1.8 及以上。
• 本地图片文件夹：在您的 Obsidian 库中需要有一个或多个包含本地图片的文件夹。

安装步骤

1. 打开 Obsidian 应用。
2. 进入“设置” > “社区插件” > “浏览”。
3. 在搜索栏中输入“Obsidian Image Gallery”。
4. 找到插件后，点击“安装”。
5. 安装完成后，点击“启用”。

项目使用说明

创建图片画廊

在 Obsidian 的笔记中，您可以通过添加以下代码块来创建一个动态图片画廊：

水平画廊

```img-gallery
path: Attachments/Folder
type: horizontal

#### 垂直画廊
```markdown
```img-gallery
path: Attachments/Folder
type: vertical

### 预览画廊
- 在“实时预览”模式下，将光标移出代码块后，画廊将自动生成。
- 在“源代码”模式下，按 `cmd+e`（或 `ctrl+e`）触发 Obsidian 的笔记预览。

### 图片灯箱
版本 `1.1.1` 引入了图片灯箱功能，点击画廊中的任何图片即可查看。您还可以点击右上角的按钮在新标签页中打开原始图片。

## 项目API使用文档

### 设置选项
您可以通过 `yaml` 语法自定义画廊的设置。以下是所有可用的设置选项及其默认值：

#### 通用选项
| 选项     | 默认值       | 替代值          | 是否必需 | 描述                           |
| -------- | ------------ | --------------- | -------- | ------------------------------ |
| `path`   | -            | -               | 是       | 相对于库根目录的路径           |
| `type`   | `horizontal` | `vertical`      | 否       | 画廊类型                       |
| `gutter` | `8`          | 任意数字        | 否       | 图片之间的间距（以像素为单位） |
| `radius` | `0`          | 任意数字        | 否       | 图片的边框半径（以像素为单位） |
| `sortby` | `ctime`      | `mtime`, `name` | 否       | 图片排序依据                   |
| `sort`   | `desc`       | `asc`           | 否       | 排序顺序                       |

#### 水平画廊专用选项
| 选项     | 默认值 | 替代值    | 是否必需 | 描述                   |
| -------- | ------ | --------- | -------- | ---------------------- |
| `height` | `260`  | 任意数字  | 否       | 所有行的固定高度（以像素为单位） |

#### 垂直画廊专用选项
| 选项      | 默认值 | 替代值    | 是否必需 | 描述                   |
| --------- | ------ | --------- | -------- | ---------------------- |
| `columns` | `3`    | 任意数字  | 否       | 桌面模式下的列数       |
| `mobile`  | `1`    | 任意数字  | 否       | 移动模式下的列数       |

## 项目安装方式

### 通过 Obsidian 安装
Obsidian Image Gallery 可以通过 Obsidian 内置的社区插件市场进行安装。具体步骤如下：
1. 打开 Obsidian 应用。
2. 进入“设置” > “社区插件” > “浏览”。
3. 在搜索栏中输入“Obsidian Image Gallery”。
4. 找到插件后，点击“安装”。
5. 安装完成后，点击“启用”。

### 注意事项
- `path` 选项不需要指定库的名称。
- 该插件仅支持本地图片。
- 确保嵌入的图片大小合理，生成包含大量高分辨率图片的画廊可能会导致应用性能下降。

### 关于垂直画廊的排序
由于 CSS 网格布局的限制，垂直画廊的图片排序可能不准确。如果排序至关重要，建议使用水平画廊。