# @financial-times/x-teaser 中文文档

规范地址：https://npmcn.com/package/%40financial-times/x-teaser/

版本：21\.1\.1
npm 元数据更新时间：2026-10-06T13:40:43.937Z
中文译文更新时间：2026-11-14T18:44:16.616Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/x-teaser
原文对照：https://npmcn.com/package/%40financial-times/x-teaser/?lang=original
项目主页：https://github.com/Financial-Times/x-teaser/tree/HEAD/components/x-teaser
源码仓库：https://github.com/Financial-Times/x-teaser

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

- 包体积（解压后）：316 kB，64 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：22\.x \|\| 24\.x
- 运行依赖：2 个
- peer 依赖：@financial-times/o-labels ^8\.0\.0，@financial-times/o-teaser ^10\.0\.0
- 首次发布：2018-04-12T09:10:06.084Z
- 最新版本发布：2026-09-16T13:07:48.459Z
- 近 30 天下载量：4532（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：205（近 12 个月 13 个）

## 中文简介

本模块提供模板,供与o-teaser一起使用. 茶会用来呈现内容.

## 安装

```sh
npm install @financial-times/x-teaser
```

也可以使用：`pnpm add @financial-times/x-teaser`、`yarn add @financial-times/x-teaser`、`bun add @financial-times/x-teaser`

## README

# x 调试器

