# @diplodoc/page-constructor-extension 中文文档

规范地址：https://npmcn.com/package/%40diplodoc/page-constructor-extension/

版本：0\.13\.17
npm 元数据更新时间：2026-10-28T14:56:10.389Z
中文译文更新时间：2026-11-12T12:24:42.877Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40diplodoc/page-constructor-extension
原文对照：https://npmcn.com/package/%40diplodoc/page-constructor-extension/?lang=original
项目主页：https://github.com/diplodoc-platform/page-constructor-extension#readme
源码仓库：https://github.com/diplodoc-platform/page-constructor-extension

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：23.7 MB，45 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=24
- 运行依赖：6 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，markdown-it ^13\.0\.0，@diplodoc/transform ^4\.78\.12
- 首次发布：2025-05-20T08:55:39.387Z
- 最新版本发布：2026-10-28T14:56:09.903Z
- 近 30 天下载量：3307（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 19 个）

## 中文简介

Diplodoc 变压器和构建器的页面构造器插件

## 安装

```sh
npm install @diplodoc/page-constructor-extension
```

也可以使用：`pnpm add @diplodoc/page-constructor-extension`、`yarn add @diplodoc/page-constructor-extension`、`bun add @diplodoc/page-constructor-extension`

## README

**英语** | [русский](https://github.com/diplodoc-platform/page-constructor-extension/blob/master/README.ru.md)

* * *

[![NPM version](https://img.shields.io/npm/v/@diplodoc/page-constructor-extension.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/page-constructor-extension) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_page-constructor-extension&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=diplodoc-platform_page-constructor-extension) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_page-constructor-extension&metric=coverage)](https://sonarcloud.io/summary/new_code?id=diplodoc-platform_page-constructor-extension) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_page-constructor-extension&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=diplodoc-platform_page-constructor-extension) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_page-constructor-extension&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=diplodoc-platform_page-constructor-extension) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_page-constructor-extension&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=diplodoc-platform_page-constructor-extension)

# Diplodoc 页面构建器扩展

这是Diplodoc平台的延伸,允许使用 [页面构造器](https://github.com/gravity-ui/page-constructor) 的组件。 Page Constructionor是一个基于YAML数据的用于渲染网页或其部分的库. 此扩展可以直接在您下标记文件中创建丰富的交互式页面布局.

扩展部分包括:

-   [准备运行时间](https://npmcn.com/package/%40diplodoc/page-constructor-extension/#readme-prepared-runtime)
-   [它变换插件](https://npmcn.com/package/%40diplodoc/page-constructor-extension/#readme-markdownit-transform-plugin)
-   [反应钩](https://npmcn.com/package/%40diplodoc/page-constructor-extension/#readme-react-hooks)

## 快速启动

将插件附加到变压器上 :

```js
import pageConstructorExtension from '@diplodoc/page-constructor-extension';
import transform from '@diplodoc/transform';

const {result} = await transform(
  `
::: page-constructor
blocks:
  - type: 'header-block'
    title: 'My Header'
    description: 'This is a description'
:::
`,
  {
    plugins: [pageConstructorExtension.transform({bundle: false})],
  },
);
```

不要忘记添加运行时间让页面构建器交互 :

```js
// Import the runtime in your application
import '@diplodoc/page-constructor-extension/runtime';
import '@diplodoc/page-constructor-extension/runtime/styles';

// Or include it in your HTML
<script src='_assets/page-constructor.js'></script>
<link rel='stylesheet' href='_assets/page-constructor.css' />

// Or load it conditionally only when needed
import {PAGE_CONSTRUCTOR_RUNTIME} from '@diplodoc/page-constructor-extension/plugin';

// Check if page constructor is used in the content
if (result.meta?.script?.includes(PAGE_CONSTRUCTOR_RUNTIME)) {
  // Load runtime asynchronously
  Promise.all([
    import('@diplodoc/page-constructor-extension/runtime'),
    import('@diplodoc/page-constructor-extension/runtime/styles')
  ]);
}
```

## 语法

您可以使用您的下标记文件中的页面构建器 `page-constructor` 指令 :

```markdown
::: page-constructor
blocks:

- type: 'header-block'
  title: 'My Header'
  description: 'This is a description'
  :::
```

**说明:** 这个 `blocks:` 需要财产。 直接列表格式 `blocks:` 前缀不支持.

## 它变换插件

插件用于 [@ diplodoc/ 变形](https://github.com/diplodoc-platform/transform) 软件包.

选项 :

-   `runtime` - 显示结果的运行时脚本和样式名称 `script` 财务报告和审定财务报表 `style` 节.  
    可以是字符串(脚本和样式都使用同名),也可以是单独的对象 `script` 财务报告和审定财务报表 `style` 属性.  
    默认 : `{ script: '_assets/page-constructor.js', style: '_assets/page-constructor.css' }`  
    
-   `bundle` - 布尔旗以启用/无法复制捆绑的运行时间到目标目录.  
    目标目录所在 `<transformer output option>/<plugin runtime option>`  
    默认 : `true`  
    
-   `assetLinkResolver` - 解决页面构建器内容中的资产链接(图像、视频等).  
    签署: `(link: string) => string`  
    默认 : `undefined`  
    
-   `contentLinkResolver` - 功能解决页面构建器内容中的内容链接(markdown文件,HTML文件等).  
    签署: `(link: string) => string`  
    默认 : `undefined`  
    

## 准备运行时间

Page 构造器需要运行时脚本使内容在您的页面上交互. 增加这些脚本有两种主要方法:

#### 1\. 使用已生成资产

最佳服务:

-   静态 HTML 页面
-   服务器提交应用程序
-   当您想要将运行时间从主应用程序代码中分离时

```html
<html>
  <head>
    <!-- Assets generated by the MarkdownIt transform plugin -->
    <script src="_assets/page-constructor.js"></script>
    <link rel="stylesheet" href="_assets/page-constructor.css" />
  </head>
  <body>
    ${result.html}
  </body>
</html>
```

#### 2\. 包括在您的套装中

最佳服务:

-   单页应用程序
-   当使用模块捆绑器时(网包、卷起等)
-   如果您想要控制运行时间的版本

```js
import '@diplodoc/page-constructor-extension/runtime';
import '@diplodoc/page-constructor-extension/runtime/styles';
```

## 渲染检测

运行时间自动检测是水合物还是根据内容的结构渲染出内容 :

-   **服务器发送的内容** (带有预发HTML)将被水化
-   **浏览器提交的内容** (空占位符)将全部完成

这使得您可以使用单个运行时间,明智地决定适当的渲染方法,在同时使用服务器和浏览器渲染的混合环境中简化了集成.

> **关于消毒的重要说明:**
> 
> 当使用服务器侧渲染(SSR)时,所有的HTML都会通过变换的默认消毒器. 然而,在客户端渲染时,Page Constructionor的内容不会被自动消毒. 如果您在客户端渲染情景中需要这个功能,您需要自己处理内容消毒,以防止潜在的安全问题.

## 初始化方法

初始化 Page 构造器运行时间有三种方法:

#### 1\. 反应部分

最佳服务:

-   反应应用程序
-   当您需要更多控制初始化时间时
-   当您想要与 React 的组件生命周期结合时

```jsx
import {PageConstructorRuntime} from '@diplodoc/page-constructor-extension/react';

function App() {
  return (
    <>
      {/* Your content */}
      <PageConstructorRuntime />
    </>
  );
}
```

#### 2\. 直接运行时间导入

最佳服务:

-   静态 HTML 页面
-   非反应应用程序
-   简单的一体化设想

```js
// Import the runtime - it will automatically detect the rendering type
import '@diplodoc/page-constructor-extension/runtime';
```

**附加参数:**

-   `theme` (可选) - 设置页面构造器组件的主题。 可用值 : `'light' | 'dark'`
-   `preMountHook` (可选) - 在挂起组件前调用回调函数 。 接收作为参数的容器元素.

#### 3\. 有条件的运行时间加载

最佳服务:

-   业绩优化
-   当您想要加载运行时间时, 只有在需要时才会
-   每页可能不使用页面构建器的大应用程序

```jsx
import {useState, useEffect} from 'react';
import {
  transform as pageConstructorPlugin,
  PAGE_CONSTRUCTOR_RUNTIME,
} from '@diplodoc/page-constructor-extension/plugin';
import {PageConstructorRuntime} from '@diplodoc/page-constructor-extension/react';

function App() {
  const {result} = transform(content, {
    plugins: [pageConstructorPlugin()],
  });
  const [runtimeLoaded, setRuntimeLoaded] = useState(false);

  // Asynchronously load runtime only if needed
  useEffect(() => {
    if (result.meta?.script?.includes(PAGE_CONSTRUCTOR_RUNTIME)) {
      // Load runtime asynchronously
      Promise.all([
        import('@diplodoc/page-constructor-extension/runtime'),
        import('@diplodoc/page-constructor-extension/runtime/styles'),
      ]).then(() => {
        setRuntimeLoaded(true);
      });
    }
  }, [result.meta?.script]);

  return (
    <>
      <div dangerouslySetInnerHTML={{__html: result.html}} />
      {runtimeLoaded && <PageConstructorRuntime />}
    </>
  );
}
```

## 变形样式和运行时间

这个 `@diplodoc/page-constructor-extension` 软件包不捆绑 `@diplodoc/transform` CSS和JS在运行时需要手动导入:

```css
@import '~@diplodoc/transform/dist/css/yfm.css';
```

```js
import '@diplodoc/transform/dist/js/yfm';
```

## 反应钩

计外 `PageConstructorRuntime` 说明的构成部分 [初始化方法](https://npmcn.com/package/%40diplodoc/page-constructor-extension/#readme-initialization-methods) 区域,扩展提供了反应钩子,用于对渲染过程进行更多的控制:

```jsx
import {
  usePageConstructorController,
  usePageConstructor,
} from '@diplodoc/page-constructor-extension/react';

function MyComponent() {
  // Get the controller
  const controller = usePageConstructorController();

  // Get the render function
  const renderPageConstructors = usePageConstructor();

  // Render page constructors when needed
  useEffect(() => {
    if (controller) {
      renderPageConstructors();
    }
  }, [controller, renderPageConstructors]);

  return <div>My Component</div>;
}
```

这些钩子在您需要时有用 :

-   提供页面构建器时的控制
-   与其他反应组件或库整合
-   执行自定义渲染逻辑
-   响应特定事件或状态变化

## 链接解析器

这个 `assetLinkResolver` 财务报告和审定财务报表 `contentLinkResolver` 选项允许您自定义如何在页面构建器内容中解决链接。 这些功能被调用到内容中的每个链接,并且应当返回已解决的链接.

-   `assetLinkResolver`: 要求连接资产(图像、视频等)
-   `contentLinkResolver`: 调用内容的链接( 标记下的文件、 HTML 文件等)

示例

```js
pageConstructorPlugin({
  // Other options...
  assetLinkResolver: (link) => {
    // Add a prefix to asset links
    return link.startsWith('http') ? link : `/assets/${link}`;
  },
  contentLinkResolver: (link) => {
    // Convert .md links to .html
    return link.endsWith('.md') ? link.replace('.md', '.html') : link;
  },
});
```

## 示例

见 `example` 用于完整实例的目录 .

## 常见问题

### @diplodoc/page-constructor-extension 是什么？

Diplodoc 变压器和构建器的页面构造器插件

### 如何安装 @diplodoc/page-constructor-extension？

在项目目录运行 npm install @diplodoc/page-constructor-extension，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、markdown-it（^13\.0\.0）、@diplodoc/transform（^4\.78\.12）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @diplodoc/page-constructor-extension 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @diplodoc/page-constructor-extension 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @diplodoc/page-constructor-extension 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @diplodoc/page-constructor-extension 可以商用吗？

@diplodoc/page-constructor-extension 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @diplodoc/page-constructor-extension 的下载量有多少？

根据 npm 官方下载统计，@diplodoc/page-constructor-extension 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,307 次，日均约 110 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @diplodoc/page-constructor-extension 还在维护吗？

最新版本 0\.13\.17 发布于 2026/10/28（14 天前）；至今共发布 35 个版本，其中过去 12 个月发布了 19 个；首次发布于 2025/05/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。