diff --git a/.vitepress/config.ts b/.vitepress/config.ts index eb41a1f4..a5b0b2c9 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -459,7 +459,27 @@ export default defineConfig({ markdown: { // languages used for twoslash and jsdocs in twoslash languages: ['ts', 'js', 'json'], - codeTransformers: [transformerTwoslash()], + codeTransformers: [ + transformerTwoslash(), + // add `style:*` support + { + root(hast) { + const meta = this.options.meta?.__raw + ?.split(' ') + .find((m) => m.startsWith('style:')) + if (meta) { + const style = meta.slice('style:'.length) + const rootPre = hast.children.find( + (n): n is typeof n & { type: 'element'; tagName: 'pre' } => + n.type === 'element' && n.tagName === 'pre', + ) + if (rootPre) { + rootPre.properties.style += '; ' + style + } + } + }, + }, + ], config(md) { md.use(groupIconMdPlugin, { titleBar: { diff --git a/guide/backend-integration.md b/guide/backend-integration.md index 6956c73e..b2734b9e 100644 --- a/guide/backend-integration.md +++ b/guide/backend-integration.md @@ -65,7 +65,7 @@ 3. 在生产环境中, 在运行 `vite build` 之后,一个 `.vite/manifest.json` 文件将与静态资源文件一同生成。一个示例清单文件会像下面这样: - ```json [.vite/manifest.json] + ```json [.vite/manifest.json] style:max-height:400px { "_shared-B7PI925R.js": { "file": "assets/shared-B7PI925R.js", @@ -107,17 +107,53 @@ manifest 具有 `Record` 结构,其中每个块遵循 `ManifestChunk` 接口: - ```ts + ```ts style:max-height:400px interface ManifestChunk { + /** + * 此块/资源的输入文件名(若已知) + */ src?: string + /** + * 这个代码块/资源的输出文件名 + */ file: string + /** + * 该代码块导入的 CSS 文件列表 + * + * 此字段仅在 JS 代码块中存在。 + */ css?: string[] + /** + * 该代码块导入的资源文件列表,不包括 CSS 文件 + * + * 此字段仅在 JS 代码块中存在。 + */ assets?: string[] + /** + * 该代码块或资源是否为入口点 + */ isEntry?: boolean + /** + * 此块/资源的名称(如已知) + */ name?: string - names?: string[] + /** + * 该代码块是否为动态入口点 + * + * 此字段仅在 JS 代码块中存在。 + */ isDynamicEntry?: boolean + /** + * 该代码块静态导入的代码块列表 + * + * 这些值是 manifest 中的键。此字段仅在 JS 代码块中存在。 + */ imports?: string[] + /** + * 该代码块动态导入的代码块列表 + * + * 这些值是 manifest 中的键。此字段仅在 JS 代码块中存在。 + */ dynamicImports?: string[] } ``` @@ -129,7 +165,7 @@ - **Asset chunks**:由导入的资源(例如图片、字体)生成。其键值是项目根目录的相对 src 路径。 - **CSS 文件**:当 [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) 为 `false` 时,将生成一个带有 `style.css` 键的 CSS 文件。当 `build.cssCodeSplit` 不为 `false` 时,键的生成方式与 JS 代码块类似(即,入口代码块不带 `_` 前缀,非入口代码块带 `_` 前缀)。 -代码块将包含其静态和动态导入的信息(两者都是映射到清单中相应代码块的键),以及它们对应的 CSS 和资源文件(如果有)。 +JS 代码块(除了资源或 CSS 之外的代码块)将包含其静态和动态导入的信息(两者都是映射到清单中相应代码块的键),以及它们对应的 CSS 和资源文件(如果有)。 4. 你可以利用这个文件来渲染带有哈希文件名的链接或预加载指令。