diff --git a/docs/pages/en/integrations/vitepress-plugin-inline-link-preview/getting-started.md b/docs/pages/en/integrations/vitepress-plugin-inline-link-preview/getting-started.md index 161081a9..32ac5e96 100644 --- a/docs/pages/en/integrations/vitepress-plugin-inline-link-preview/getting-started.md +++ b/docs/pages/en/integrations/vitepress-plugin-inline-link-preview/getting-started.md @@ -79,6 +79,76 @@ Therefore, for those `[]()` link markup and `` elements you don't want to tra 1. Add `no-inline-link-preview` to the class list. 2. Assign a `data-inline-link-preview` attribute with the value of `false`. +### Add plugin-specific options into configurations of Vite + +First of all, in VitePress's [**primary configuration file**](https://vitepress.dev/reference/site-config#config-resolution) (not this is not a **theme configuration file**, it's usually located at `docs/.vitepress/config.ts`, file paths and extensions may be vary), you need to supply some of the [Server-Side Rendering related options](https://vitejs.dev/guide/ssr.html#ssr-externals) in the root configuration object of [Vite](https://vitejs.dev). + +Add the Inline Link Previewing plugin package name `@nolebase/vitepress-plugin-inline-link-preview` into the Vite options that required by VitePress to process this plugin: + + + + + +```typescript twoslash +import { defineConfig } from 'vitepress' + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + vite: { // [!code ++] + optimizeDeps: { // [!code ++] + exclude: [ // [!code ++] + '@nolebase/vitepress-plugin-inline-link-preview/client', // [!code ++] + ], // [!code ++] + }, // [!code ++] + ssr: { // [!code ++] + noExternal: [ // [!code ++] + // If there are other packages that need to be processed by Vite, you can add them here. // [!code hl] + '@nolebase/vitepress-plugin-inline-link-preview', // [!code ++] + ], // [!code ++] + }, // [!code ++] + }, // [!code ++] + lang: 'en', + title: 'Site Name', + themeConfig: { + // rest of the options... + } + // rest of the options... +}) +``` + +You might have configured the separated [Vite configuration file](https://vitejs.dev/config/) (e.g. `vite.config.ts`) if you are already mastered Vite. In this case, you could ignore the above configuration and add the following configuration to your Vite configuration file: + + + + + +```typescript twoslash +import { defineConfig } from 'vite' + +export default defineConfig(() => { + return { + optimizeDeps: { + exclude: [ // [!code ++] + '@nolebase/vitepress-plugin-inline-link-preview/client', // [!code ++] + 'vitepress' // [!code ++] + ], // [!code ++] + }, + ssr: { // [!code ++] + noExternal: [ // [!code ++] + // If there are other packages that need to be processed by Vite, you can add them here. // [!code hl] + '@nolebase/vitepress-plugin-inline-link-preview', // [!code ++] + ], // [!code ++] + }, // [!code ++] + plugins: [ + // other vite plugins... + ], + // other vite configurations... + } +}) +``` + +If you haven't configured any of the separated [Vite configuration file](https://vitejs.dev/config/) (e.g. `vite.config.ts`) before but still want to have a try with the above configuration, you can create a `vite.config.ts` file in the root directory of your VitePress project and add the above configuration to it. (Don't forget to install `vite` through your package manager as well!) + ### Integrate with VitePress Since the `InlineLinkPreviewElementTransform` plugin will transform the `[]()` link markup or `` elements into the `` elements, you need to install the `VPNolebaseInlineLinkPreview` component into your VitePress theme in order to render the inline link previewing UI. diff --git a/docs/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/getting-started.md b/docs/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/getting-started.md index 706b8d83..8aefa959 100644 --- a/docs/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/getting-started.md +++ b/docs/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/getting-started.md @@ -77,6 +77,77 @@ export default defineConfig({ 1. 在类列表中添加 `no-inline-link-preview`。 2. 为标签添加一个 `data-inline-link-preview` 属性，并设置值为 `false`。 +### 添加 Vite 相关配置 + +首先，请在你的 VitePress [**核心配置文件**](https://vitepress.dev/reference/site-config#config-resolution) 中（注意不是**主题配置文件**，通常为 `docs/.vitepress/config.ts`，文件路径和拓展名也许会有区别）的根字段中添加 [Vite](https://vitejs.dev) 与 [SSR 服务端渲染相关](https://cn.vitejs.dev/config/ssr-options.html#ssr-external) 的配置。 + +将行内链接预览的插件包 `@nolebase/vitepress-plugin-inline-link-preview` 添加到需要 VitePress 底层的 Vite 帮忙处理的依赖： + + + + + +```typescript twoslash +import { defineConfig } from 'vitepress' + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + vite: { // [!code ++] + optimizeDeps: { + exclude: [ // [!code ++] + '@nolebase/vitepress-plugin-inline-link-preview/client', // [!code ++] + ], // [!code ++] + }, + ssr: { // [!code ++] + noExternal: [ // [!code ++] + // 如果还有别的依赖需要添加的话，并排填写和配置到这里即可 // [!code hl] + '@nolebase/vitepress-plugin-inline-link-preview', // [!code ++] + ], // [!code ++] + }, // [!code ++] + }, // [!code ++] + lang: 'zh-CN', + title: '网站标题', + themeConfig: { + // 其他的配置... + } + // 其他的配置... +}) +``` + +如果你很厉害，为 VitePress 的文档站点配置了分离和单独的 [Vite 配置文件](https://vitejs.dev/config/)（比如 `vite.config.ts`），那你也可以省略上面的配置，直接在 Vite 的配置文件中添加下面的配置： + + + + + +```typescript twoslash +import { defineConfig } from 'vite' + +export default defineConfig(() => { + return { + optimizeDeps: { + exclude: [ // [!code ++] + '@nolebase/vitepress-plugin-inline-link-preview/client', // [!code ++] + 'vitepress' // [!code ++] + ], // [!code ++] + }, + ssr: { // [!code ++] + noExternal: [ // [!code ++] + // 如果还有别的依赖需要添加的话，并排填写和配置到这里即可 // [!code hl] + '@nolebase/vitepress-plugin-inline-link-preview', // [!code ++] + ], // [!code ++] + }, // [!code ++] + plugins: [ + // 其他 Vite 插件配置... + ], + // 其他的配置... + } +}) + +``` + +如果你在没有单独配置过 [Vite 配置文件](https://vitejs.dev/config/)（比如 `vite.config.ts`）的情况下想要直接复制上面的代码的话，只需要在 VitePress 站点所在的地方新建一个 `vite.config.ts` 即可，不过也记得还需要通过包管理器安装一下 `vite` 哦。 + ### 添加 VitePress 主题相关的配置 在 VitePress 的[**主题配置文件**](https://vitepress.dev/reference/default-theme-config#default-theme-config)中（注意不是**配置文件**，通常为 `docs/.vitepress/theme/index.ts`，文件路径和拓展名也许会有区别），**将行内链接预览插件的组件注册到 VitePress 主题中**：