本模块提供模板供使用 [o-取用器](https://github.com/Financial-Times/o-teaser). 茶叶机用于呈现内容.

## 安装

```bash
npm install --save @financial-times/x-teaser @financial-times/o-teaser
```

这个 [`x-engine`](https://github.com/Financial-Times/x-dash/tree/HEAD/packages/x-engine) 模块用于将您选择的运行时间注入组件。 请读一下 `x-engine` 文档,如果您正在消费 `x-` 在应用程序中首次使用组件.

## 概念

### 特征

由于取笑器非常复杂,有上千个可能的通相被分解成逻辑组特征. 它们是:

-   Meta, 标题上的内容分类
-   标题,内容标题
-   Standfirst,一个字幕或内容描述
-   内容公布的状况、日期或时间
-   相关链接, 相关内容链接的补充列表
-   图像, 内容的海报图像
-   标题shot, 内容作者在其列中发布内容时的图像
-   视频,用于视频内容,可以播放视频
-   自定义槽, 插入自定义组件或标记的自由槽
-   促销内容,一个插入不同类型促销内容的插槽,例如但不仅限于:剪辑,交互式图形等.

![screenshot of a teaser with features highlighted](https://user-images.githubusercontent.com/271645/38372758-7b55beac-38e7-11e8-9529-6286f384b7ce.png)

### 指标

茶叶显示器 _内容_ 但是,我们的内容项目也带有进一步描述它们的暗示和特征。 内容项目只能提供给保费订户,被排除在联合许可证之外,或选择作为编辑的选择。 这种额外数据可能并不总是能产生可见的输出,也可能不是所有用户都能看到. 然而,除了内容本身之外,它们还可以用来作出决定.

### 规则

因为有这么多 [笑话属性](https://npmcn.com/package/%40financial-times/x-teaser/#readme-properties) 某些选项可能冲突。 在这种情况下,一种选择必须优先于另一种选择。 这些坐位通过使用 _规则_. 规则集是按先后顺序执行一系列条件的函数. 当一个条件被评估为真实时,必须返回.

例如,为了决定要显示的媒体类型(视频、头像或图像),我们定义了以下规则:

```js
const media = (props) => {
  if (props.showVideo && props.video && props.video.url) {
    return 'video'
  }

  if (props.showHeadshot && props.headshot && props.headshot.url && props.indicators.isColumn) {
    return 'headshot'
  }

  if (props.showImage && props.image && props.image.url) {
    return 'image'
  }
}
```

## 使用量

本单元提供的组件都是需要绘制地图的功能 [笑话属性](https://npmcn.com/package/%40financial-times/x-teaser/#readme-properties)。它们可用于香草JavaScript或JSX(如果你不熟悉检查) [WTF为JSX](https://jasonformat.com/wtf-is-jsx/) (第一编) 例如,如果您正在使用 React 写入您的应用程序,您可以使用这样的组件 :

```jsx
import React from 'react'
import { Teaser } from '@financial-times/x-teaser'

// A == B == C
const a = Teaser(props)
const b = <Teaser {...props} />
const c = React.createElement(Teaser, props)
```

全体 `x-` 组件被设计为与各种运行时间相兼容,而不仅仅是回放. 看看这个 [`x-engine`](https://github.com/Financial-Times/x-dash/tree/HEAD/packages/x-engine) 建议的图书馆和框架清单的文档.

### 儿童成分

用于建造完整的取笑器的所有分部件都可以单独进口和使用。 每个组件都可以得到一整套 [笑话属性](https://npmcn.com/package/%40financial-times/x-teaser/#readme-properties)。 。 。 .

```jsx
import { Title, Standfirst } from '@financial-times/x-teaser'

const TeaserIsh = (title, standfirst) => (
  <div className="teaser-ish">
    <Title title={title} />
    <Standfirst standfirst={standfirst} />
  </div>
)
```

### 类型脚本

包含一个 TypeScript 定义文件,涵盖此组件预期的所有属性 。 你可以这样使用:

```ts
import { TeaserProps } from './Props'

const props: TeaserProps = {}
```

### 属性

载于 [特性](https://npmcn.com/package/%40financial-times/x-teaser/#readme-features) 记录取笑者属性,或 _道具_,也已被拆分为逻辑组。 没有道具是强制性的,也没有设定默认,但是 [预设](https://npmcn.com/package/%40financial-times/x-teaser/#readme-presets) 用于常用组合。 在道具冲突的情况下 [规则](https://npmcn.com/package/%40financial-times/x-teaser/#readme-rules) 应决定哪一个应优先。 有道具可用的TypeScript定义.

#### 特性道具

| 特性 | 类型 | 页:1 |
| --- | --- | --- |
| `showMeta` | 布尔 |  |
| `showTitle` | 布尔 |  |
| `showTitlePrefix` | 布尔 |  |
| `showStandfirst` | 布尔 |  |
| `showPremiumLabel` | 布尔 |  |
| `showExclusiveLabel` | 布尔 |  |
| `showStatus` | 布尔 |  |
| `showImage` | 布尔 |  |
| `showByline` | 布尔 | 领先于头部射击 |
| `showBylineHeadshot` | 布尔 |  |
| `showHeadshot` | 布尔 | 优于图像 |
| `showVideo` | 布尔 | 优于图像或头照 |
| `showGuidance` | 布尔 | 显示视频字幕指导 |
| `showRelatedLinks` | 布尔 |  |
| `showCustomSlot` | 布尔 |  |
| `showPromotionalContent` | 布尔 |  |

#### 通用道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `id` | 字符串 | 内容 UUID |
| `url` | 字符串 | 目录 URL |
| `relativeUrl` | 字符串 | URL 路径, 将取消 `url` |
| `type` | 字符串 | 内容类型(文章、录像等) |
| `indicators` | [指标](https://npmcn.com/package/%40financial-times/x-teaser/#readme-indicator-props) |  |
| `dataTrackable` | 字符串 | 调味器的跟踪数据 |

#### 元道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `metaPrefixText` | 字符串 | **折旧**时 `metaLinks` 属性,此文本不显示在标签中。 它正在逐步取消,有利于 `titlePrefix`,将更加省用 |
| `metaSuffixText` | 字符串 |  |
| `metaLink` | [元链接](https://npmcn.com/package/%40financial-times/x-teaser/#readme-meta-link-props) | **折旧** - 使用时 `metaLinks` 属性代替 |
| `metaAltLink` | [元链接](https://npmcn.com/package/%40financial-times/x-teaser/#readme-meta-link-props) | **折旧** - 使用时 `metaLinks` 属性代替 |
| `metaLinks` | 组合 \[字符串,字符串\] | 矩阵 `[linkText, relativeUrl]` |
| `promotedPrefixText` | 字符串 | 将优先于链接 |
| `promotedSuffixText` | 字符串 |  |

#### 标题

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `title` | 字符串 |  |
| `titlePrefix` | 字符串 |  |
| `altTitle`。 。 。 . | 字符串 | 用于测试内容变化 |

#### 站起第一支持

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `standfirst` | 字符串 |  |
| `altStandfirst` | 字符串 | 用于测试内容变化 |

#### 状态支持

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `publishedDate` | 字符串、 数字、 日期 | 上次公布日期 |
| `firstPublishedDate` | 字符串、 数字、 日期 |  |
| `useRelativeTime` | 布尔 | 发布后显示时间 |
| `status` | 字符串 | 现场博客状态 |

#### 图像道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `image` | [媒体](https://npmcn.com/package/%40financial-times/x-teaser/#readme-media-props) |  |
| `imageSize` | 字符串 | XS、小、中、大、XL或XXL |
| `imageLazyLoad` | 布尔, 字符串 | 输出图像为 `data-src` 属性。 如果这是字符串, 它将作为类名附在图像上 . |
| `imageHighestQuality` | 布尔 | 调用“ 质量=最高” 选项的图像服务, 只使用 XXL 图像 |
| `imageOptions` | 对象 | 使用指定的道具调用图像服务, 优先于其他图像选项, 如 `imageSize` 财务报告和审定财务报表 `imageHighestQuality` |

#### 副线道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `byline` | \[字符串、字符串(可选)、字符串(可选)\]的组合 | `[text, relativeUrl, headshotUrl][]` |

#### 头镜头道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `headshot` | 字符串 | 只有当 `showHeadshot` 和专栏指标为真 |
| `headshotTint` | 字符串 | 见 [图像服务 API](https://www.ft.com/__origami/service/image/v2/docs/api) 使用费 |

#### 视频道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `video` | [媒体](https://npmcn.com/package/%40financial-times/x-teaser/#readme-media-props) | 要求数 [视频](https://github.com/Financial-Times/o-video) 创建视频播放器 |
| `systemCode` | 字符串 | 视界要求通过请求. |
|  | 应该是执行系统的 Biz-Ops 代码 |  |

#### 相关链接道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `relatedLinks` | 矩阵 [链接](https://npmcn.com/package/%40financial-times/x-teaser/#readme-link-props) |  |

#### 背景说明

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `headlineTesting` | 布尔 | 启用标题测试的替代内容 |
| `parentLabel` | 字符串 | 当标签匹配时显示替代元链接 |
| `parentId` | 字符串 | 当ID匹配时显示替代元链接 |

#### 备选道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `layout` | 字符串 | "小" "大" "英雄" 或"顶层故事" |
| `theme` | 字符串 | 软件包主题, 设置此选项将覆盖其它任何指标 |
| `parentTheme` | 字符串 | 从任何父软件包继承的主题 |
| `modifiers` | 字符串 \[\] | 附加附加的额外修饰类名称 |

#### Meta 链接道具( 已过期)

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `prefLabel` | 字符串 |  |
| `url` | 字符串 | 目录 URL |
| `relativeUrl` | 字符串 | URL 路径, 将优先于 `url` |

#### 链接道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `id` | 字符串 | 内容 UUID |
| `url` | 字符串 | 目录 URL |
| `relativeUrl` | 字符串 | URL 路径, 将优先于 `url` |
| `type` | 字符串 | 内容类型(文章、录像等) |
| `title` | 字符串 |  |

#### 媒体道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `url` | 字符串 | 内容UUID,或对于图像, `data:` 或者说 `blob:` 網址 |
| `width` | 数目 |  |
| `height` | 数目 |  |

#### 指标道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `accessLevel` | 字符串 | "premium","订阅","注册",或"免费" |
| `isOpinion` | 布尔 |  |
| `isColumn` | 布尔 |  |
| `isPodcast` | 布尔 |  |
| `isEditorsChoice` | 布尔 |  |
| `isExclusive` | 布尔 | 控制独家徽章是否显示 |
| `isScoop` | 布尔 |  |

#### 特殊样式道具

| 财产 | 类型 | 页:1 |
| --- | --- | --- |
| `allowLiveTeaserStyling` | 布尔 | 应用 `o-teaser--live` 呼叫集装箱 时间轴: _消费者也需要在他们的应用中包括O-teaser造型._ |

### 预设

由于最常用的配置有这么多的选项预设,这些是: -

-   `Small`
-   `SmallHeavy`
-   `Large`
-   `Hero`
-   `HeroNarrow`
-   `HeroVideo`
-   `HeroOverlay`
-   `TopStory`
-   `TopStoryLandscape`

要使用预设导入 `presets` 属性和取笑器组件,并将您选择的预设与其他属性相混合.

```js
import { Teaser, presets } from '@financial-times/x-teaser'

const html = Teaser({ ...props, ...presets.Hero, showStatus: false })
```

## 常见问题

### @financial-times/x-teaser 是什么？

本模块提供模板,供与o-teaser一起使用\. 茶会用来呈现内容\.

### 如何安装 @financial-times/x-teaser？

在项目目录运行 npm install @financial-times/x-teaser，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-labels（^8\.0\.0）、@financial-times/o-teaser（^10\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @financial-times/x-teaser 支持 TypeScript 吗？

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

### @financial-times/x-teaser 支持 ESM 还是 CommonJS？

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

### @financial-times/x-teaser 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js 22\.x \|\| 24\.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @financial-times/x-teaser 可以商用吗？

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

### @financial-times/x-teaser 的下载量有多少？

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

### @financial-times/x-teaser 还在维护吗？

最新版本 21\.1\.1 发布于 2026/09/16（1 个月前）；至今共发布 205 个版本，其中过去 12 个月发布了 13 个；首次发布于 2018/04/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。