88 lines
2.0 KiB
Markdown
88 lines
2.0 KiB
Markdown
---
|
|
title: plugin-content-update
|
|
author: pengzhanbo
|
|
createTime: 2024/03/12 19:53:34
|
|
permalink: /plugins/plugin-content-update/
|
|
---
|
|
|
|
## 指南
|
|
|
|
用于解决在 开发运行时， Markdown 内容更新时， 部分依赖解析后的 HTML 内容提供功能的插件，
|
|
未对新增的 Markdown 内容提供支持。
|
|
|
|
如， `plugin-medium-zoom` 需要在 页面渲染完成后，获取当前页面的图片实现 图片放大功能。
|
|
但是在 开发运行时，在 markdown 插入新图片后，如果页面未刷新，新增的图片无法实现放大功能。
|
|
|
|
本插件对 `vuepress` 内置插件 `<Content />` 进行重写替换，并提供了 `onContentUpdated(callback)`
|
|
方法，用于在 Markdown 内容更新时，执行回调函数。
|
|
|
|
::: warning 警告
|
|
本插件为 试验性插件，未来会随着 VuePress 的更新进行升级。
|
|
|
|
本插件主要面向 主题开发者 或 插件开发者。
|
|
:::
|
|
|
|
## 安装
|
|
|
|
::: code-tabs
|
|
@tabs npm
|
|
```sh
|
|
npm install @vuepress-plume/plugin-content-update
|
|
```
|
|
@tab pnpm
|
|
```sh
|
|
pnpm add @vuepress-plume/plugin-content-update
|
|
```
|
|
@tab yarn
|
|
```sh
|
|
yarn add @vuepress-plume/plugin-content-update
|
|
```
|
|
:::
|
|
|
|
## 使用
|
|
|
|
在 vuepress 配置文件中引入插件：
|
|
|
|
::: code-tabs
|
|
@tab .vuepress/config.ts
|
|
``` ts
|
|
import { defineUserConfig } from 'vuepress'
|
|
import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'
|
|
|
|
export default defineUserConfig({
|
|
plugins: [
|
|
contentUpdatePlugin()
|
|
]
|
|
})
|
|
```
|
|
:::
|
|
|
|
在 客户端文件中使用：
|
|
|
|
``` vue
|
|
<script lang="ts" setup>
|
|
import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
|
|
|
|
onContentUpdated(() => {
|
|
// do something
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## 示例
|
|
|
|
获取 `medium-zoom` 实例， 当 markdown 内容更新时， 刷新 `medium-zoom` 实例，使新增的图片可放大
|
|
|
|
```vue
|
|
<script lang="ts" setup>
|
|
import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
|
|
import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
|
|
|
|
const mediumZoom = useMediumZoom()
|
|
|
|
onContentUpdated(() => {
|
|
mediumZoom?.refresh()
|
|
})
|
|
</script>
|
|
```
|