# @bbc/psammead-social-embed 中文文档 规范地址：https://npmcn.com/package/%40bbc/psammead-social-embed/ 版本：3\.3\.13 npm 元数据更新时间：2026-04-16T10:54:06.027Z 中文译文更新时间：2026-11-07T19:56:52.487Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-social-embed 原文对照：https://npmcn.com/package/%40bbc/psammead-social-embed/?lang=original 项目主页：https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-social-embed/README.md 源码仓库：https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-social-embed ## 关键信息（来自 npm 元数据） - 包体积（解压后）：189 kB，37 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：2 个 - peer 依赖：react \>=16\.9\.0，@emotion/styled ^11\.0\.0 - 首次发布：2020-03-20T15:14:07.894Z - 最新版本发布：2022-03-30T12:45:19.064Z - 近 30 天下载量：2852（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：61（近 12 个月 0 个） ## 中文简介 使丰富的社交媒体嵌入或倒置的组件. ## 安装 ```sh npm install @bbc/psammead-social-embed ``` 也可以使用：`pnpm add @bbc/psammead-social-embed`、`yarn add @bbc/psammead-social-embed`、`bun add @bbc/psammead-social-embed` ## README # {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我.. [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-social-embed%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-social-embed%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-social-embed)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-social-embed) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-social-embed)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-social-embed&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/social-embed--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-social-embed.svg)](https://www.npmjs.com/package/@bbc/psammead-social-embed) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) ## 说明 这个 `SocialEmbed` 组件将丰富的社交媒体嵌入一些支持的提供者或包含与源内容链接的倒置. ### 支助提供者 | 名称 | 数值 | | --- | --- | | 内存 | `instagram` | | 微博 | `twitter` | | YouTube (英语) | `youtube` | ## 安装 ``` npm install @bbc/psammead-social-embed --save ``` ## 道具 ### 光学 | 参数 | 类型 | 需求 | 默认 | 示例 | | --- | --- | --- | --- | --- | | `provider` | 字符串 | 对 | 无 | 见 [支助提供者](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-supported-providers)。 。 。 . | | `service` | 字符串 | 对 | 无 | `'news'` | | `oEmbed` | 对象 | 对 | 无 | 见 [@bbc/psammead-oembed (英语)](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-oembed#oembed)。 。 。 . | | `fallback` | 对象 | 对 | 无 | 见 [倒计时](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-fallback)。 。 。 . | | `skipLink` | 对象 | 对 | 无 | 见 [跳过链接](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-skipLink)。 。 。 . | | `caption` | 对象 | 没有 | `null` | 见 [标题](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-caption)。 。 。 . | | `onRender` | 函数 | 没有 | `null` | `() => console.log('rendered')` | | • AMP | | | | | | 参数 | 类型 | 需求 | 默认 | 示例 | | --- | --- | --- | --- | --- | | `provider` | 字符串 | 对 | 无 | 见 [支助提供者](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-supported-providers)。 。 。 . | | `service` | 字符串 | 对 | 无 | `'news'` | | `id` | 字符串 | 对 | 无 | `'1237210910835392512'` | | `fallback` | 对象 | 对 | 无 | 见 [倒计时](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-fallback)。 。 。 . | | `skipLink` | 对象 | 对 | 无 | 见 [跳过链接](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-skipLink)。 。 。 . | | `caption` | 对象 | 没有 | `null` | 见 [标题](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-caption)。 。 。 . | ### `fallback` | 参数 | 类型 | 需求 | 默认 | 示例 | | --- | --- | --- | --- | --- | | `text` | 字符串 | 对 | 无 | `"Sorry but we're having trouble displaying this content"` | | `linkText` | 字符串 | 对 | 无 | `'View content on %provider_name%'` | | `linkTextSuffixVisuallyHidden` | 字符串 | 没有 | `null` | `', external'` | | `linkHref` | 字符串 | 对 | 无 | `'https://twitter.com/MileyCyrus/status/1237210910835392512'` | | `warningText` | 字符串 | 没有 | `null` | `Warning: BBC is not responsible for third party content` | ### `skipLink` | 参数 | 类型 | 需求 | 默认 | 示例 | | --- | --- | --- | --- | --- | | `text` | 字符串 | 对 | 无 | `'Skip %provider_name% content'` | | `endTextId` | 字符串 | 对 | 无 | `'skip-%provider%-content'` | | `endTextVisuallyHidden` | 字符串 | 对 | 无 | `'End of %provider_name% content'` | ### `caption` | 参数 | 类型 | 需求 | 默认 | 示例 | | --- | --- | --- | --- | --- | | `textPrefixVisuallyHidden` | 字符串 | 没有 | `null` | `'Video caption,'` | | `text` | 字符串 | 对 | 无 | `'Warning: Third party content may contain adverts'` | 见 [无障碍说明](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-accessibility-notes) 更多信息. 注:为方便起见 `%provider%` 财务报告和审定财务报表 `%provider_name%` 内 `fallback`, (中文(简体) ), `skipLink` 财务报告和审定财务报表 `caption` 字符串将被替换为当前提供者,并在已知提供者的地方,替换提供者的名称. (原始内容存档于2018-09-21). E.G. `youtube` 财务报告和审定财务报表 `YouTube` 页:1. ## 使用量 ### 光学 传出 a [支持提供者](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-supported-providers) 和有效的 ombed 反应。 如果这两种情况都无法解决,则会提供包含与源内容链接的倒置. #### 示例 ```jsx import { CanonicalSocialEmbed } from '@bbc/psammead-social-embed'; ; ``` 本构成部分支持与难民署的整合 [反应-负载](https://www.npmjs.com/package/react-lazyload) 软件包,确保社交媒体的帖子在被看到时能够发布. #### 示例 ```jsx ``` ### 打开 此组件需要 `onRender` 当嵌入面完全渲染(目前仅用于twitter嵌入面)时. #### 示例 ```jsx import React, { useState } from 'react'; import styled from '@emotion/styled'; const DEFAULT_MIN_HEIGHT = '18.75rem'; const Wrapper = styled.div` min-height: ${({ minHeight }) => minHeight}; `; const SocialEmbedWithWrapper = ({ provider, oEmbed, skipLink, fallback, service, }) => { const [wrapperMinHeight, setWrapperMinHeight] = useState(DEFAULT_MIN_HEIGHT); return ( { setMinHeight('0'); }} /> ); }; export default SocialEmbedWithWrapper; ``` ### AMP 计划 传出 a [支持提供者](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-supported-providers)。如果无法满足这种情况,则会提供包含与源内容链接的倒置. 通过一个有效的文件 `id`。这是指URL中唯一识别源内容的部分。 (原始内容存档于2018-09-21). E.G. `1237210910835392512` 内 `https://twitter.com/MileyCyrus/status/1237210910835392512`。 。 。 . ```jsx import { AmpSocialEmbed } from '@bbc/psammead-social-embed'; ; ``` ### 何时使用此组件 本部分旨在从一些媒体中嵌入丰富的社交媒体内容 [支助提供者](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-supported-providers) 主要内容,例如文章. ### 不使用此组件时 该部分不会为外部供应商提供丰富的社交媒体 [支助提供者](https://npmcn.com/package/%40bbc/psammead-social-embed/#readme-supported-providers) – 这些会使用倒置的内容取而代之. ### 无障碍说明 本构成部分提供: [跳过链接](https://webaim.org/techniques/skipnav/),允许用户识别并跳过您页面中的社交媒体内容. `skipLink.endTextId` 应设定为唯一识别的值 `skipLink.endTextVisuallyHidden`。当一个页面上有一个以上来自同一供应商的社交媒体时,这一点尤其重要. `fallback.linkTextSuffixVisuallyHidden` 用于添加后缀到 `fallback.text`这在UI上是看不到的,但会被辅助技术所捕获. `caption.textPrefixVisuallyHidden` 用于在 `caption.text`这在UI上是看不到的,但会被辅助技术所捕获. ## 杂项 内部的一些组成部分 `SocialEmbed` 得到同样的道具 并使用 [反应. memo](https://reactjs.org/docs/react-api.html#reactmemo) 防止不必要的. ## 捐款 Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: [psammead 仓库的根](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)。 。 。 . ### [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) 我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)请稍候再读一下. ### 许可证 萨姆米德 [Apache 2.0 许可](https://github.com/bbc/psammead/blob/latest/LICENSE)。 。 。 . ## 常见问题 ### @bbc/psammead-social-embed 是什么？ 使丰富的社交媒体嵌入或倒置的组件\. ### 如何安装 @bbc/psammead-social-embed？ 在项目目录运行 npm install @bbc/psammead-social-embed，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.9\.0）、@emotion/styled（^11\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bbc/psammead-social-embed 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bbc\_\_psammead-social-embed 是否存在。 ### @bbc/psammead-social-embed 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bbc/psammead-social-embed 可以商用吗？ @bbc/psammead-social-embed 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @bbc/psammead-social-embed 的下载量有多少？ 根据 npm 官方下载统计，@bbc/psammead-social-embed 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,852 次，日均约 95 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bbc/psammead-social-embed 还在维护吗？ 最新版本 3\.3\.13 发布于 2022/03/30（4 年前）；至今共发布 61 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/03/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。