# @flourish/layout 中文文档

规范地址：https://npmcn.com/package/%40flourish/layout/

版本：8\.8\.3
npm 元数据更新时间：2026-09-01T12:49:41.047Z
中文译文更新时间：2026-11-15T00:02:18.276Z
软件包许可：LicenseRef-LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40flourish/layout
原文对照：https://npmcn.com/package/%40flourish/layout/?lang=original

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

- 包体积（解压后）：449 kB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：9 个
- 首次发布：2018-08-10T13:00:07.207Z
- 最新版本发布：2026-09-01T12:49:40.856Z
- 近 30 天下载量：6275（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：88（近 12 个月 4 个）

## 中文简介

用于控制布局的面粉模块

## 安装

```sh
npm install @flourish/layout
```

也可以使用：`pnpm add @flourish/layout`、`yarn add @flourish/layout`、`bun add @flourish/layout`

## README

# 面粉布局

向面粉模板中添加一个包装和部分,并包含一系列设置和功能.

## 如何安装

`npm install -s @flourish/layout`

添加一个 `layout` 对象到模板状态 :

```js
export var state = {
    layout: {},
    ...
}
```

导入 `@flourish/layout` 进入您的 `template.yml` 设置.

## 如何使用

初始化任何函数外的布局( 只一次) _布局设置对象_数字 :

```js
import initLayout from "@flourish/layout";
var layout = initLayout(state.layout);
```

这增加了一个 `main` _包装_ 转到有5个名称的页面 `section`编号: _标题_, (中文(简体) ), _控件_, (中文(简体) ), _传说_, (中文(简体) ), _小学_ 财务报告和审定财务报表 _页脚_编辑 _小学_ 区域是一个灵活的容器,在高度上进行调整,以在另一个区域的内容之后填补可用的空间 `section`s已考虑在内。 这个 `initLayout` 调用还添加隐藏 _覆盖_ `div` 页:1 _小学_ 如果一个模板在旧浏览器中无法工作的话,可以用来显示一个消息.

这个 `layout` 对象有多种方法:

### `layout.getDefaultPrimaryHeight()`

如果使用标准的面粉断点( 除非在 `fixed_height` 模式,在此情况下返回实际可用的高度。 在使用标准面粉断点与使用 `setHeight` 方法(见下文).

### `layout.getOuterHeight([el])`

返回命名的高度 `section`包括贴花 若为 `el` 时,函数返回高度 _包装_ 节点,包括地垫.

### `layout.getOuterWidth([el])`

返回命名的宽度 `section`包括贴花 若为 `el` ,函数返回宽度 _包装_ 节点,包括地垫.

### `layout.getOverlay()`

返回( 隐藏- 默认) _覆盖_ `div` 节点.

### `layout.getInnerHeight([el])`

返回命名的高度 `section`,不包括贴花. 若为 `el` 时,函数返回高度 _包装_ 节点,不包括地垫.

### `layout.getInnerWidth([el])`

返回命名的宽度 `section`,不包括贴花. 若为 `el` ,函数返回宽度 _包装_ 节点,不包括地垫.

### `layout.getPrimaryHeight()`

返回主容器内内容可用的高度.

### `layout.getPrimaryWidth()`

返回主容器内内容可用的宽度.

### `layout.getSection(el)`

返回内部的容器节点 `section` `el`。例如,这有利于在图例中添加一个图例块 _传说_ 在面粉中的区域 `draw` 方法。 (直接添加到 `section` 应该避免,因为这会弄得一团糟。 )

### `layout.getSidebar()`

返回 `sidebar` 节点.

### `layout.getWrapper()`

返回 `main` _包装_ 节点.

### `layout.remToPx(rem)`

返回像素值为雷姆值。 当您需要在 SVG 中添加 rem 值时,此功能是有用的 .

### `layout.setHeight(primary_height)`

若为 `primary_height` 是数字,然后计算 `total_height` 需要满足 _小学_ 在那个高地和所有其他 `section`s 在当前高度进入页面时没有滚动条和呼叫 `Flourish.setHeight(total_height)`如果 `primary_height` 等于 `null` 然后打电话 `Flourish.setHeight(null)`。 。 。 .

### `layout.showOverlay(show_overlay)`

若为 `show_overlay` 是真的,它会显示 覆盖容器,如果它是发酵 它会隐藏它。 若为 `show_overlay` 是一个(非空的)字符串,然后该字符串将被用作覆盖内包含的段落元素的内容。 若为 `show_overlay` 是一个不是字符串的真理值,然后显示默认文本,建议用户更新其浏览器.

### `layout.update()`

更新字体, `section` 基于当前值的顺序、标题和页脚 _布局设置对象_。 。 。 .

### `layout.awaitFonts(callback, duration, font_weights)`

开始装入字体并执行一个函数 `callback` 当所有字体都装入时(使用 `document.fonts.ready` 事件听众)。 如果可选数组 `font_weights` 为每个字体重量提供无形的样本文本,然后在装入该重量时删除。 这样就停了 `callback` 正在对字体的每个重量不必要地触发。 例如,如果一个模板只包含有正常重量的字体,则包括粗体字体的弹出会触发字体加载事件. `font_weights` 默认为 `["normal", "bold"]` (数字值也被接受). 如果所有字体没有被给定的加载 `duration` (ms,默认为500),那么回调会提前执行. 当字体最终装入完成时,调用会被再次执行. 一旦 `document.fonts.ready` 已触发事件,将设置一个新的事件倾听器,以收听进一步的字体加载事件,即在编辑器中选择一个新的字体. **这在v5.4.中被引入.** 使用模块以前的版本更新模板(使用 [@flourish/font-观察者](https://github.com/kiln/flourish-font-watcher))至v5.4及以上 [v5.4 移徙指南](https://npmcn.com/package/%40flourish/layout/MIGRATIONS.md#migrating-to-v54)。 。 。 .

### `layout.prepareScreenshotSVG()`

创建包含页眉和页脚文本的临时 SVG,这些文本将包含在 SVG 导出中 。 在模板中确保调用此函数 `screenshot` 函数.

### `layout.clearScreenshotSVG()`

删除由 `layout.prepareScreenshotSVG()`

## 常见问题

### @flourish/layout 是什么？

用于控制布局的面粉模块

### 如何安装 @flourish/layout？

在项目目录运行 npm install @flourish/layout，或使用 pnpm add / yarn add / bun add。

### @flourish/layout 支持 TypeScript 吗？

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

### @flourish/layout 支持 ESM 还是 CommonJS？

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

### @flourish/layout 可以商用吗？

@flourish/layout 使用 LicenseRef-LICENSE 许可。声明的许可为 LicenseRef-LICENSE，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @flourish/layout 的下载量有多少？

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

### @flourish/layout 还在维护吗？

最新版本 8\.8\.3 发布于 2026/09/01（2 个月前）；至今共发布 88 个版本，其中过去 12 个月发布了 4 个；首次发布于 2018/08/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。