Skip to content

Update image optimization docs for Halo 2.22 #520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 28, 2025
Merged

Update image optimization docs for Halo 2.22 #520

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/developer-guide/theme/image-optimization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,15 @@ description: 本文档介绍如何使用 Halo 的缩略图特性来优化图片
- 兼容性好：响应式图片是基于 HTML 标准的实现，不需要额外的 JavaScript 或 CSS，因此兼容性非常好。

:::info
建议详细阅读 [响应式图片](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 文档，以了解更多关于响应式图片的知识，以及如何在不同场景下使用。
建议阅读 [响应式图片](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 文档，以了解更多关于响应式图片的知识，以及如何在不同场景下使用。
:::

## Finder API

:::info
从 Halo 2.22 开始，Halo 会自动为页面上的所有图片添加响应式图片的相关属性，无需主题主动适配，如果你的主题需要手动为部分图片自定义属性，可以使用下方的 `Finder API`。
:::

### `thumbnail.gen(uri, size)`

获取指定图片和尺寸的缩略图地址。
Expand All @@ -45,10 +49,6 @@ description: 本文档介绍如何使用 Halo 的缩略图特性来优化图片
/>
```

:::info
文章内容无需在主题模板中处理，Halo 会自动为文章内容中的图片生成响应式图片的 HTML 代码。
:::

## HTTP API

如果你需要在主题模板之外的地方生成缩略图地址，比如异步加载图片的场景下，可以使用 HTTP API。
Expand All @@ -59,7 +59,7 @@ description: 本文档介绍如何使用 Halo 的缩略图特性来优化图片

#### 参数

- `uri:string` - 图片地址。
- `uri:string` - 图片地址，需要 [encode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) 处理。
- `size:string` - 缩略图尺寸，支持以下值：
- `s` - 宽度 400px
- `m` - 宽度 800px
Expand Down