无

⚠️ 此组件已贬值 。 请使用 页面 Kit 用于构建新的应用程序。 只有bug 和 security 修补此 repo 。 如果您需要添加新特性, 应用程序由 n-ui 请联系UI核心团队

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

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

快速启动

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

服务器

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

npm install @financial-times/n-ui

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 中添加以下内容:

build:
    nui build

build-production:
    nui build --production

watch:
    nui watch

自定义构建配置

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

• entry - 定义下列表格中记录的资产的切入点: 网络包装条目文档
• plugins - 将自定义插件定义为文件 网络包插件文档
• pragma - 配置 pragma 用于 bail- transform- react-jsx (中文(简体) ) (单位:千美元)默认为 React.createElement) (中文(简体) ).

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

联合来文

拖带

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

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

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

譬如说.

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 关键路径.

@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。此数据用于添加应用程序上的各种菜单和导航项目。 现有数据如下:

    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页面 以获取此配置的副本.

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 在输入选项中,您可以得到一些附加属性,详细列出当前页面在等级中的位置。 这在流页面中目前才有用 。 增加了以下属性:

    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)

版本

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

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

有可点击标志的页眉

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

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

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

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

页脚修改

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

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

其他改进

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