# @financial-times/o-layout 中文文档

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

版本：6\.0\.2
npm 元数据更新时间：2026-10-06T13:39:46.214Z
中文译文更新时间：2026-11-14T18:31:52.882Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-layout
原文对照：https://npmcn.com/package/%40financial-times/o-layout/?lang=original
项目主页：https://registry.origami.ft.com/components/o-layout

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

- 包体积（解压后）：114 kB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：@financial-times/o-brand ^4\.1\.0，@financial-times/o-private-foundation ^1\.0\.0
- 首次发布：2019-02-12T17:56:48.732Z
- 最新版本发布：2026-04-02T09:03:35.071Z
- 近 30 天下载量：12361（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：79（近 12 个月 1 个）

## 中文简介

提供页面布局和打字作为创建内部工具或产品的起点.

## 安装

```sh
npm install @financial-times/o-layout
```

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

## README

# 弹出

全页布局包括打字.

## 目录

-   [概览](https://npmcn.com/package/%40financial-times/o-layout/#readme-overview)
-   [使用量](https://npmcn.com/package/%40financial-times/o-layout/#readme-usage)
-   [类型](https://npmcn.com/package/%40financial-times/o-layout/#readme-typography)
-   [信件](https://npmcn.com/package/%40financial-times/o-layout/#readme-messages)
-   [默认和断层布局](https://npmcn.com/package/%40financial-times/o-layout/#readme-default-and-bleed-layout)
-   [文档布局](https://npmcn.com/package/%40financial-times/o-layout/#readme-documentation-layout)
-   [着陆布局](https://npmcn.com/package/%40financial-times/o-layout/#readme-landing-layout)
    -   [概览](https://npmcn.com/package/%40financial-times/o-layout/#readme-overview-sections)
    -   [条目一览表](https://npmcn.com/package/%40financial-times/o-layout/#readme-article-list)
-   [查询布局](https://npmcn.com/package/%40financial-times/o-layout/#readme-query-layout)
-   [萨斯](https://npmcn.com/package/%40financial-times/o-layout/#readme-sass)
-   [Java 脚本](https://npmcn.com/package/%40financial-times/o-layout/#readme-javascript)
    -   [自定义导航](https://npmcn.com/package/%40financial-times/o-layout/#readme-custom-navigation)
    -   [链接标题](https://npmcn.com/package/%40financial-times/o-layout/#readme-linking-headings)
-   [移徙指南](https://npmcn.com/package/%40financial-times/o-layout/#readme-migration-guide)
-   [解决问题](https://npmcn.com/package/%40financial-times/o-layout/#readme-troubleshooting)
-   [联系人](https://npmcn.com/package/%40financial-times/o-layout/#readme-contact)
-   [许可证](https://npmcn.com/package/%40financial-times/o-layout/#readme-licence)

## 概览

`o-layout` 提供页面布局和打字作为新页面的起点。 每个品牌提供的布局各不相同,包括:

| 版式 | 说明 | 核心品牌 | 内部品牌 | 白色标签品牌 |
| :-: | :-: | :-: | :-: | :-: |
| 默认 | 包含内容的空版式 . | ✓ | ✓ |  |
| 流血 | 带有全宽"出血"内容的空版式. | ✓ | ✓ |  |
| 文档 | 文档/博客页面布局. | ✓ | ✓ |  |
| 着陆 | 着陆/主页布局. |  | ✓ |  |
| 查询 | 搜索/清空页面布局. |  | ✓ |  |

## 使用量

检查出来 [如何将 Origami 组件纳入您的项目](https://npmcn.com/package/docs/legacy-o2-docs/technical-guide.md) 开始 `o-layout`。 。 。 .

## 类型

当写出大量拷贝时,如在文档中,可以使用 `o-layout-typography` 在一个包含的元素上.

```html
<div class="o-layout-typography">
    <h1>Page title</h1>
    <p>Some body copy.</p>
    <ul>
        <li>item a</li>
        <li>item b</li>
    </ul>
</div>
```

这将给孩子标题、段落、列表、锚和更多的标记样式,但也会影响孩子组件的样式。 这个 `.o-layout__unstyled-element` 类可用于选择退出特定元素的打字样式。 但我们建议只使用 `o-layout-typography` 关于带有副本的元素.

```html
<div class="o-layout-typography">
    <h1>Page title</h1>
    <p>Some body copy.</p>
    <ul>
        <li>item a</li>
        <li>item b</li>
    </ul>
</div>

<!-- No `.o-layout-typography` container -->
<div class="o-example-component">
    <p>A complex component.</p>
    <a href="#">example</a>
</div>

<div class="o-layout-typography">
    <p>Body copy continues.</p>
</div>
```

样式打印元素,请查看 [o-打字组件](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-typography-readme--docs&globals=backgrounds:!undefined)。 。 。 .

```html
<h1 class="o-typography-heading-level-1">Page title</h1>
<p class="o-typography-body">Some body copy.</p>
```

## 信件

所有布局都包含一个页眉和页脚区域. 这些可以被认为是"上"和"下"可能包含多个组件的区域. 例如,页眉区域可能包括标题组件,例如: [o-标题服务](https://o2-core.origami.ft.com/?path=/docs/maintained-o-header-services-readme--docs&globals=backgrounds:!undefined)。 。 。 .

## 默认和 Bleed 布局

默认布局是为了在另一种布局不合适时灵活使用. 我们建议使用 [文档](https://npmcn.com/package/%40financial-times/o-layout/#readme-documentation-layout), (中文(简体) ), [着陆](https://npmcn.com/package/%40financial-times/o-layout/#readme-landing-layout),或 [查询](https://npmcn.com/package/%40financial-times/o-layout/#readme-query-layout) 在可能情况下,布局.

默认布局有单一内容区域"主内容"

```
┌————————————————————————————┐
|           HEADER           |
├————————————————————————————┤
|        MAIN CONTENT        |
|                            |
|                            |
|                            |
├————————————————————————————┤
|           FOOTER           |
└————————————————————————————┘
```

```html
<div class="o-layout" data-o-component="o-layout">
    <div class="o-layout__header">
        <!-- Your header, navigation, and full-bleed alert messages here. -->
    </div>
    <div class="o-layout__main o-layout-typography">
        <!-- Your page content here. -->
    </div>
    <footer class="o-layout__footer">
        <!-- Your footer & navigation here. -->
    </footer>
</div>
```

内容区域默认具有最大宽度 。 使内容区全宽使用出血布局. 要使用出血布局,请添加一个修饰类 `o-layout--bleed`。不要使用任何其他布局的出血布局. _注:如果您正在使用 [o-标题服务](https://o2-core.origami.ft.com/?path=/docs/maintained-o-header-services-readme--docs&globals=backgrounds:!undefined) 就像你头部的血迹一样._

```diff
-<div class="o-layout" data-o-component="o-layout">
+<div class="o-layout o-layout--bleed" data-o-component="o-layout">
</div>
```

## 文档布局

文档布局用于文本繁多的页面,如技术文档或博客帖. 文档布局包括以下领域(除标题和页脚外):

-   主要内容
-   边栏 _(可选)_

```
┌————————————————————————————┐
|           HEADER           |
├————————————————————————————┤
| SIDE  |    MAIN CONTENT    |
| BAR   |                    |
|       |                    |
|       |                    |
├————————————————————————————┤
|           FOOTER           |
└————————————————————————————┘
```

```html
<div class="o-layout o-layout--docs" data-o-component="o-layout">
    <div class="o-layout__header">
        <!-- Your header, navigation, and full-bleed alert messages here. -->
    </div>
    <div class="o-layout__sidebar o-layout-typography">
        <!-- Your sidebar here (optional). -->
    </div>
    <div class="o-layout__main o-layout-typography">
        <!-- Your page content here. -->
    </div>
    <footer class="o-layout__footer">
        <!-- Your footer & navigation here. -->
    </footer>
</div>
```

### 主要内容

在大取景口上,主要内容区域(`o-layout__main`)分为两栏.

```
┌————————————————————————————┐
|                            |
├————————————————————————————┤
|       |   col 1    | col 2 |
|       |            |       |
|       |            |       |
|       |            |       |
├————————————————————————————┤
|                            |
└————————————————————————————┘
```

大多数内容默认被放入一栏. 例外情况是: `aside` 元素,置于第2栏 `table` 元素,跨越两列.

使用包含 `div` 有类 `o-layout__main__single-span` 将元素限制在第1栏中 `o-layout__main__full-span` 容器,以扩展元素以覆盖两列.

```html
<!-- Your page content here. -->
<div class="o-layout__main o-layout-typography">
    <!-- Most content is placed in column 1 -->
    <h2>A Title</h2>
    <p>Some content.</p>
    <!-- Asides are placed in column 2 by default -->
    <aside>An aside</aside>
    <!-- Tables span columns 1 & 2 by default -->
    <table></table>
    <!-- The class "o-layout__main__single-span" constrains elements to column 1 -->
    <div class="o-layout__main__single-span">
        <!-- Your elements -->
    </div>
    <!-- The class "o-layout__main__full-span" expands elements to span columns 1 & 2 -->
    <div class="o-layout__main__full-span">
        <!-- Your elements -->
    </div>
</div>
```

### 边栏

默认 `o-layout` 将生成文档布局的侧边栏导航。 此特性也被查询布局所支持,但默认被禁用. 您需要包含一个空的 `<div class="o-layout__sidebar>` 在你的主要内容之前 边栏链接到任意 `<h2>` 或者说 `<h3>` 主要内容区域内的元素,但以 `id`。 。 。 .

如果您想要显示非标题 `<h2>` 财务报告和审定财务报表 `<h3>` 在导航中,您可以自定义与 `data-o-layout-nav-heading-selector` 数据属性。 例如,只选择有类的标题 `nav-heading`,使用下列方法:

```diff
+ <div class="o-layout" data-o-component="o-layout" data-o-layout-nav-heading-selector=".nav-heading">
- <div class="o-layout" data-o-component="o-layout">
```

要自定义您的侧边栏导航, 请添加数据属性 `data-o-layout-construct-nav="false"` 转到根 `o-layout` 键。 那就自己加一点 `nav` 边栏中的元素,带有类 `o-layout__navigation` 还有孩子名单.

总之,一个定制的导航应该是这样的:

```diff
+<div class="o-layout" data-o-component="o-layout" data-o-layout-construct-nav="false">
    <div class="o-layout__header">
        <!-- o-header-services markup goes here -->
    </div>

    <div class="o-layout__sidebar">
+		<nav class="o-layout__navigation">
            <!-- this can be an <ol> or a <ul> -->
+			<ol>
+				<li>
+					<a href="#this-is-a-title">This is a title</a>
+				</li>
+			</ol>
+		</nav>
    </div>

    <div class="o-layout__main">
        <h2 id="this-is-a-title">This Is A Title</h2>
    </div>

    <footer class="o-layout__footer"></footer>
</div>
```

或者您可以自定义导航 [通过 Java 脚本](https://npmcn.com/package/%40financial-times/o-layout/#readme-custom-navigation)。 。 。 .

## 着陆布局

登陆布局对于主页或其他密钥类别/目录页面来说是理想的. 起落布局提供两个区域(除一个头和一个脚外):

-   英雄( 可选)
-   主要内容

```
┌————————————————————————————┐
|           HEADER           |
├————————————————————————————┤
|            HERO            |
├————————————————————————————┤
|         MAIN CONTENT       |
├————————————————————————————┤
|           FOOTER           |
└————————————————————————————┘
```

```html
<div class="o-layout o-layout--landing" data-o-component="o-layout">
    <div class="o-layout__header">
        <!-- Your header, navigation, and full-bleed alert messages here. -->
    </div>
    <div class="o-layout__hero o-layout-typography">
        <!-- Your hero content here (optional). -->
    </div>
    <div class="o-layout__main o-layout-typography">
        <!-- Your landing page content here. -->
    </div>
    <footer class="o-layout__footer">
        <!-- Your footer & navigation here. -->
    </footer>
</div>
```

当登陆页是站点的子页时,英雄区可能会与主页产生视觉冲突(例如一个类别/目录页面). 减少英雄区域对子页的影响 添加修改类 `o-layout__hero--muted`。 。 。 .

```diff
 <div class="o-layout o-layout--landing" data-o-component="o-layout">
     <div class="o-layout__header">
         <!-- Your header, navigation, and full-bleed alert messages here. -->
     </div>
+	 <div class="o-layout__hero o-layout__hero--muted o-layout-typography">
-	 <div class="o-layout__hero o-layout-typography">
         <!-- Your hero content here (optional). -->
     </div>
     <div class="o-layout__main o-layout-typography">
         <!-- Your landing page content here. -->
     </div>
     <footer class="o-layout__footer">
         <!-- Your footer & navigation here. -->
     </footer>
 </div>
```

### 概览

在主要内容区内,着陆布局提供了一个概览部分。 概览部分对于概述登陆页的关键点是理想的.

允许在概览一节内输入任何项目,但如果超过4个,则将包裹到一行中.

3项概览:

```
├———————————————————————————————————————┤
|  content  |   content   |   content   |
├———————————————————————————————————————┤
```

```html
<div class="o-layout__main o-layout-typography">
    <!-- Your landing page content here. -->
    <!-- Overview -->
    <div class="o-layout__overview">
        <div class="o-layout-item">
            <h2>Great For This</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="o-layout-item">
            <h2>Good For That</h2>
            <p>Blanditiis, dolor. Autem recusandae vero ut labore?</p>
        </div>
        <div class="o-layout-item">
            <h2>And More</h2>
            <p>
                Corrupti nemo voluptate aperiam explicabo vitae cupiditate atque fugiat
                dignissimos.
            </p>
        </div>
    </div>
</div>
```

还有一个行动概况。 这些支持一个页脚,用于突出带链接或按钮的行动呼吁.

有页脚的4个项目的行动概览:

```
├———————————————————————————————————————┤
| content | content | content | content |
| content |         | content | content |
| content |         | content |         |
├ ——————— | ——————— | ——————— | ——————— ┤
| footer  | footer  | footer  | footer  |
├———————————————————————————————————————┤
```

```html
<!-- Your landing page content here. -->
<div class="o-layout__main o-layout-typography">
    <!-- Actions Overview -->
    <div class="o-layout__overview o-layout__overview--actions">
        <div class="o-layout-item">
            <div class="o-layout-item__content">
                <h3>Here's A Thing</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="o-layout-item__footer">
                <a href="#">Take An Action</a>
            </div>
        </div>
        <div class="o-layout-item">
            <div class="o-layout-item__content">
                <h2>And Another</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti,
                    numquam!
                </p>
            </div>
            <div class="o-layout-item__footer">
                <a href="#">Do A Thing</a>
            </div>
        </div>
        <div class="o-layout-item">
            <div class="o-layout-item__content">
                <h2>And More Choices</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus,
                    voluptatibus?
                </p>
            </div>
            <div class="o-layout-item__footer">
                <a href="#">Do A Different Thing</a>
            </div>
        </div>
        <div class="o-layout-item">
            <div class="o-layout-item__content">
                <h2>What To Do</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus,
                    voluptatibus?
                </p>
            </div>
            <div class="o-layout-item__footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
</div>
```

有时,一页可能有多个概览部分. 在这种情况下,有三个概览项目,然后是另外一节,四个较窄的项目,这似乎很奇怪。 强制要求每个概览部分的项目具有相同的宽度 `o-layout__overview--consistent-columns` 修饰品类.

```html
<!-- Your landing page content here. -->
<div class="o-layout__main o-layout-typography">
    <!-- Actions Overview 1 -->
    <div class="o-layout__overview o-layout__overview--consistent-columns">
        <!-- 3 o-layout-item items (see above example) -->
    </div>

    <!-- Actions Overview 2 -->
    <div class="o-layout__overview o-layout__overview--consistent-columns">
        <!-- 4 o-layout-item items (see above example) -->
    </div>
</div>
```

```
├———————————————————————————————————————┤
| content | content | content |         |
| content |         | content |         |
| content |         | content |         |
├———————————————————————————————————————┤

├———————————————————————————————————————┤
| content | content | content | content |
| content | content | content | content |
| content |         | content |         |
├———————————————————————————————————————┤
```

[见故事书演示](https://o2-core.origami.ft.com/?path=/docs/maintained-o-header-services-readme--docs&globals=backgrounds:!undefined) 例如登陆页.

### 条目一览表

起落架布局也可以用来显示文章列表. 例如,这对博客很有用,特别是当与哑巴英雄元素结合时 `o-layout__hero--muted`。 。 。 .

要在英雄布局中列出文章,请删除 `o-layout-typography` 类从 `o-layout__main` 键。 然后添加一个未排序的孩子列表元素 `ul` 有类 `o-layout__listing` 和一些清单项目,如下所示:

```html
<div class="o-layout o-layout--landing" data-o-component="o-layout">
    <div class="o-layout__header">
        <!-- Your header, navigation, and full-bleed alert messages here. -->
    </div>
    <div class="o-layout__hero o-layout__hero--muted o-layout-typography">
        <!-- Your hero content here.  -->
    </div>
    <div class="o-layout__main">
        <ul class="o-layout__listing">
            <li class="o-layout__listing__item">
                <h2 class="o-layout__listing__item__title">
                    <a href="#">Example Article Title</a>
                </h2>
                <p class="o-layout__listing__item__description">
                    Example article description / blurb.
                </p>
                <p class="o-layout__listing__item__meta">
                    Posted
                    <time datetime="2020-10-28T00:00:00Z">20 November 2020</time> by
                    Author Name. Tagged: <span>Newsletter</span>.
                </p>
            </li>
        </ul>
    </div>
    <footer class="o-layout__footer">
        <!-- Your footer & navigation here. -->
    </footer>
</div>
```

## 查询布局

查询布局用于搜索,过滤和结果页. 它提供四个区域(除页眉和页脚外):

-   标题
-   查询侧边栏
-   主要内容
-   侧边栏 _(可选)_

```html
<div class="o-layout o-layout--query" data-o-component="o-layout">
    <div class="o-layout__header">
        <!-- Your header, navigation, and full-bleed alert messages here. -->
    </div>
    <div class="o-layout__heading o-layout-typography">
        <!-- Your title / heading content here. -->
    </div>
    <div class="o-layout__query-sidebar o-layout-typography">
        <!-- Your search or filter inputs. -->
    </div>
    <div class="o-layout__main o-layout-typography">
        <!-- Your search results or other main content. -->
    </div>
    <div class="o-layout__aside-sidebar o-layout-typography">
        <!-- Your asides / additional information (optional). -->
    </div>
    <div class="o-layout__footer">
        <!-- Your footer & navigation here. -->
    </div>
</div>
```

### 查询侧边栏

查询侧边栏支持 a [生成像文档布局这样的导航](https://npmcn.com/package/%40financial-times/o-layout/#readme-sidebar) 但它被默认禁用,必须打开 `data-o-layout-construct-nav="true"`数字 :

```html
<div
    class="o-layout o-layout--query"
    data-o-component="o-layout"
    data-o-layout-construct-nav="true"
>
    <!-- query layout -->
</div>
```

或者说 `.o-layout-sticky-sidebar-container` 类可用作查询边栏的子项。 其内容会作为用户卷轴被粘在取景口上方.

```html
<div class="o-layout o-layout--query" data-o-component="o-layout">
    <!-- ... -->
    <div class="o-layout__aside-sidebar o-layout-typography">
        <!-- Sticky container for sidebar content (optional) -->
        <div class="o-layout-sticky-sidebar-container">
            <!-- Your asides / additional information (optional). -->
        </div>
    </div>
    <!-- ... -->
</div>
```

### 大视图端口

```
┌————————————————————————————┐
|           HEADER           |
├————————————————————————————┤
|       |  HEADING   |       |
|       ├————————————┤       |
| QUERY |  MAIN      | ASIDE |
| SIDE  |  CONTENT   | SIDE  |
| BAR   |            | BAR   |
|       |            |       |
├————————————————————————————┤
|           FOOTER           |
└————————————————————————————┘
```

此布局可能不用右侧栏来使用. 要删除, 删除边栏元素 `o-layout__aside-sidebar`。 。 。 .

```
┌————————————————————————————┐
|           HEADER           |
├————————————————————————————┤
|       |  HEADING           |
|       ├————————————————————|
| QUERY |  MAIN              |
| SIDE  |  CONTENT           |
| BAR   |                    |
|       |                    |
├————————————————————————————┤
|           FOOTER           |
└————————————————————————————┘
```

### 中视图端口

```
┌————————————————————————┐
|          HEADER        |
├————————————————————————┤
|       |  HEADING       |
|       ├————————————————┤
|       |                |
| QUERY |  MAIN          |
| SIDE  |  CONTENT       |
| BAR   |                |
|       ├————————————————┤
|       | ASIDE SIDE     |
|       | BAR            |
├————————————————————————┤
|          FOOTER        |
└————————————————————————┘
```

### 小视图端口

```
┌————————————————————┐
|       HEADER       |
├————————————————————┤
| HEADING            |
├————————————————————┤
| QUERY SIDE BAR     |
├————————————————————┤
| MAIN CONTENT       |
├————————————————————┤
| ASIDE SIDE BAR     |
├————————————————————┤
|       FOOTER       |
└————————————————————┘
```

### 跳过链接

要在您的工程中添加跳过链接, 请设置链接 `o-layout-skip-link` 课程在页面上方。 重要的是,链接出现在导航或任何其他可制表的内容之前.

```html
<a class="o-layout-skip-link" href="#o-layout-main-content">
    Skip to Content
</a>
```

为确保链接通向正确位置,给主内容一个ID. 代码必须对应跳过链接的href .

```html
<main id="o-layout-main-content">
    <!-- ... -->
</main>
```

## 萨斯

您可以包含 o- layout 样式与 `oLayout` 混合剂.

作为 `o-layout` 只支持内部品牌,你的项目也必须将其品牌设置在内部 `$o-brand: 'internal';`。 。 。 .

```scss
$o-brand: 'internal';
@import '@financial-times/o-layout/main';

@include oLayout();
```

如果您的工程没有使用全部布局或其他由 : `o-layout`中,有选择地包括其中 `$opts` 参数.

**布局选项**

-   文档
-   着陆
-   查询
-   流血

**特性选项**

-   侧边栏导航(可使用 [生成侧边栏导航](https://npmcn.com/package/%40financial-times/o-layout/#readme-custom-navigation) 用于查询布局. _侧边栏导航的样式默认包含文档布局._(中文(简体) )
-   粘性侧边栏-容器(A含有用于o-layout侧栏内的元素. 粘贴在取景口上方作为用户卷轴. 见查询布局实例. )
-   链接标题(可点击/在页面上突出显示主锚)
-   打字(随类应用的可读取体打字) `o-layout-typography`(中文(简体) )

起落架布局支持额外的选项, 它设置了英雄区域的背景图像 :

```scss
@include oLayout(
    $opts: (
        'layouts': (
            'documentation',
            'landing',
            'query',
            'bleed',
        ),
        'features': (
            'linked-headings',
            'typography',
        ),
        'hero-image': 'https://example.com/image.png',
    )
);
```

## Java 脚本

没有代码会自动运行, 除非你正在使用构建服务 。 您必须构建一个 `o-layout` 手动对象或点出 O.DOMContentLoaded 事件,该事件 `o-layout` 听着.

手动启用您的布局 :

```js
import oLayout from '@financial-times/o-layout';
oLayout.init();
```

### 自定义导航

这个 [文档布局](https://npmcn.com/package/%40financial-times/o-layout/#readme-documentation-layout) 使用 JavaScript 构造一个标题外的侧边栏导航(`h1`, (中文(简体) ), `h2` 财务报告和审定财务报表 `h3`)的内容,并根据滚动位置突出这些项目。 这个 [查询布局](https://npmcn.com/package/%40financial-times/o-layout/#readme-query-layout) 也支持生成的导航,但默认是禁用.

要生成查询布局的导航,或关闭文档布局,请明确设置“构造导航”选项 `true` 或者说 `false`。或者在您的 html 中明确 `data-o-layout-construct-nav` 属性 :

```html
<div
    class="o-layout o-layout--query"
    data-o-layout-construct-nav="true"
    data-o-component="o-layout"
>
    <!-- Layout markup. -->
</div>
```

或者必须用 JavaScript, 通过设置 `constructNav` 选项 :

```js
import oLayout from '@financial-times/o-layout';
oLayout.init(null, {constructNav: true});
```

如果您想要更改生成的导航中显示的项目, 请将“ 导航标题选择器” 选项设置为任何有效的 CSS 选择器 。 在您的 html 中拼写地做到这一点 `data-o-layout-nav-heading-selector` 属性 :

```html
<div
    class="o-layout o-layout--query"
    data-o-layout-nav-heading-selector="h1, h2, .nav-heading"
    data-o-component="o-layout"
>
    <!-- Layout markup. -->
</div>
```

或者必须用 JavaScript, 通过设置 `navHeadingSelector` 选项 :

```js
import oLayout from '@financial-times/o-layout';
oLayout.init(null, {navHeadingSelector: 'h1, h2, .nav-heading'});
```

### 链接标题

标题要素,例如 `h1`, (中文(简体) ), `h2`,例如: `id` 属性默认可以链接。 然后可以点击标题,用散列来更新URL,以便共享与该标题的直接链接.

要自定义哪些标题可以点击并直接链接,请设置 `linkedHeadingSelector` 选项到任何有效的 CSS 选择器字符串 :

```js
import oLayout from '@financial-times/o-layout';
oLayout.init(null, {linkedHeadingSelector: 'h1, h2, .link-heading'});
```

通过设置关闭可链接的标题 `linkHeadings` 改为:

```js
import oLayout from '@financial-times/o-layout';
oLayout.init(null, {linkHeadings: true});
```

## 移徙指南

| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 维护 | 6个 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-layout/MIGRATION.md#migrating-from-v5-to-v6) |
| 已贬值 | 页:1 | 5.4 (中文(简体) ) | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-layout/MIGRATION.md#migrating-from-v4-to-v5) |
| 已贬值 | 页:1 | \- 说吧 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-layout/MIGRATION.md#migrating-from-v3-to-v4) |
| 已贬值 | 3个 | 3.3 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-layout/MIGRATION.md#migrating-from-v2-to-v3) |
| 已贬值 | 2个 | 2.2.5 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-layout/MIGRATION.md#migrating-from-v1-to-v2) |
| 已贬值 | 1个 | 1.3.4 国家 | \- 说吧 |

## 解决问题

### O- layout 内部组件断裂布局

其它一些折射元件在内部使用时可能会被打破 `o-layout-typography` 课。 这是因为班级风格中的儿童元素导致组件出现断裂. 理想的情况是,这一类只能使用副本.

要修复,请移除 `o-layout-typography` 类和组件应该显示为正常。 如果需要打字系统,请重新排列您的代码,以便班级可以仅瞄准需要打字系统的拷贝.

你可以读更多关于这个班级 [打印部分](https://npmcn.com/package/%40financial-times/o-layout/#readme-typography) 这个读我.

## 联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-component-boilerplate/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .

## 许可证

本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @financial-times/o-layout 是什么？

提供页面布局和打字作为创建内部工具或产品的起点\.

### 如何安装 @financial-times/o-layout？

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

### @financial-times/o-layout 支持 TypeScript 吗？

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

### @financial-times/o-layout 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @financial-times/o-layout 可以商用吗？

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

### @financial-times/o-layout 的下载量有多少？

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

### @financial-times/o-layout 还在维护吗？

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