# @financial-times/o-header-services 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-header-services/ 版本：6\.1\.0 npm 元数据更新时间：2026-10-06T13:39:45.526Z 中文译文更新时间：2026-11-14T18:32:39.660Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-header-services 原文对照：https://npmcn.com/package/%40financial-times/o-header-services/?lang=original 项目主页：https://registry.origami.ft.com/components/o-header-services ## 关键信息（来自 npm 元数据） - 包体积（解压后）：89.1 kB，26 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：@financial-times/math ^1\.0\.0，@financial-times/o-brand ^4\.1\.0，@financial-times/o-utils ^2\.0\.0，@financial-times/o-private-foundation ^1\.0\.0 - 首次发布：2019-02-12T16:55:24.483Z - 最新版本发布：2025-09-18T12:45:49.885Z - 近 30 天下载量：12232（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：67（近 12 个月 0 个） ## 中文简介 响应页面头条,指品牌最小或定制化的网站,包括内部产品,客户面对工具,以及专家头衔. ## 安装 ```sh npm install @financial-times/o-header-services ``` 也可以使用：`pnpm add @financial-times/o-header-services`、`yarn add @financial-times/o-header-services`、`bun add @financial-times/o-header-services` ## README # o-标题服务 这个标题是金融时报建造的工具和服务. - [使用量](https://npmcn.com/package/%40financial-times/o-header-services/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-header-services/#readme-markup) - [标题部分](https://npmcn.com/package/%40financial-times/o-header-services/#readme-title-section) - [主导航](https://npmcn.com/package/%40financial-times/o-header-services/#readme-primary-navigation) - [抽屉的核心经验](https://npmcn.com/package/%40financial-times/o-header-services/#readme-core-experience-of-the-drawer) - [降下主导航](https://npmcn.com/package/%40financial-times/o-header-services/#readme-primary-navigation-with-drop-down) - [二级导航](https://npmcn.com/package/%40financial-times/o-header-services/#readme-secondary-navigation) - [主题](https://npmcn.com/package/%40financial-times/o-header-services/#readme-themes) - [流血头](https://npmcn.com/package/%40financial-times/o-header-services/#readme-bleed-header) - [萨斯](https://npmcn.com/package/%40financial-times/o-header-services/#readme-sass) - [自定义](https://npmcn.com/package/%40financial-times/o-header-services/#readme-customisation) - [Java 脚本](https://npmcn.com/package/%40financial-times/o-header-services/#readme-javascript) - [移徙指南](https://npmcn.com/package/%40financial-times/o-header-services/#readme-migration-guide) - [联系人](https://npmcn.com/package/%40financial-times/o-header-services/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-header-services/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-header-services`。 。 。 . ## 标记 一个 `o-header-services` 标题分为三个主要部分:标题部分 **(必须)**,主导航 **(可选)**和二次导航 **(可选)**。每个部分置于 `header` 元素 : ```html
``` ### 标题部分 标题一节是 **所需经费** 每个标题和标题部分 _必须_ 包括标志和产品标题. 标志默认为 FT 标志—— 如果您没有使用构建服务, 您可以自定义它 `oHeaderServices()` [混音](https://npmcn.com/package/%40financial-times/o-header-services/#readme-sass)。 。 。 . 您可以选择包含一个产品标记线来简洁地描述您的产品, 并有额外内容的空间, 如标题的这一节中的“ Sign In” 链接 . _注:如果有"Sign in"选项,它应该与其他FT产品一致,通过向右对齐,并避免"Log in"或"Login"等不同措辞._ 举例和标记,见 [origami 登记簿中仅标题的标题标题](https://registry.origami.ft.com/components/o-header-services@3.2.10#demo-header-with-title-section)。 。 。 . ### 主导航 主导航是 **选项** 增加标题部分。 这对高层次的导航最有用. 这个片头有具体的行为,因为它在较小的取景口尺寸(740px下)会变成抽屉. 它要求在标题节中添加一个额外的元素来支持汉堡扣. 如果您正在使用额外内容( 如“ 签名在” 链接) , 也会被拖入抽屉 。 (这种行为可以通过增加课来压制) `.o-header-services__related-content--always-visible`(中文(简体) ) 举例和标记,见 [origami 登记处的主要导航](https://registry.origami.ft.com/components/o-header-services@3.2.10#demo-header-with-primary-navigation)。 。 。 . ### 抽取器的核心经验 小屏幕用户即使其浏览器没有访问抽屉内容,仍应能够访问 [切芥子酱](https://origami.ft.com/documentation/components/compatibility/#cuts-the-mustard) 或 JavaScript 无法装入 。 在此情况下,我们建议你把页底的抽屉内容放在一个页脚上,这个页脚只有在身体有外形时才能看到 `.core` 课。 在核心体验中,汉堡菜单链接到页面下方的锚. ### 以下放方式进行主导航 主导航还可以处理下放菜单. 这些菜单被隐藏在它相关的导航项目旁边的按钮后. 下放菜单也会被拉入较小的取景口的抽屉. 举例和标记,见 [origami 登记册中下降的主要导航](https://registry.origami.ft.com/components/o-header-services#demo-header-with-primary-navigation-and-drop-down-menus)。 。 。 . 如果从上述实例复制标记,则更新下拉导航项目的以下属性: - `aria-label`: 在标签中包含您的导航项目的标题, 用于您的下拉按钮 . - `aria-controls`: 将下拉按钮链接到 `id` 会 议 日 程 和 议 程 `ul` 它所控制的导航列表 以下示例显示了"文档"下放的正确标记: 1 ```html
  • Documentation
    • ``` ### 二次导航 二次导航也是 **选项** 加上头,但是它与主导航一起更有意义,因为它服务于更复杂的产品. 它包括了导航的两个部分:"祖先"和"孩子". "先祖"一行以面包屑为活口,子孙与先祖相对. 在较小的取景口,它确实 _没有_ 倒入抽屉,但可以滚动. 举例和标记,见 [origami 登记处二级导航](https://registry.origami.ft.com/components/o-header-services@3.2.10#demo-header-with-a-primary-and-a-secondary-navigation)。 。 。 . ### 主题 `o-header-services` 为使用核心品牌的FT.com产品提供B2B或B2C产品. 它们旨在影响标题部分和主导航. 要在标题中添加一个主题,在标题元素中添加相应的类. 例如,对于B2B,将: ```diff +
    -
    ``` 举例和标记,见 [Origami登记处的B2B和B2C头](https://registry.origami.ft.com/components/o-header-services@3.2.10#demo-product-theme-b2c)。 。 。 . ### 布莱德信头 如果你的应用程序需要一个出血头,你需要添加 `o-header-services--bleed` 变种到您的标题 . ```diff +
    -
    ``` ## 萨斯 为了输出每一种类型 `o-header-services` 样式,需要包括以下内容: ```scss @import '@financial-times/o-header-services/main'; @include oHeaderServices(); ``` 通过使用一个 `$opts` 地图。 它接受以下选择: **类型** - `'primary-nav'` - `'secondary-nav'` - `'bleed'` - `'b2b'` - `'b2c'` **标志** - 在标题中显示的标志图像 。 画作必须来自红外线 [图像集](https://registry.origami.ft.com/components?imageset=true&active=true&maintained=true)。指定图像集和图像名称为字符串 `[imageset]:[image]` (例如 `ftlogo-v1:origami`。 FT 标志的默认值. **抽屉断点** - 把主导航移入抽屉的断点. 我们建议 `rem` 值或布局大小从 [电网](https://github.com/Financial-Times/o-grid/#layout-sizes) 例如"M",默认为中网格大小"M". 要使用标志 **没有** fT徽标,该徽标可以通过两种方式之一修改: - 通过使用从标识图像集( 如 “ origami ” ) 中的标志名称 - 通过在一个完整的url或数据url中传递,在SVG上指向您想要用作标志(例如. `'https://www.example.com/logo.svg'`) (中文(简体) ). 记住,您也可以通过 [图像服务的 URL 构建器](https://www.ft.com/__origami/service/image/v2/docs/url-builder),它将优化图像,并为它提供一个URL. 在这个例子中,我们只包括一个 [主导航](https://npmcn.com/package/%40financial-times/o-header-services/#readme-primary-navigation) 与 [血液修饰器](https://npmcn.com/package/%40financial-times/o-header-services/#readme-bleed-header)我们选择使用Origami标志 [标志图像集](https://registry.origami.ft.com/components/logo-images@1.8.0)。 。 。 . ```scss @import '@financial-times/o-header-services/main'; @include oHeaderServices($opts: ( 'types': ('primary-nav', 'bleed'); 'logo': 'origami' )); // Will output styles for a bleed header with a primary navigation and the Origami logo ``` ### 自定义 `o-header-services` 提供自定义选项 `whitelabel` 商标。 如果你使用这个品牌,你可以修改特定品牌变量,在地图中将其凌驾于 `oHeaderServicesCustomize`。 。 。 . ```scss $o-brand: whitelabel; @import '@financial-times/o-header-services/main'; @include oHeaderServicesCustomize( ( 'nav-hover-background': hotpink // will apply to background colors on hover, where appropriate,,,, ) ) @include oHeaderServices( $opts: ( 'types': ( 'primary-nav', ), 'features': ( 'drop-down', ), ) ); ``` 我们建议定制以下品牌变量: - 上图 - 顶部背景 - 导航文本 - 导航背景 - 导航边境 - 导航背景 - 导航下行颜色 - 箭头-虹色 - 箭头-虹-上色 - 按钮-上色 此外,下列品牌变量也可自定义: - 文本覆盖- 颜色 - 抽屉背景 - 抽屉按钮背景 - 抽屉- 文本- 覆盖- 颜色 - 抽屉导航背景 - 一级导航-项目横向绘图 ## Java 脚本 没有代码会自动运行, 除非你正在使用构建服务 。 您必须构建一个 `o-header-services` 物体或起火 `o.DOMContentLoaded` 事件,哪个 `o-header-services` 听着. 您需要以 JavaScript 的形式公开设置您的标题 `o-header-services` 已经 _没有_ 为你建造它. JavaScript负责生成抽屉并允许在二次导航上滚动. 您可通过以下方式实施此规定: ```js import oHeaderServices from '@financial-times/o-header-services'; oHeaderServices.init(); ``` ## 移徙指南 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 6个 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-header-services/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.5 联合国 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-header-services/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.0 (韩语) | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-header-services/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.3 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-header-services/MIGRATION.md#migrating-from-v2-to-v3) | | 已贬值 | 2个 | 第2.3条 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-header-services/MIGRATION.md#migrating-from-v1-to-v2) | | 已贬值 | 1个 | 1.2 国家 | 不详 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-header-services/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-header-services 是什么？ 响应页面头条,指品牌最小或定制化的网站,包括内部产品,客户面对工具,以及专家头衔\. ### 如何安装 @financial-times/o-header-services？ 在项目目录运行 npm install @financial-times/o-header-services，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）、@financial-times/o-brand（^4\.1\.0）、@financial-times/o-utils（^2\.0\.0）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-header-services 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-header-services 是否存在。 ### @financial-times/o-header-services 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-header-services 可以商用吗？ @financial-times/o-header-services 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-header-services 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-header-services 在 2026/10/15 – 2026/11/13 这 30 天内被下载 12,232 次，日均约 408 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-header-services 还在维护吗？ 最新版本 6\.1\.0 发布于 2025/09/18（1\.2 年前）；至今共发布 67 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。