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:
@@ -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` در فایل پیکربندی سفارشی کرد:
|
||||
|
||||
@@ -295,6 +295,34 @@ params:
|
||||
displayTags: true
|
||||
```
|
||||
|
||||
### 画像ズーム
|
||||
|
||||
画像ズームはデフォルトで無効です。有効にすると、Markdown 画像をクリックするとズームビューが開きます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
```
|
||||
|
||||
特定のページでズームを無効にするには、ページのフロントマターに以下を追加します:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
imageZoom: false
|
||||
---
|
||||
```
|
||||
|
||||
Medium Zoom アセットを固定するか、ローカルアセットから読み込む場合:
|
||||
|
||||
```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 またはローカルアセットからの相対パス
|
||||
```
|
||||
|
||||
### ページ幅
|
||||
|
||||
ページの幅は設定ファイルの `params.page.width` パラメータでカスタマイズできます:
|
||||
|
||||
@@ -317,6 +317,34 @@ params:
|
||||
displayTags: true
|
||||
```
|
||||
|
||||
### Image Zoom
|
||||
|
||||
Image zoom is disabled by default. When enabled, clicking a Markdown image opens a zoomed view.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
```
|
||||
|
||||
To disable zoom on a specific page, add this to the page front matter:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
imageZoom: false
|
||||
---
|
||||
```
|
||||
|
||||
If you want to pin the Medium Zoom asset or load it from local assets:
|
||||
|
||||
```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" # optional, relative to the base or local assets
|
||||
```
|
||||
|
||||
### Page Width
|
||||
|
||||
The width of the page can be customized by the `params.page.width` parameter in the config 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
|
||||
---
|
||||
```
|
||||
|
||||
如果想固定 Medium Zoom 资源或从本地资源加载:
|
||||
|
||||
```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 或本地资源
|
||||
```
|
||||
|
||||
### 页面宽度
|
||||
|
||||
页面宽度可以通过配置文件中的 `params.page.width` 参数自定义:
|
||||
|
||||
Reference in New Issue
Block a user