@financial-times/o-layout

中文文档

6.0.2发布于 2026/04/02MITES Module零依赖近 30 天下载 1.2万

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

文档目录27 节

目录
概览
使用量
类型
信件
默认和 Bleed 布局
文档布局
主要内容
边栏
着陆布局
概览
条目一览表
查询布局
查询侧边栏
大视图端口
中视图端口
小视图端口
跳过链接
萨斯
Java 脚本
自定义导航
链接标题
移徙指南
解决问题
O- layout 内部组件断裂布局
联系人
许可证

弹出

全页布局包括打字.

概览

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

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

使用量

检查出来如何将 Origami 组件纳入您的项目开始 o-layout。。。 .

类型

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

<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 关于带有副本的元素.

<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-打字组件。。。 .

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

信件

所有布局都包含一个页眉和页脚区域. 这些可以被认为是"上"和"下"可能包含多个组件的区域. 例如,页眉区域可能包括标题组件,例如: o-标题服务。。。 .

默认和 Bleed 布局

默认布局是为了在另一种布局不合适时灵活使用. 我们建议使用文档, (中文(简体) ), 着陆,或查询在可能情况下,布局.

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

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

<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-标题服务就像你头部的血迹一样.

-<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           |
└————————————————————————————┘

<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 容器,以扩展元素以覆盖两列.

<!-- 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,使用下列方法:

+ <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 还有孩子名单.

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

+<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 脚本。。。 .

着陆布局

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

英雄( 可选)
主要内容

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

<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。。。 .

 <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   |
├———————————————————————————————————————┤

<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  |
├———————————————————————————————————————┤

<!-- 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 修饰品类.

<!-- 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 |         |
├———————————————————————————————————————┤

见故事书演示例如登陆页.

条目一览表

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

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

<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>

查询布局

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

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

<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 生成像文档布局这样的导航但它被默认禁用,必须打开 data-o-layout-construct-nav="true"数字 :

<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 类可用作查询边栏的子项。其内容会作为用户卷轴被粘在取景口上方.

<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 课程在页面上方。重要的是,链接出现在导航或任何其他可制表的内容之前.

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

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

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

萨斯

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

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

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

@include oLayout();

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

布局选项

文档
着陆
查询
流血

特性选项

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

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

@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 听着.

手动启用您的布局 :

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

这个文档布局使用 JavaScript 构造一个标题外的侧边栏导航(h1, (中文(简体) ), h2 财务报告和审定财务报表 h3)的内容,并根据滚动位置突出这些项目。这个查询布局也支持生成的导航,但默认是禁用.

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

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

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

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

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

<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 选项 :

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

链接标题

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

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

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

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

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

移徙指南

状态	主要版本	最后一个小版本	移徙指南
维护	6个	不详	迁移到 v6
已贬值	页:1	5.4 (中文(简体) )	迁移到 v5
已贬值	页:1	- 说吧	迁移到 v4
已贬值	3个	3.3 国家	迁移到 v3
已贬值	2个	2.2.5 国家	迁移到 v2
已贬值	1个	1.3.4 国家	- 说吧

解决问题

O- layout 内部组件断裂布局

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

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

你可以读更多关于这个班级打印部分这个读我.

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请提出问题访问 #origami - 支持或电子邮件折纸支持。。。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。。。 .

版本与发布记录

@financial-times/o-layout 共发布 79 个版本，首次发布于 2019/02/13；过去 12 个月发布了 1 个版本。

版本	发布日期	距今
`6.0.2`latest	2026/04/02	7 个月前
`6.0.1`	2025/06/30	1.4 年前
`6.0.0`	2025/02/20	1.7 年前
`5.4.0`	2024/05/31	2 年前
`5.3.4`	2023/10/27	3 年前
`5.3.3`	2023/08/25	3 年前

其他发布通道：tag--3.3.2 → 3.3.2，tag--3.3.3 → 3.3.3，prerelease → 5.0.0-beta.0。

关于 @financial-times/o-layout 的常见问题

@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 和提交记录判断。

npm install @financial-times/o-layout

pnpmpnpm add @financial-times/o-layout
yarnyarn add @financial-times/o-layout
bunbun add @financial-times/o-layout

peer 依赖@financial-times/o-brand ^4.1.0@financial-times/o-private-foundation ^1.0.0

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

12,361

约 1.2万次日均 412 次

统计周期 2026/10/15 – 2026/11/13
数据来自 npm 官方下载统计，今天更新

最新版本6.0.2发布于 7 个月前

开源许可MIT宽松许可

包体积114 kB28 个文件 · 解压后

运行依赖0 个另有 2 个 peer 依赖

模块格式ES Module

TypeScript未声明类型可查找 @types/financial-times__o-layout

发布版本79 个近 12 个月 1 个

首次发布2019/02/137 年前

元数据更新2026/10/06

每一个软件包背后，
都有分享与创造的人。