# @financial-times/n-ui 中文文档

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

版本：9\.1\.1
npm 元数据更新时间：2026-10-06T13:39:23.446Z
中文译文更新时间：2026-11-14T20:10:05.372Z
软件包许可：ISC

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

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

弃用说明：This package is no longer maintained\. Please use Page Kit to build new applications\.

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

- 包体积（解压后）：1.7 MB，165 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：^8\.9\.4
- 运行依赖：39 个
- 首次发布：2016-05-26T15:09:50.932Z
- 最新版本发布：2020-02-05T10:19:06.458Z
- 近 30 天下载量：2311（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：1179（近 12 个月 0 个）

## 中文简介

实验将 Next 的一些客户端代码组合成一个单一的寄存器.

## 安装

```sh
npm install @financial-times/n-ui
```

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

## README

# 无

[![CircleCI](https://circleci.com/gh/Financial-Times/n-ui.svg?style=svg)](https://circleci.com/gh/Financial-Times/n-ui) [![Coverage Status](https://coveralls.io/repos/github/Financial-Times/n-ui/badge.svg)](https://coveralls.io/github/Financial-Times/n-ui)

[![Yak button](https://i.imgur.com/UmScdZ4.png "Report a yak shaving incident for this repository")](https://docs.google.com/forms/d/e/1FAIpQLSf5InA7UJK9yNBCzidFKI_WNkfbl6of1eRlIACRspGXUcBx8A/viewform?usp=pp_url&entry.78759464=n-ui)

⚠️ 此组件已贬值 。 请使用 [页面 Kit](https://github.com/Financial-Times/dotcom-page-kit) 用于构建新的应用程序。 只有bug 和 security 修补此 repo 。 如果您需要添加新特性, 应用程序由 `n-ui` 请联系UI核心团队

为 ft.com 的用户创建应用程序, 服务器、 构建和客户端侧脚套 .

**请不要使用这个外 外的 使用FT。COM应用。 如果您需要配备 Handlebars 、 度量衡等设备的好快递服务器, 请考虑使用 [n- 内部工具](https://github.com/Financial-Times/n-internal-tool), (中文(简体) ), [n 表达式](https://github.com/Financial-Times/n-express) 或者从n-ui复制你需要的东西**

  

## 快速启动

n-ui有三个部分——服务器,客户端"app shell"(JS, CSS & Handlebars 版式),以及构建. **若不全部使用3.**

### 服务器

n-ui是一款围绕n-express的包装机,它增加了诱导和资产加载特性.

`npm install @financial-times/n-ui`

```javascript
const app = require('@financial-times/n-ui')(opts);

app.locals.nUiConfig = {
    preset: 'complete', // 'discrete' will turn off ads & various popups
    features: {
        lazyLoadImages: true // turns individual features on/off. Check `/browser/bootstrap/js/component-initializer.js` for an up-to-date feature list
    }
};
```

选择是支持全部的对象 `n-express`选择,但有很多选择 `true` 默认( 见 `/server/index.js` 详细情况请查阅。 其他选项包括:

-   `partialsDirectory` 字符串或数组 - 路径从中装入部分,除此标准 `views/partials` 设置为每个应用程序
-   `layoutsDir` 字符串 — 将 Handlebar 视图从调试器加载到 `node_modules/@financial-times/n-ui/layout`
-   `withJsonLd` Boolean – 输出 jsonLD 页面标题中的计划信息

### 构建

n-ui与自己的建设工具捆绑在一起 `webpack`, (中文(简体) ), `haikro build` 和一些其他的东西。 要使用它,请在您的 Makefile 中添加以下内容:

```Makefile
build:
    nui build

build-production:
    nui build --production

watch:
    nui watch
```

#### 自定义构建配置

可以在您的工程中使用自定义的 Webpack 风格配置文件 。 只要加一个 `n-ui-build.config.js` 在您的项目根中的文件. 这支持以下属性:

-   `entry` - 定义下列表格中记录的资产的切入点: [网络包装条目文档](https://webpack.js.org/concepts/entry-points/)
-   `plugins` - 将自定义插件定义为文件 [网络包插件文档](https://webpack.js.org/concepts/plugins/)
-   `pragma` - 配置 `pragma` 用于 [bail- transform- react-jsx (中文(简体) )](https://www.npmjs.com/package/babel-plugin-transform-react-jsx#usage) (单位:千美元)_默认为 `React.createElement`_) (中文(简体) ).

为定义您资产的切入点,请使用 `n-ui-build.config.js` 中的文件,它可以导出任何与 webpack 兼容的对象.

### 联合来文

#### 拖带

n-ui按顺序负责装载多填充等. n- ui 输出您想要使用的 4 个 :

-   `flags` - 特性/开发/维护/MVT旗帜对象
-   `appInfo` - 用于页面的应用程序元数据
-   `allStylesLoaded` - 承诺一旦所有懒惰的风格都到位就解决了
-   `onAppInitialized` \[需要\] — 一旦app js 成功执行, 调用功能 。 这说明在页面“完成”时的整合测试

`import` 应用程序代码中的 n- ui 的上一个或多个, 不需要再被一个函数所包裹 .

譬如说.

```javascript
import { flags , allStylesLoaded, onAppInitialized } from 'n-ui';

if (flags.get('feature')) {
    component.init();
}

allStylesLoaded
    .then(() => {
        lazyComponent.init();
        onAppInitialized(); // it’s up to you to define when your app is “ready”
    });
```

### 萨斯

`bower install n-ui`

这里没什么好谈的了 没有混音器(虽然n-ui-foundations模块有一些您想要使用的),没有棘手的 CSS 关键路径.

```sass
@import "n-ui/main";
```

这将在使用 n-ui 构建工具时,将 n-ui 的样式分割为 head-n-ui-core.cs 和 n-ui-core.cs 文件,服务器将适当内置/链接到这些文件.

### 地方发展

#### 在n-ui工作过

你应该能在n-ui工作 `make watch` 财务报告和审定财务报表 `make run` 应工作并服务于演示应用程序 `local.ft.com:5005`。 。 。 .

#### 在应用程序中测试

当地n-ui:

-   `make install`
-   `make build-css-loader`
-   `npm link`
-   `bower link`

在应用中( 如下一条) :

-   `export NEXT_APP_SHELL=local`
-   `bower link n-ui`
-   `npm link @financial-times/n-ui`
-   `make build` 在n -ui或正面面对应用的每个变化中,都需要这样做.
-   `make run`

本地测试 cli, 使用 `../n-ui/bin/nui.js build` 或者说 `../n-ui/bin/nui.js watch` 由本地的用户软件复制而来。 要先测试重建命令 `CIRCLECI_REBUILD_KEY` 使用 `export CIRCLECI_REBUILD_KEY={key}` (你可以在Vault的 n-ui 连续集成文件夹中找到密钥). 然后可以使用 `./bin/nui.js rebuild next-search-page` 在您本地的 n- ui 副本中( 可能注释到 `triggerMasterBuild` 在测试时重建函数中 `./bin/nui.js rebuild --all --serves user-page` 命令从而避免实际导致所有应用程序重建 ;)).

### 离开正井

当你发布n-ui标签时, 会发生3个事情:

-   资产建造和部署到s3,从那里与应用程序连接/下载
-   发布 npm 软件包
-   工作时段(9:00至4:00),所有面向用户的应用程序都会被重建以取回更改

## 服务器侧 API

### 链接资源( 预装) `res.linkResource(url, meta, options)`

添加链接头以优化资产请求, 默认为预装行为 :

-   `url` - 资源绝对路径或相对路径
-   `meta` - 对象定义要添加到标题中的额外属性
    -   `rel` \[默认:“ 预装” - 值 `rel` 属性
    -   `as` - 价值 `as` 属性,例如“样式表”
-   `options` - 创建信头时的额外选项
    -   `priority` - 最高值将添加链接头 _在此之前_ 所有先前添加的未指定此内容的资源( 通常不应被 apps 使用 ) — 内部用于确保 n- ui 的资源总是尽快被加载)
    -   `hashed` - 如果资产路径是真的,则将按等同的散列资产路径解决

### 导航

如果你通过了 `withNavigation:true` 在init 选项中,您将会在 `res.locals.navigation`数据来自 [导航 API](https://github.com/Financial-Times/next-navigation-api)。此数据用于添加应用程序上的各种菜单和导航项目。 现有数据如下:

```javascript
    res.locals.navigation = {
        lists: {
            navbar_desktop: // data for the main nav in the header (only on large screens)
            navbar_mobile: //data for the white strip that appears on the homepage and fastFT pages only on small screens
            drawer: //data for the slide-out menu
            footer: // data for the footer
        }
    };
```

#### 潜水

见 [我的FT页面](https://www.ft.com/myft/following) 以获取此配置的副本.

```javascript
res.locals.navigation = {
    // other settings here...

    showSubNav: true,
    // this populates the breadcrumb section at the left of the subnav
    breadcrumb: [
        {
            id: 'my-ft',
            label: 'My FT',
            url: '/myft/following'
        }
    ],
    // this populates the current level of subnav
    subsections: [
        {
            id: 'feed',
            label: 'myFT Feed',
            url: '/myft/following'
        },
        {
            id: 'alerts',
            label: 'Emails & Alerts',
            url: '/myft/alerts'
        }
    ],
    // optionally, add a 'Sign out' link to the right of the subnav (default is off)
    showSignOut: true
}
```

#### 导航等级

如果你也通过 `withNavigationHierarchy: true` 在输入选项中,您可以得到一些附加属性,详细列出当前页面在等级中的位置。 这在流页面中目前才有用 。 增加了以下属性:

```javascript
    res.locals.navigation.currentItem // the current item
    res.locals.navigation.children // an array of the direct descendant of the current page
    res.locals.navigation.ancestors // an array of the parent items of the current page (top-level first)
```

#### 版本

导航模型还控制了版本切换逻辑. 增加了以下属性:

```javascript
    res.locals.editions.current // the currently selected edition
    res.locals.editions.others //  and array of other possible editions
```

#### 有可点击标志的页眉

在同样的情况下,你可能只需要在标题中显示FT标志,并隐藏所有其他导航. 此模式被多款转换应用软件所使用.

```javascript
{
    nUi: {
        header: {
            variant: 'logo-only'
        }
    }
}
```

##### 带有不可点击的标志并隐藏页脚

如果您的页面将从 iOS 应用中链接到, 并且不允许从它中输出导航, 那么“ 隐藏出界链接” 的旗帜将被设定为真实 . 这将在不作为链接的情况下使页眉标志变为页脚并隐藏页脚.

#### 页脚修改

对页脚有类似的 nUi 控制 。 当前配置允许页脚主题更改和选项禁用.

```javascript
{
    nUi: {
        footer: {
            themeLight: true,
            legalOnly:  true
        }
    }
}
```

### 其他改进

-   我们 [处理栏](http://handlebarsjs.com/) 引擎装入部分从 `bower_components` 并拥有若干 [额外帮助者](https://github.com/Financial-Times/n-handlebars)它也指出 [n 显示](https://github.com/Financial-Times/n-layout) 以提供香草和“包装”布局
-   显示应用程序中的一切 `./public` 文件夹通过 `./{{name-of-app}}` (仅在非生产环境中,请使用) [下一个资产](https://github.com/Financial-Times/next-assets) \* 生产中的大麻脂)

## 常见问题

### @financial-times/n-ui 是什么？

实验将 Next 的一些客户端代码组合成一个单一的寄存器\.注意：该包已被作者标记为弃用——This package is no longer maintained\. Please use Page Kit to build new applications\.

### 如何安装 @financial-times/n-ui？

在项目目录运行 npm install @financial-times/n-ui，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 nui，可以用 npx nui 直接运行。

### @financial-times/n-ui 支持 TypeScript 吗？

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

### @financial-times/n-ui 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

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

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

### @financial-times/n-ui 可以商用吗？

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

### @financial-times/n-ui 的下载量有多少？

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

### @financial-times/n-ui 还在维护吗？

最新版本 9\.1\.1 发布于 2020/02/05（6 年前）；至今共发布 1179 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/05/26。作者已将其标记为弃用，新项目建议寻找替代方案。