mirror of https://github.com/YunYouJun/valaxy
docs: update vanillaLazyLoad
This commit is contained in:
parent
34628fce5d
commit
e929027808
|
|
@ -5,9 +5,9 @@ categories:
|
|||
- config
|
||||
---
|
||||
|
||||
> [packages/valaxy/node/type.ts](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy/node/types.ts)
|
||||
以下是所有的扩展配置项与相关类型。
|
||||
|
||||
### Unocss Presets
|
||||
> [packages/valaxy/node/type.ts](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy/node/types.ts)
|
||||
|
||||
```ts
|
||||
// types
|
||||
|
|
@ -101,3 +101,16 @@ export default defineValaxyConfig<ThemeConfig>({
|
|||
],
|
||||
})
|
||||
```
|
||||
|
||||
### Unocss Presets
|
||||
|
||||
我们默认集成了 [UnoCSS](https://unocss.dev) 及以下预设。
|
||||
|
||||
- [`presetUno`](https://unocss.dev/presets/attributify): 一些常用按需生成的样式，类 TailwindCSS。
|
||||
- [`presetAttributify`](https://unocss.dev/presets/attributify): 使用属性选择器替代类名。
|
||||
- [`presetIcons`](https://unocss.dev/presets/icons): 集成了 [icones](https://icones.netlify.app/) 图标库，按需使用。
|
||||
- [`presetTypography`](https://unocss.dev/presets/typography)
|
||||
|
||||
因此，你可以直接在 Markdown 中快速实现各式各样的效果。
|
||||
|
||||
见 [UnoCSS | Markdown](/guide/markdown#unocss)。
|
||||
|
|
|
|||
|
|
@ -622,6 +622,90 @@ export default defineSiteConfig({
|
|||
`/foo`, `/bar`, `/v1/about` these routes will be redirected to `/about`。
|
||||
:::
|
||||
|
||||
### 图片预览（Medium Zoom） {lang="zh-CN"}
|
||||
|
||||
### Image Preview (Medium Zoom) {lang="en"}
|
||||
|
||||
::: zh-CN
|
||||
Valaxy 内置了 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 进行图片预览，默认关闭。
|
||||
|
||||
> [Medium Zoom Demo](https://medium-zoom.francoischalifour.com/)
|
||||
|
||||
- mediumZoom
|
||||
- `enable`: 是否开启
|
||||
- `selector`: 可自定义传入选择器
|
||||
- `options`: 与 [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options) 一致
|
||||
|
||||
譬如开启 Medium Zoom：
|
||||
:::
|
||||
|
||||
::: en
|
||||
Valaxy has built-in [medium-zoom](https://github.com/francoischalifour/medium-zoom) to preview the pictures, which is disabled by default.
|
||||
|
||||
> [Medium Zoom Demo](https://medium-zoom.francoischalifour.com/)
|
||||
|
||||
- mediumZoom
|
||||
- `enable`: Set to true to enable it
|
||||
- `selector`: Custom CSS selector
|
||||
- `options`: Refer to [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options)
|
||||
>>>>>>> a2bbd86 (docs: update vanillaLazyLoad)
|
||||
:::
|
||||
|
||||
```ts
|
||||
// site.config.ts
|
||||
import { defineSiteConfig } from 'valaxy'
|
||||
|
||||
export default defineSiteConfig({
|
||||
mediumZoom: { enable: true }
|
||||
})
|
||||
```
|
||||
|
||||
::: zh-CN
|
||||
除此之外，你也可以单独控制是否在某篇文章中开启。
|
||||
:::
|
||||
|
||||
::: en
|
||||
In addition, you can also enable it in a certain article independently.
|
||||
:::
|
||||
|
||||
```md
|
||||
---
|
||||
title: Test Medium Zoom
|
||||
medium_zoom: true
|
||||
---
|
||||
```
|
||||
|
||||
### 懒加载 Vanilla Lazyload {lang="zh-CN"}
|
||||
|
||||
### Lazyload Vanilla Lazyload {lang="en"}
|
||||
|
||||
::: zh-CN
|
||||
|
||||
Valaxy 内置了 [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload)。
|
||||
|
||||
`vanillaLazyload` 默认不开启。
|
||||
因为 Valaxy 本身会为所有的图片添加 `loading="lazy"`，它是浏览器的特性，但如果你希望得到更广泛的兼容，你可以手动开启 `vanillaLazyload`。
|
||||
|
||||
:::
|
||||
|
||||
::: en
|
||||
|
||||
Valaxy has built-in [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload)。
|
||||
|
||||
`vanillaLazyload` is disabled by default.
|
||||
Because Valaxy itself will add `loading="lazy"` to all images, which is a browser feature, but if you want to get more extensive compatibility, you can manually enable it.
|
||||
|
||||
:::
|
||||
|
||||
```ts
|
||||
export default defineSiteConfig({
|
||||
vanillaLazyload: {
|
||||
// 默认不开启
|
||||
enable: true,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 主题配置 {lang="zh-CN"}
|
||||
|
||||
## Theme Config {lang="en"}
|
||||
|
|
|
|||
|
|
@ -538,6 +538,8 @@ We integrated [UnoCSS](https://unocss.dev), so you can use it in your markdown f
|
|||
|
||||
Freedom to control your layout!
|
||||
|
||||
> 更多配置见 [UnoCSS | 扩展配置](/guide/config/extend#unocss-presets)。
|
||||
|
||||
<div class="flex flex-col">
|
||||
|
||||
<div class="flex grid-cols-3">
|
||||
|
|
|
|||
|
|
@ -140,58 +140,6 @@ Algolia is an online third-party search service. You need to apply for the `ID`
|
|||
Valaxy provides a quick integration plug-in: [valaxy-addon-algolia](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-algolia) (Currently only DocSearch is supported).
|
||||
:::
|
||||
|
||||
## 图片预览（Medium Zoom） {lang="zh-CN"}
|
||||
|
||||
## Image Preview (Medium Zoom) {lang="en"}
|
||||
|
||||
::: zh-CN
|
||||
Valaxy 内置了 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 进行图片预览，默认关闭。
|
||||
|
||||
> [Medium Zoom Demo](https://medium-zoom.francoischalifour.com/)
|
||||
|
||||
- mediumZoom
|
||||
- `enable`: 是否开启
|
||||
- `selector`: 可自定义传入选择器
|
||||
- `options`: 与 [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options) 一致
|
||||
|
||||
譬如开启 Medium Zoom：
|
||||
:::
|
||||
|
||||
::: en
|
||||
Valaxy has built-in [medium-zoom](https://github.com/francoischalifour/medium-zoom) to preview the pictures, which is disabled by default.
|
||||
|
||||
> [Medium Zoom Demo](https://medium-zoom.francoischalifour.com/)
|
||||
|
||||
- mediumZoom
|
||||
- `enable`: Set to true to enable it
|
||||
- `selector`: Custom CSS selector
|
||||
- `options`: Refer to [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options)
|
||||
:::
|
||||
|
||||
```ts
|
||||
// site.config.ts
|
||||
import { defineSiteConfig } from 'valaxy'
|
||||
|
||||
export default defineSiteConfig({
|
||||
mediumZoom: { enable: true }
|
||||
})
|
||||
```
|
||||
|
||||
::: zh-CN
|
||||
除此之外，你也可以单独控制是否在某篇文章中开启。
|
||||
:::
|
||||
|
||||
::: en
|
||||
In addition, you can also enable it in a certain article independently.
|
||||
:::
|
||||
|
||||
```md
|
||||
---
|
||||
title: Test Medium Zoom
|
||||
medium_zoom: true
|
||||
---
|
||||
```
|
||||
|
||||
## 音乐播放器 {lang="zh-CN"}
|
||||
|
||||
## Music Player {lang="en"}
|
||||
|
|
|
|||
|
|
@ -335,6 +335,7 @@ When the page initializes or switches languages, add the corresponding language
|
|||
- 预加载与实时切换
|
||||
- URL 不变，便于管理与分享，且切换无需刷新页面
|
||||
- 渐进式翻译（只翻译部分内容并可共用示例内容等）
|
||||
- 当你在同一个文件编写文档时，GitHub Copilot (VSCode 插件) 甚至很容易帮助你补全翻译！
|
||||
|
||||
**劣势**：
|
||||
|
||||
|
|
@ -347,6 +348,8 @@ When the page initializes or switches languages, add the corresponding language
|
|||
- Can be maintained in the same Markdown file, easy to write
|
||||
- Pre-loading and real-time switching
|
||||
- URLs remain unchanged, easy to manage and share, and switch without refreshing the page
|
||||
- Progressive translation (only part of the content is translated and can share example content, etc.)
|
||||
- When you are writing a document in the same file, GitHub Copilot (VSCode Extension) can even help you complete the translation!
|
||||
|
||||
**Disadvantages**:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue