# @contentstack/ui-extensions-sdk 中文文档规范地址：https://npmcn.com/package/%40contentstack/ui-extensions-sdk/ 版本：2\.2\.3 npm 元数据更新时间：2024-10-23T04:33:08.363Z 中文译文更新时间：2026-11-10T19:36:23.973Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40contentstack/ui-extensions-sdk 原文对照：https://npmcn.com/package/%40contentstack/ui-extensions-sdk/?lang=original 项目主页：https://github.com/contentstack/ui-extensions-sdk 源码仓库：https://github.com/contentstack/ui-extensions-sdk ## 关键信息（来自 npm 元数据） - 包体积（解压后）：423 kB，7 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：2 个 - 首次发布：2019-04-05T07:04:44.172Z - 最新版本发布：2023-08-21T13:28:23.730Z - 近 30 天下载量：3248（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：13（近 12 个月 0 个） ## 中文简介扩展 SDK 允许您通过帮助您创建自定义字段、自定义部件和 Dashboard 部件来扩展 Contact 的用户界面 . ## 安装 ```sh npm install @contentstack/ui-extensions-sdk ``` 也可以使用：`pnpm add @contentstack/ui-extensions-sdk`、`yarn add @contentstack/ui-extensions-sdk`、`bun add @contentstack/ui-extensions-sdk` ## README [](https://npmcn.com/package/%40contentstack/ui-extensions-sdk/#readme-contentstack-extensions-sdk) # 内容包扩展 SDK 扩展 SDK 允许您通过帮助您创建自定义字段、自定义部件和 Dashboard 部件来扩展 Contact 的用户界面 . **自定义字段** 使用户能够引入更简单的界面控制,如取色器,代码编辑器,视频选择器,以及更多,或可能是复杂的微网络应用,如Shoppify或Snippart. 由于其不相干的性质,自定义字段可以被多次再用. **自定义部件** 就像微内容处理应用程序帮助您分析条目内容并提出建议。您可以使用此扩展名创建一些有用的部件, 包括文本智能、 SEO 建议、语言翻译、语法检查器等 . **磁盘板部件** 让您在堆栈的仪表板上添加强大的部件, 让用户从集中位置做更多的工作。这类扩展的一些例子包括个人笔记,最近公布的内容,通知中心和堆栈使用摘要等. 此 SDK 概览文档向您介绍自定义扩展的概念 . [](https://npmcn.com/package/%40contentstack/ui-extensions-sdk/#readme-getting-started) ## 开始通过在应用程序中添加以下一行,包含扩展客户端库的编译版本. ```html ``` [](https://npmcn.com/package/%40contentstack/ui-extensions-sdk/#readme-extensions-examples) ## 扩展示例 ### 自定义字段自定义字段扩展的一些例子是: - **[颜色拾取器](https://github.com/contentstack/extensions/tree/master/color-picker)** - 显示本地取色器多填充, 允许用户选择颜色作为输入值并保存后端的颜色代码 - **[Ace 编辑器](https://github.com/contentstack/extensions/tree/master/ace-editor)** - 显示用 JavaScript 编写的代码编辑器,允许您编辑 HTML、 PHP、 JavaScript 并更容易 - **[JSON 编辑器](https://github.com/contentstack/extensions/tree/master/json-editor)** - 显示一个简单的编辑器,让您在内容类型的域内查看、编辑和格式化 JSON 代码 - **[键值字段](https://github.com/contentstack/extensions/tree/master/key-value-field)** - 让您添加密钥值作为您内容类型的字段的输入值 - **[进度栏](https://github.com/contentstack/extensions/tree/master/progress-bar)** - 允许用户通过向左或右滑动进度栏来设置字段值 - **[恒星评分](https://github.com/contentstack/extensions/tree/master/ratings)** - 让你通过选择恒星数量提供评分 - **[明亮的海湾](https://github.com/contentstack/extensions/tree/master/brightcove)** - 让您获取并展示您的亮相视频到您的内容类型. - **[购买](https://github.com/contentstack/extensions/tree/master/shopify)** - 让您将您商店的产品装入您内容类型的领域. - **[埃格尼特语Name](https://github.com/contentstack/extensions/tree/master/egnyte)** - 允许您获取您的 Egnyte 账户的文件, 并将其显示为您的内容类型 . - **[奥亚拉](https://github.com/contentstack/extensions/tree/master/ooyala)** - 让您获取并展示您的Ooyala视频到你的内容类型. - **[优化](https://github.com/contentstack/extensions/tree/master/optimizely)** ——通过允许您为每个条目选择观众来服务个性化内容. - **[YouTube (英语)](https://github.com/contentstack/extensions/tree/master/youtube)** - 让您获取并展示您的Youtube视频到您的内容类型. - **[外部 API 查询](https://github.com/contentstack/extensions/tree/master/external-api-lookup-template)** - 让您从外部 API 中获取数据, 并在 Concesstack 的条目页面上显示该字段的可能值 . ### 自定义部件自定义部件扩展的一些例子有: - [**文本智能**](https://github.com/contentstack/extensions/tree/master/text-intelligence) ——让您使用MonekyLearn API提供内容总结,关键词提取器,零售分类器等有益的建议. - [**谷歌分析**](https://github.com/contentstack/extensions/tree/master/google-analytics) - 在条目侧边栏显示您条目的流量分析和统计(使用Google分析数据). - [**优化实验**](https://github.com/contentstack/extensions/tree/master/optimizely-experiments) - 让你在条目中找到并显示最佳实验及其细节. - [**开发者工具**](https://github.com/contentstack/extensions/tree/master/developer-tools) - 这个部件扩展为开发者提供快速工具(API endpoint,JSON等),可以与一个条目或所有内容类型的条目合作,并做更多的工作. ### 磁盘板部件仪表板部件扩展的一些例子是: - [**谷歌分析**](https://github.com/contentstack/extensions/tree/master/dashboard-widget-google-analytics) - 显示你网站的流量分析和统计数据. - [**内容类型**](https://github.com/contentstack/extensions/tree/master/content-type-visualizer) - 内容类型可视化器 Dashboard Widget 在一个特定的堆栈中提供所有内容类型及其字段的图形化显示. [](https://npmcn.com/package/%40contentstack/ui-extensions-sdk/#readme-using-contentstack-styles) ## 使用内存样式扩展在 iframe 内提供,您需要将 ui-extension- sdk.min.cs 库包含在自定义扩展内,以便使用任何由 Contack 提供的样式 . 在您的扩展代码中包含 CSS 文件如下 : ```html ``` 欲了解您的扩展格式的更多信息,请参见我们 [样式指南](https://www.contentstack.com/docs/extensions/style-guide/)。。。 . [](https://npmcn.com/package/%40contentstack/ui-extensions-sdk/#readme-more-information) ## 更多信息 - [扩展 SDK API 引用](https://github.com/contentstack/ui-extensions-sdk/blob/2.2.0/docs/ui-extensions-api-reference.md) - [扩展文件](https://www.contentstack.com/docs/guide/extensions) [](https://npmcn.com/package/%40contentstack/ui-extensions-sdk/#readme-license) ## 许可证许可证根据 [麻省理工学院](https://opensource.org/licenses/MIT)。。。 . ## 常见问题 ### @contentstack/ui-extensions-sdk 是什么？扩展 SDK 允许您通过帮助您创建自定义字段、自定义部件和 Dashboard 部件来扩展 Contact 的用户界面 \. ### 如何安装 @contentstack/ui-extensions-sdk？在项目目录运行 npm install @contentstack/ui-extensions-sdk，或使用 pnpm add / yarn add / bun add。 ### @contentstack/ui-extensions-sdk 支持 TypeScript 吗？该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/contentstack\_\_ui-extensions-sdk 是否存在。 ### @contentstack/ui-extensions-sdk 支持 ESM 还是 CommonJS？以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @contentstack/ui-extensions-sdk 可以商用吗？ @contentstack/ui-extensions-sdk 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @contentstack/ui-extensions-sdk 的下载量有多少？根据 npm 官方下载统计，@contentstack/ui-extensions-sdk 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,248 次，日均约 108 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @contentstack/ui-extensions-sdk 还在维护吗？最新版本 2\.2\.3 发布于 2023/08/21（3 年前）；至今共发布 13 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。