feat(image-zoom): add image zoom functionality and documentation (#907)

* feat(image-zoom): add image zoom functionality and documentation

- Introduced a new `imageZoom` parameter in the configuration to enable click-to-zoom for Markdown images.
- Updated the `render-image.html` layout to support zoom functionality by adding a `data-zoomable` attribute to images.
- Created a new `medium-zoom.html` script to handle the zoom effect, with options for CDN or local asset loading.
- Enhanced documentation in `configuration.md` and `markdown.md` to guide users on enabling and configuring image zoom.

* docs(image-zoom): add image zoom documentation in multiple languages

- Added sections for image zoom functionality in Persian, Japanese, and Simplified Chinese documentation.
- Included configuration examples for enabling and disabling image zoom in specific pages.
- Updated related documentation to ensure consistency across languages.
This commit is contained in:
Xin
2026-01-20 22:55:41 +00:00
committed by GitHub
parent 6a13f17326
commit e81447e7ae
8 changed files with 215 additions and 2 deletions

View File

@@ -295,6 +295,34 @@ params:
displayTags: true
```
### بزرگنمایی تصویر
بزرگنمایی تصویر به طور پیش‌فرض غیرفعال است. وقتی فعال شود، کلیک روی تصویر Markdown یک نمای بزرگنمایی شده باز می‌کند.
```yaml {filename="hugo.yaml"}
params:
imageZoom:
enable: true
```
برای غیرفعال کردن بزرگنمایی در یک صفحه خاص، این را به front matter صفحه اضافه کنید:
```yaml {filename="content/docs/guide/configuration.md"}
---
imageZoom: false
---
```
اگر می‌خواهید asset Medium Zoom را پین کنید یا از assetهای محلی بارگذاری کنید:
```yaml {filename="hugo.yaml"}
params:
imageZoom:
enable: true
base: "https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist"
# js: "js/medium-zoom.min.js" # اختیاری، نسبت به base یا assetهای محلی
```
### عرض صفحه
عرض صفحه را می‌توان با پارامتر `params.page.width` در فایل پیکربندی سفارشی کرد: