# @financial-times/o-teaser 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-teaser/ 版本：10\.0\.4 npm 元数据更新时间：2026-10-06T13:39:54.999Z 中文译文更新时间：2026-11-14T18:46:36.297Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-teaser 原文对照：https://npmcn.com/package/%40financial-times/o-teaser/?lang=original 项目主页：https://registry.origami.ft.com/components/o-teaser ## 关键信息（来自 npm 元数据） - 包体积（解压后）：160 kB，37 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：4 个 - peer 依赖：@financial-times/o-labels ^7\.0\.0 \|\| ^8\.0\.0，@financial-times/o-private-foundation ^1\.5\.0 - 首次发布：2019-02-13T14:59:54.421Z - 最新版本发布：2026-04-02T09:03:41.730Z - 近 30 天下载量：4395（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：76（近 12 个月 7 个） ## 中文简介 为取笑元素提供造型,其中包含关于一篇文章的信息并与之连接 ## 安装 ```sh npm install @financial-times/o-teaser ``` 也可以使用：`pnpm add @financial-times/o-teaser`、`yarn add @financial-times/o-teaser`、`bun add @financial-times/o-teaser` ## README # o-取用器 本部分用于展示与文章有联系的取笑者. - [使用量](https://npmcn.com/package/%40financial-times/o-teaser/#readme-usage) - [发展](https://npmcn.com/package/%40financial-times/o-teaser/#readme-development) - [标记](https://npmcn.com/package/%40financial-times/o-teaser/#readme-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-teaser/#readme-sass) - [移徙指南](https://npmcn.com/package/%40financial-times/o-teaser/#readme-migration-guide) - [联系人](https://npmcn.com/package/%40financial-times/o-teaser/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-teaser/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://npmcn.com/package/docs/legacy-o2-docs/technical-guide.md) 开始 `o-teaser`。 。 。 . ## 发展 安装 [折纸制作工具](https://github.com/Financial-Times/origami-build-tools/blob/master/README.md) 改为 [构建和运行演示](https://github.com/Financial-Times/origami-build-tools/blob/master/README.md#developing-modules-locally) ## 标记 取笑者的基本标记结构会像这样: ```html
World

Japan sells negative yield 10-year bonds

``` 可选包括: [日期](https://o2-core.origami.ft.com/?path=/docs/maintained-o-date-readme--docs&globals=backgrounds:!undefined) 在时间戳元素中提供格式化日期的组件 `o-teaser__timestamp`。这是为了制作相对时间戳,例如“1小时前”. 茶叶师支持多种 [要素](https://npmcn.com/package/%40financial-times/o-teaser/#readme-supported-elements) 并可以使用多个自定义 [主题](https://npmcn.com/package/%40financial-times/o-teaser/#readme-themes) 并应根据需要加以使用。 关于包括标记在内的全部实例清单,见 [书记官处](https://o2-core.origami.ft.com/?path=/docs/maintained-o-teaser-readme--docs&globals=backgrounds:!undefined)。 。 。 . ### 图像 要将图像添加到取笑器中,请使用下列标记结构: 1 ```html
{alt text}
``` 为了支持懒散地装入图像,您可以使用 `o-teaser__image-placeholder` 要素,如下: ```html
{alt text}
``` ### 支助要素 默认支持以下元素: ```sh .o-teaser__tag # Small coloured tag at the top of the teaser .o-teaser__tag-suffix # Small coloured content to come after the tag, such as timestamp or duration .o-teaser__tag-prefix # A container for content before the tag .o-teaser__heading # Main heading of the teaser .o-teaser__standfirst # A short piece of content .o-teaser__image-container # Wrapper element for an image .o-teaser__image # An image for the teaser .o-teaser__headshot # Author's headshot image .o-teaser__timestamp # A styled timestamp for the teaser .o-teaser__related # A list of related content links .o-teaser__related-item # A single item of a related content list ``` ## 萨斯 包括所有取笑者的风格 `oTeaser`数字 : ```scss @import '@financial-times/o-teaser/main'; @include oTeaser(); ``` 茶叶由各种元素(如:取向,站立第一,时间戳等)和一系列主题(如:小,大,视频等)组成. 通过列表 `elements` 财务报告和审定财务报表 `themes` 在选项中 `$opts` 参数只包含所需的样式 : ```scss @include oTeaser( $opts: ( 'elements': ( 'default', 'images', ), 'themes': ( 'small', 'large', 'video', ), ) ); ``` 要件通过组别加以规定,其中包括: - `default` - 所有基本文字要素,包括:标题、站起、元和标记. - `images` - 所有图像元素样式 - `promoted` - 由员额元素样式促进和支付薪金 - `related-items` - 有关项目要素的样式 - `timestamp` - 时间戳和活的邮政样式的样式 [主题](https://npmcn.com/package/%40financial-times/o-teaser/#readme-themes) 包括: - `small` - 造型为 [小笑话](https://npmcn.com/package/%40financial-times/o-teaser/#readme-small-teasers) - `large` - 造型为 [大笑话](https://npmcn.com/package/%40financial-times/o-teaser/#readme-large-teasers) - `standard` - 发表意见和反向主题 - `video` - 产出 [视频取笑器](https://npmcn.com/package/%40financial-times/o-teaser/#readme-video-teasers) 样式 - `audio` - 产出 [音频取笑器](https://npmcn.com/package/%40financial-times/o-teaser/#readme-audio-teasers) 样式 - `top-stories` - 输出所有顶级故事取笑者风格和变化 - `hero` - 全部产出 [超级英雄](https://npmcn.com/package/%40financial-times/o-teaser/#readme-hero-teasers) 笑话风格和变化 ### 主题 `o-teaser` 拥有一些主题来帮助突出内容并提供多样的布局. 主题被分出为3个类型布局,每个类型都有各自的修饰符来为样式添加不同的变体. #### 小笑话 使用 `o-teaser--small` 修饰相. 补充修改语: - `stacked`: 将图像移动到取笑器上方 - `opinion`: 将标签颜色改为蓝色 - `live`: 将背景更改为红色, 并改变元素位置, 以使取笑器突出 - `post`: 设置活博客帖样式 #### 大笑话 使用 `o-teaser--large` 修饰相. 补充修改语: - `opinion`: 添加蓝色背景 - `highlight`: 添加 claret 背景 #### 取笑英雄们 使用 `o-teaser--hero` 修饰相. [在故事书上查看示例](https://o2-core.origami.ft.com/?path=/story/maintained-o-teaser--hero-image&globals=backgrounds:!undefined) 补充修改语: - `centred`: 图像和文本居中 - `opinion`: 添加蓝色背景 - `highlight`: 添加 claret 背景 - `stretched`:使取笑者取出可用空间的全部高度,将站出和时间戳的内容固定在取笑者的下方. #### 视频取笑者 使用 `o-teaser--video` 修饰相. [在故事书上查看示例](https://o2-core.origami.ft.com/?path=/story/maintained-o-teaser--video&globals=backgrounds:!undefined) #### 视频取笑者 使用 `o-teaser--audio` 修饰相. ## 移徙指南 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 第8条 | 不详 | [迁移到 v8](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v7-to-v8) | | 已贬值 | 第7条 | 7.2.1 国家 | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.4 (中文(简体) ) | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.2 国家 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.0 (韩语) | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.5 (中文(简体) ) | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v2-to-v3) | | 已贬值 | 2个 | 2.5 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-teaser/MIGRATION.md#migrating-from-v1-to-v2) | | 已贬值 | 1个 | 1.9 (中文(简体) ) | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-teaser/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . * * * ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-teaser 是什么？ 为取笑元素提供造型,其中包含关于一篇文章的信息并与之连接 ### 如何安装 @financial-times/o-teaser？ 在项目目录运行 npm install @financial-times/o-teaser，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-labels（^7\.0\.0 \|\| ^8\.0\.0）、@financial-times/o-private-foundation（^1\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-teaser 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-teaser 是否存在。 ### @financial-times/o-teaser 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-teaser 可以商用吗？ @financial-times/o-teaser 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-teaser 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-teaser 在 2026/10/15 – 2026/11/13 这 30 天内被下载 4,395 次，日均约 147 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-teaser 还在维护吗？ 最新版本 10\.0\.4 发布于 2026/04/02（7 个月前）；至今共发布 76 个版本，其中过去 12 个月发布了 7 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。