# @bbc/psammead-story-promo 中文文档

规范地址：https://npmcn.com/package/%40bbc/psammead-story-promo/

版本：8\.0\.38
npm 元数据更新时间：2026-04-16T10:49:25.776Z
中文译文更新时间：2026-11-07T18:55:17.673Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-story-promo
原文对照：https://npmcn.com/package/%40bbc/psammead-story-promo/?lang=original
项目主页：https://github.com/bbc/psammead/blob/latest/packages/components/psammead-story-promo/README.md
源码仓库：https://github.com/bbc/psammead/tree/latest/packages/components/psammead-story-promo

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

- 包体积（解压后）：357 kB，23 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：react \>=16\.9\.0，prop-types ^15\.7\.2，@emotion/react ^11\.1\.4，@emotion/styled ^11\.0\.0
- 首次发布：2019-04-25T07:45:29.145Z
- 最新版本发布：2022-03-29T12:27:25.366Z
- 近 30 天下载量：7206（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：155（近 12 个月 0 个）

## 中文简介

用于索引页面的故事宣传

## 安装

```sh
npm install @bbc/psammead-story-promo
```

也可以使用：`pnpm add @bbc/psammead-story-promo`、`yarn add @bbc/psammead-story-promo`、`bun add @bbc/psammead-story-promo`

## README

# 赞美 - 故事 - 促进 - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-story-promo%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-story-promo%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-story-promo-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-story-promo-list) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-story-promo-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-story-promo-list&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/story-promo/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/story-promo--default) [![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-story-promo.svg)](https://www.npmjs.com/package/@bbc/psammead-story-promo) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)

## 说明

这个 `StoryPromo` 组件被设计用于“index”页面,这些页面是链接到其他文章/故事的页面。 这种信息可以是任何节点的集合,尽管这些节点通常是标题、文本摘要和时间戳.

## 出口

`/index-alsos` - 与顶级故事有关的故事链接的组件.

## 安装

`npm install @bbc/psammead-story-promo`

## 故事宣传道具

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 图像 | 节点 | 没有 | 无 | `<img>` |
| 资讯 | 节点 | 对 | 不详 | `<h2>Title</h2>` |
| 媒体指标 | 节点 | 没有 | 无效 | `<MediaIndicator duration="2:15" datetime="PT2M15S" offscreenText="Video 2 minutes 15 seconds" />` |
| 目录 | 字符串 | 没有 | `ltr` | `rtl` |
| 显示图像 | 布尔 | 没有 | 真实 | 虚假 |
| 促销类型 | 字符串 | 没有 | `regular` | `top` |

## 头条道具

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 脚本 | 对象 | 对 | 拉丁语 | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| 宣传图像 | 嘘 | 没有 | 真实 | `false` |
| 促销类型 | 字符串 | 没有 | `regular` | `top` |

## 推荐摘要

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 脚本 | 对象 | 对 | 拉丁语 | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| 宣传图像 | 嘘 | 没有 | 真实 | `false` |
| 促销类型 | 字符串 | 没有 | `regular` | `top` |

## 索引Alsos

"索引"(英語:The Index Assolutes)是和上层故事相关的故事的链接.

内部 `IndexAlsos` 组件有一个可视化隐藏 第4级标题,它宣布文本作为道具通过.

当有不止一个索引时,应将其包裹在一个列表项目中 `IndexAlsosLi` 在未排序的列表中 `IndexAlsosUl` 与角色 `listitem` 财务报告和审定财务报表 `list` 页:1.

另一方面,当有一个指数时,它应该使用 `IndexAlso` 内容不应包含在清单中.

### 道具

#### 索引阿尔索斯道具

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<IndexAlsosUl><IndexAlsosLi script={latin} service="news" url="https://www.bbc.co.uk/news" mediaIndicator={<MediaIndicator service="news" type="video" indexAlsos/>}>Related content 1</IndexAlsosLi><IndexAlsosLi script={latin} service="news" url="https://www.bbc.co.uk/news">Related content 2</IndexAlsosLi></IndexAlsosUl>` |
| 关闭文本 | 字符串 | 没有 | 无效 | `Related content` |

数据属性, 例如 `data-e2e` 也可以通过测试.

#### 索引AlsoUl 道具

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<IndexAlsosLi script={latin} service="news" url="https://www.bbc.co.uk/news" mediaIndicator={<MediaIndicator service="news" type="video" indexAlsos/>}>Related content 1</IndexAlsosLi><IndexAlsosLi script={latin} service="news url="https://www.bbc.co.uk/news">Related content 2</IndexAlsosLi>` |

