• 简体中文

      • 使用与编写插件

      插件按内容处理过程分工。调整组件和交互，从 slot 开始；需要改变节点对应的插槽，再使用 render。解析、修复和流式映射由 Core 插件处理。

      类型作用编写指南
      slot渲染插槽，提供组件和交互。Slot 插件
      render将 HAST 渲染成插槽。Render 插件
      mapper响应式映射 HAST，控制内容如何逐步呈现。Mapper 插件
      remark解析 Markdown 语法。Remark 插件
      rehype对 HAST 做二次处理。Rehype 插件
      repair对 Markdown AST 做二次处理，修复未完成内容。Repair 插件

      使用一个插件包

      plugins 接收一个 IPluginItem，也可以接收它的数组。一个插件包可以包含 slots、renders、remarks、rehypes、repairs 和 mappers 中的多个列表。

      import { Fluxdown } from 'fluxdown';

import { HighlightedPlugin } from './plugins/highlighted';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown plugins={HighlightedPlugin} text={text} />;
}

      这里的 HighlightedPlugin 是应用中导出的插件包对象。具体声明见 Slot 插件和 Render 插件。

      组合多个插件包

      把需要的插件包按顺序放进数组，直接传给 Fluxdown：

      import { Fluxdown } from 'fluxdown';

import { HighlightedPlugin } from './plugins/highlighted';
import { CommentPlugin } from '../plugins/comment';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return <Fluxdown plugins={[HighlightedPlugin, CommentPlugin]} text={text} />;
}

      配置预设插件

      在相应列表中指定预设，再通过 config 按插件的 key 提供选项。例如，图片地址尚未生成完成时，先隐藏它：

      import { IncompleteImageRepairPlugin } from '@fluxdown/core-presets/repair';
import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      plugins={{
        repairs: [IncompleteImageRepairPlugin],
        config: {
          'repair-incomplete-image': { strategy: 'discard' },
        },
      }}
      streaming
      text={text}
    />
  );
}

      这个例子需要 pnpm add @fluxdown/core-presets。默认图片策略是 placeholder，会先显示占位内容。

      config 作用于同一个插件包里列出的插件。其他预设会继续保留。各类型插件页末尾列出了内置插件：Slot、Render，以及 Core 插件。完整属性见自定义配置。