# @automattic/social-previews 中文文档

规范地址：https://npmcn.com/package/%40automattic/social-previews/

版本：3\.4\.2
npm 元数据更新时间：2026-11-06T18:39:26.545Z
中文译文更新时间：2026-11-07T06:56:52.587Z
软件包许可：GPL-2\.0-or-later

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

原始 npm 页面：https://www.npmjs.com/package/%40automattic/social-previews
原文对照：https://npmcn.com/package/%40automattic/social-previews/?lang=original
项目主页：https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/social-previews/#readme
源码仓库：https://github.com/Automattic/social-previews

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

- 包体积（解压后）：751 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2020-07-22T13:34:58.898Z
- 最新版本发布：2026-11-02T18:07:00.662Z
- 近 30 天下载量：72150（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：93（近 12 个月 46 个）

## 中文简介

为社交引擎和搜索引擎生成文章预览的一组组件.

## 安装

```sh
npm install @automattic/social-previews
```

也可以使用：`pnpm add @automattic/social-previews`、`yarn add @automattic/social-previews`、`bun add @automattic/social-previews`

## README

# 社会审查

此软件包包含低等组件,可用于显示 _近似值_ 在各种社交媒体/搜索平台上浏览时.

## 使用量

以下是使用Facebook预览组件的简单用法示例:

```jsx
import { FacebookPreviews } from '@automattic/social-previews';

<FacebookPreviews
    title="Five for the Future"
    description="Launched in 2014, Five for the Future encourages organizations to contribute five percent of their resources to WordPress development. WordPress co-founder Matt Mullenweg proposed this benchmark to maintain a “golden ratio” of contributors to users."
    url="https://wordpress.org/five-for-the-future/"
    user={ { displayName: 'Matt Mullenweg' } }
/>;
```

您必须单独导入 CSS 来样式组件 。 您可以直接从软件包中导入 CSS 文件 :

```ts
import '@automattic/social-previews/style.css';
```

以下是使用搜索结果组件的另一个例子:

```jsx
import { GoogleSearchPreview } from '@automattic/social-previews';

<GoogleSearchPreview
    title="Five for the Future"
    description="Launched in 2014, Five for the Future encourages organizations to contribute five percent of their resources to WordPress development. WordPress co-founder Matt Mullenweg proposed this benchmark to maintain a “golden ratio” of contributors to users."
    url="https://wordpress.org/five-for-the-future/"
    siteTitle="Five for the Future"
/>;
```

Twitter预览支持同一属性来预览一则微博,但也可以以Twitter线索的形式预览多则微博. 为此 `tweets` 属性需要一系列的微博。 这个阵列中的每个项目都可以取取更多有关微博的信息,让预览有更本土的感觉.

```jsx
import { TwitterPreviews } from '@automattic/social-previews';

const tweetTemplate = {
    date: Date.now(),
    name: 'My Account Name',
    profileImage: 'https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png',
    screenName: '@myAccount',
};

<TwitterPreviews
    tweets={ [
        {
            ...tweetTemplate,
            text: 'This is the first tweet in a thread, it only has text in it.',
        },
        {
            ...tweetTemplate,
            text: 'The second tweet has some images attached, too!',
            media: [
                {
                    alt: 'The alt text for the first image.',
                    url: 'https://url.for.the/first/image.png',
                    type: 'image/png',
                },
                {
                    alt: 'The alt text for the second image.',
                    url: 'https://url.for.the/second/image.png',
                    type: 'image/png',
                },
            ],
        },
    ] }
/>;
```

LinkedIn 预览的示例

```jsx
import { LinkedInPreviews } from '@automattic/social-previews';

<LinkedInPreviews
    jobTitle="Job Title (Company Name)"
    image="https://url.for.the/image.png"
    name="LinkedIn Account Name"
    profileImage="https://static.licdn.com/sc/h/1c5u578iilxfi4m4dvc4q810q"
    title="Post title goes here"
    text="The text of the post goes here."
/>;
```

Tumblr 预览

```jsx
import { TumblrPreviews } from '@automattic/social-previews';

<TumblrPreviews
    title="Five for the Future"
    description="Launched in 2014, Five for the Future encourages organizations to contribute five percent of their resources to WordPress development. WordPress co-founder Matt Mullenweg proposed this benchmark to maintain a “golden ratio” of contributors to users."
    image="https://url.for.the/image.png"
    url="https://wordpress.org/five-for-the-future/"
    user={ { displayName: 'Matt Mullenweg' } }
    customText="Some custom text here"
/>;
```

## 属性

在所有组件中都使用一些共同属性:

-   `title` - 正在预览文章的标题.
-   `description` - 对正在预览的帖子进行较长的描述.
-   `url` - 正在预览文章的全部 URL .

此外,每个单个组件接受可选的额外属性,这些属性可能针对其指定的平台(例如: `image`, (中文(简体) ), `author`. . etc (英语).

## 自动截断

请注意,由于每个给定的平台执行的限制,一些字符串可能需要被截断. 每个组件都有各自的规则,规定在特定字段允许的字符数量,然后进行截取。 通常对 `description` 字段并缩短 `title` 字段。 截断由 `SPACE` 字符首选,但如果不可能,则强制进行硬截取。 在这两种情况下都具有椭圆形字符(`…`\`被附在字符串的末尾,以表示已发生截断.

## 警卫

需要报告安全弱点吗? 转到 [https://automattic.com/security/ (中文(中国大陆) )](https://automattic.com/security/) 或者直接到我们的安全漏洞赏金网站 [https://hackerone.com/自失常症](https://hackerone.com/automattic)。 。 。 .

## 许可证

社会审查根据下列规定获得许可: [GNU 通用公共许可证 v2( 或以后)](https://npmcn.com/package/%40automattic/social-previews/LICENSE.txt)

## 常见问题

### @automattic/social-previews 是什么？

为社交引擎和搜索引擎生成文章预览的一组组件\.

### 如何安装 @automattic/social-previews？

在项目目录运行 npm install @automattic/social-previews，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @automattic/social-previews 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/automattic\_\_social-previews 是否存在。

### @automattic/social-previews 支持 ESM 还是 CommonJS？

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

### @automattic/social-previews 可以商用吗？

@automattic/social-previews 使用 GPL-2\.0-or-later 许可。强 Copyleft：分发包含该代码的软件时，整个作品需以兼容的 GPL 许可开源。仅在内部使用、不对外分发时不触发此义务。以上为概括，不构成法律意见，请以许可原文为准。

### @automattic/social-previews 的下载量有多少？

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

### @automattic/social-previews 还在维护吗？

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