# @ecency/render-helper 中文文档

规范地址：https://npmcn.com/package/%40ecency/render-helper/

版本：2\.5\.43
npm 元数据更新时间：2026-11-06T06:34:49.728Z
中文译文更新时间：2026-11-13T04:53:11.690Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ecency/render-helper
原文对照：https://npmcn.com/package/%40ecency/render-helper/?lang=original
项目主页：https://ecency.com/
源码仓库：https://github.com/ecency/vision-web

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

- 包体积（解压后）：2.8 MB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- 首次发布：2020-10-29T10:58:55.310Z
- 最新版本发布：2026-11-06T06:34:49.343Z
- 近 30 天下载量：3664（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：182（近 12 个月 79 个）

## 中文简介

Markdown+Html 渲染器帮助器

## 安装

```sh
npm install @ecency/render-helper
```

也可以使用：`pnpm add @ecency/render-helper`、`yarn add @ecency/render-helper`、`bun add @ecency/render-helper`

## README

# 环境辅助工具

建造和维护 [紧急情况](https://ecency.com/),蜂巢区块链上的开源社交平台.

## 项目概况

`@ecency/render-helper` 是一个用于渲染和消毒减记+的 TypeScript 库 Ecency社交平台的HTML内容(建于蜂巢区块链上). 它提供以安全为重点的内容渲染,同时提供XSS保护,图像渲染,并进行嵌入式媒体过滤.

## 密钥命令

### 开发(从软件包目录)

-   `pnpm build` - 用tsup来构建(创建浏览器ESM+节点CJS/ESM捆绑)
-   `pnpm test` - 运行测试
-   `pnpm lint` - 在TypeScript源文件上运行ESLint

### 从 Monorepo 根

-   `pnpm render-helper` - 构建渲染帮助软件包
-   `pnpm build:packages` - 构建所有软件包(sdk、钱包、渲染器、ui)
-   `pnpm publish:render-helper` - 手工出版到npm

### 排雷中心/发改委

-   具有集中式GitHub Actions的视觉-网络单曲部分(`.github/workflows/packages.yml`(中文(简体) )
-   自动检测更改到 `packages/render-helper/**` 使用 git diff 键
-   继续前进 `develop` 分支、 构建和出版到 npm
-   使用 OIDC( OpenID Connect) 安全 npm 认证
-   版本必须在软件包中递增

## 建筑

### 核心单元

**主要条目** (单位:千美元)`src/index.ts`:

-   `renderPostBody` - 将标记降级+HTML转换为消毒的HTML
-   `catchPostImage` - 从帖子内容或元数据中取出第一个图像
-   `postBodySummary` - 从邮递机构生成文本摘要
-   `proxifyImageSrc` - 通过Ecency的图像服务器将图像 URL 复制
-   `setProxyBase` - 配置图像代理端点( 默认 ): `https://i.ecency.com`(中文(简体) )
-   `setCacheSize` - 配置 LRU 缓存大小( 默认: 60个条目)

### 处理管道

1.  **markdown-2-html.ts (简体中文)**主渲染管道
    
    -   转换条目对象( Hive post) 或原始字符串
    -   使用带有密钥的 LRU 缓存 `author-permlink-last_update-updated`
    -   电话 `cleanReply()` 来规范输入,然后 `markdownToHTML()` 将提交
2.  **二. 方法**: DOM 树行走器
    
    -   递归处理解析 HTML 节点
    -   应用专门处理器 `<a>`, (中文(简体) ), `<iframe>`, (中文(简体) ), `<img>`, (中文(简体) ), `<p>`,和文本节点
    -   通行证 `forApp` 区分应用和网络渲染的旗帜
    -   音轨 `firstImageFound` 图像处理状态
3.  **sanitize-html.method.ts (英语)**: XSS 保护
    
    -   用途 `xss` 带有严格白名单的库(ALLOWED ATTRIBUTES)
    -   Blocks 事件处理器`on*` 属性)
    -   验证 URL( 必须是) `https?://`块 `javascript:`(中文(简体) )
    -   条纹 `<style>` 标签和CSS
    -   具体白名单 `id` 属性通过 `ID_WHITELIST` 正则
4.  **节点专用处理器** (单位:千美元)`src/methods/`:
    
    -   `a.method.ts` - 链接处理、白名单域的内部化
    -   `iframe.method.ts` - 嵌入内容过滤(YouTube, 3 speak等)
    -   `img.method.ts` - 图像扩散和懒惰装入
    -   `p.method.ts` - 内含数据属性的段落处理
    -   `text.method.ts` - 链接检测和链接

### 图像处理

**(原始内容存档于2013-10-12). proxify-image-src.ts**数字 :

-   使用多hash编码将外部图像 URL 转换为 Ecency 的 CDN
-   重用已有代理散列以避免重编码
-   支持格式转换(webp/png)和再大小(width/hight)
-   处理遗产域 (images.hive.blog, steemitimages.com)

**捕获后图像.ts**数字 :

-   提取显示的图像 `json_metadata.image` 字段
-   倒数倒数第一 `<img>` 在已渲染的 HTML 正文中
-   保存 GIF 格式( 不调整动画图像大小)

### 安全考虑

**白名单管理** (单位:千美元)`src/consts/white-list.const.ts`:

-   `WHITE_LIST` - 信任蜂巢前端域(ecnec.com,最高峰.com等)
-   `OLD_LIST` - 陈旧时代域
-   白名单域的链接被转换为内部应用路径

**SS 保护**数字 :

-   HTML 全部通过 `sanitizeHtml()` 带有严格属性白名单
-   不允许内行样式( CSS 已禁用)
-   事件处理员被剥去
-   验证的 URL 方案

### 缓存策略

-   LRU 缓存 v11 (`src/cache.ts`) 存储使 HTML 和取出图像
-   缓存密钥包括内容散列( 最新更新) 到自动生效
-   区分不同图像大小和格式的缓存项
-   默认大小: 60个条目
-   现代用途 `LRUCache` 从 lru-cache v11 导入已命名

## 文件结构

```
src/
├── index.ts                 # Main exports
├── markdown-2-html.ts       # Primary rendering entry point
├── catch-post-image.ts      # Image extraction
├── post-body-summary.ts     # Summary generation
├── proxify-image-src.ts     # Image URL proxification
├── helper.ts                # Utilities (doc creation, cache keys, validators)
├── cache.ts                 # LRU cache wrapper
├── consts/                  # Configuration constants
│   ├── white-list.const.ts  # Trusted domains
│   ├── allowed-attributes.const.ts  # XSS whitelist
│   ├── section-list.const.ts  # App route sections
│   └── regexes.const.ts     # Pattern matching
├── methods/                 # DOM node processors
│   ├── traverse.method.ts   # Main tree walker
│   ├── sanitize-html.method.ts  # XSS protection
│   ├── markdown-to-html.method.ts  # Remarkable wrapper
│   ├── a.method.ts          # Link processing
│   ├── iframe.method.ts     # Embed handling
│   ├── img.method.ts        # Image processing
│   └── ...
└── types/                   # TypeScript interfaces
    └── entry.interface.ts   # Hive post structure
```

## 构建系统

-   用途 **齐声** 用于捆绑(与其他视觉网络包共用)
-   启用严格模式的脚本 5.6+类型
-   产出三包:
    -   `dist/browser/index.js` - 带有类型脚本声明的浏览器无害环境管理
    -   `dist/node/index.mjs` - 节点无害环境管理
    -   `dist/node/index.cjs` - 节点通用JS
-   配置 : `tsup.config.ts` (双层浏览器/节点构建)
-   所有依赖关系都外部化(不是捆绑)

## 平台支持

### 原生反应(iOS/Android)

此软件包完全支持 React 本地应用程序 :

-   **软件包分辨率**编号: `react-native` 输入 `package.json` 导出可确保 React English 捆绑器( Metro) 自动解析到浏览器构建(`dist/browser/index.js`(中文(简体) )
-   **加密支持**: 当 `platform !== 'web'` (即反应原生环境),包使用 `react-native-crypto-js` 密码操作
-   **使用量**: 简单地导入通常在您的 React 原生项目中的软件包 - 不需要特殊配置

```typescript
import { renderPostBody, postBodySummary } from '@ecency/render-helper'

// The platform parameter determines the build target
// 'web' = browser/web, any other value = React Native
const html = renderPostBody(entry, false, 'react-native')
const summary = postBodySummary(entry, 200, 'react-native')
```

**平台参数**数字 :

-   `'web'` - 使用浏览器 API 和标准加密
-   任何其他价值(例如, `'react-native'`, (中文(简体) ), `'mobile'`(b) 使用与土著兼容的应用 `react-native-crypto-js`
-   要求平台参数为: `renderPostBody()` 财务报告和审定财务报表 `postBodySummary()` 函数

## 测试

-   单位测试测试(从杰斯特迁移)
-   测试文件 : `*.spec.ts` 相邻源
-   测试应核查 XSS 新特性的保护
-   不在嵌入式支持中加载外部联署材料/图书馆(安全要求)

## 重要说明

-   在为新平台添加嵌入支持时, 只执行服务器侧渲染
-   所有外部内容都必须经过消毒
-   通过 CI 自动打印所需的版本出错
-   愿景-网络单列波的一部分 -- -- 变化需要在整个依赖软件包中更新
-   这个 `@ecency/renderer` 软件包将此用作工作空间依赖
-   利用适当的无害环境管理结构,优化出口,以进行植树造林

## 常见问题

### @ecency/render-helper 是什么？

Markdown\+Html 渲染器帮助器

### 如何安装 @ecency/render-helper？

在项目目录运行 npm install @ecency/render-helper，或使用 pnpm add / yarn add / bun add。

### @ecency/render-helper 支持 TypeScript 吗？

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

### @ecency/render-helper 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ecency/render-helper 可以商用吗？

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

### @ecency/render-helper 的下载量有多少？

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

### @ecency/render-helper 还在维护吗？

最新版本 2\.5\.43 发布于 2026/11/06（7 天前）；至今共发布 182 个版本，其中过去 12 个月发布了 79 个；首次发布于 2020/10/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。