#### 索引AlsoLi 推进

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `This is a headline` |
| 脚本 | 对象 | 对 | 拉丁语 | {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| url 密码 | 字符串 | 对 | 不详 | `'https://www.bbc.co.uk/news'` |
| 目录 | 字符串 | 没有 | `ltr` | `rtl` |
| 媒体指标 | 节点 | 没有 | 无效 | `<MediaIndicator service="news" type="video" indexAlsos/>` |
| 介质类型 | 字符串 | 没有 | 无效 | `Video` |

#### 索引辅助

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `This is a headline` |
| 脚本 | 对象 | 对 | 拉丁语 | {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: {可以指: |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| url 密码 | 字符串 | 对 | 不详 | `'https://www.bbc.co.uk/news'` |
| 目录 | 字符串 | 没有 | `ltr` | `rtl` |
| 媒体指标 | 节点 | 没有 | 无效 | `<MediaIndicator service="news" type="video" indexAlsos/>` |
| 介质类型 | 字符串 | 没有 | 无效 | `Video` |

## 使用量

此组件的典型用例如下所示. A Image 坐在宣传片的左侧,右侧有信息元素,除了引领倒转的故事. 这些信息要素通常是一个标题、文本摘要段落和时间戳。 这个 `Headline` 财务报告和审定财务报表 `Summary` 组件由本套件提供,可导入如下所示.

这一构成部分还有一个显示媒体指标的选项,该指标包括播放图标和媒体的持续时间,如果提供了数据的话.

这个 `promoType` 参考文献 `top` 可以通过600px下采用垂直卡布局. 在600px以上的断点上,保持横向布局,图像和文字摘要各占主容器的1/2.

另一方面,一个 `promoType` 参考文献 `leading` 可以在左侧和图像或组件右侧放置信息。 图像占主容器的2/3,文本摘要占1/3.

此道具必须传递到"故事宣传","标题"和"摘要"等组件.

```jsx
import React, { Fragment } from 'react';
import StoryPromo, {
  Headline,
  Summary,
  Link,
  IndexAlsos,
  IndexAlso,
  IndexAlsosUl,
  IndexAlsosLi,
} from '@bbc/psammead-story-promo';
import MediaIndicator from '@bbc/psammead-media-indicator';
import { latin } from '@bbc/gel-foundations/scripts';
import LiveLabel from '@bbc/psammead-live-label';
import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';

const Image = <img src="https://foobar.com/image.jpg" />;

const IndexAlsosComponent = ({ alsoItems, script, service }) => (
  //This example doesn't show how the alsoItems are destructured to get the respective data
  <IndexAlsos offScreenText="Related content">
    {alsoItems.length > 1 ? (
      <IndexAlsosUl>
        <IndexAlsosLi
          script={script}
          service={service}
          url="https://www.bbc.co.uk/news"
          mediaIndicator={
            <MediaIndicator service={service} type="video" indexAlsos />
          }
        >
          Related text 1
        </IndexAlsosLi>
        <IndexAlsosLi
          script={script}
          service={service}
          url="https://www.bbc.co.uk/news"
        >
          Related text 2
        </IndexAlsosLi>
      </IndexAlsosUl>
    ) : (
      <IndexAlso>Related text</IndexAlso>
    )}
  </IndexAlsos>
);

const Info = ({ isLive, alsoItems }) => (
  <Fragment>
    <Headline script={latin} service="news" promoType="top">
      <Link href="https://www.bbc.co.uk/news">
        {isLive ? (
          <LiveLabel service="news" dir={dir} ariaHidden offScreenText="Live">
            The headline of the live promo
          </LiveLabel>
        ) : (
          'The headline of the promo'
        )}
      </Link>
    </Headline>
    <Summary script={latin} service="news" promoType="top">
      The summary of the promo
    </Summary>
    <time>12 March 2019</time>
    {topStory && alsoItems && (
      <IndexAlsosComponent
        alsoItems={alsoItems}
        script={latin}
        service="news"
      />
    )}
  </Fragment>
);

<StoryPromo image={Image} info={Info({ isLive: false })} promoType="top" />;
```

### 何时使用此组件

这个 `StoryPromo` 组件被设计在一个链接元素内使用,以使用户能够浏览另一页的故事.

### 无障碍说明

此组件使用完整的语义标记 `Headline`, (中文(简体) ), `Summary`,以及 `Link`,使用 `h3`, (中文(简体) ), `p` 财务报告和审定财务报表 `a` 页:1 其他无障碍因素,如图像替代文本和时间元素作为道具传入,未在此组件中明确设置.

连结在地上 `h3` 与Voice Over Mac和Safari合作提供更好的支持。 我们使用 `faux block link` 使整个块可以点击,同时使该块内嵌入的链接也能被点击.

这个 `LiveLabel` 上面的示例显示此组件被隐藏用于屏幕阅读器,并且有可视化的隐藏文本同时渲染。 这是为了确保屏幕阅读器正确宣布"活"字. 无需用其他语文说明.

## 路线图

## 捐款

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-story-promo 是什么？

用于索引页面的故事宣传

### 如何安装 @bbc/psammead-story-promo？

在项目目录运行 npm install @bbc/psammead-story-promo，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.9\.0）、prop-types（^15\.7\.2）、@emotion/react（^11\.1\.4）、@emotion/styled（^11\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bbc/psammead-story-promo 支持 TypeScript 吗？

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

### @bbc/psammead-story-promo 支持 ESM 还是 CommonJS？

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

### @bbc/psammead-story-promo 可以商用吗？

@bbc/psammead-story-promo 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @bbc/psammead-story-promo 的下载量有多少？

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

### @bbc/psammead-story-promo 还在维护吗？

最新版本 8\.0\.38 发布于 2022/03/29（4 年前）；至今共发布 155 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。