# 印在橙红色新闻纸上的财经版 > 一份八版柏林版日报，财经版用一个标题样式改变页面：橙红色纸张、六栏、石油蓝强调色，外加一个供Folio使用的:::paper块。 - HTML版本: https://postext.dev/zh/cookbook/business-section-on-salmon - 食谱 No. 134 · 完整出版物 · 难度 3 (高级) · 输出: Canvas - 体裁: 报纸与通讯 - 需要 postext ≥ 1.18.0 · 已用 1.18.0 测试，日期 2026-10-06 - 页面: [1](https://postext.dev/cookbook/business-section-on-salmon/en/p01.webp?v=a6def7aa), [2](https://postext.dev/cookbook/business-section-on-salmon/en/p02.webp?v=a6def7aa), [3](https://postext.dev/cookbook/business-section-on-salmon/en/p03.webp?v=a6def7aa), [4](https://postext.dev/cookbook/business-section-on-salmon/en/p04.webp?v=a6def7aa), [5](https://postext.dev/cookbook/business-section-on-salmon/en/p05.webp?v=a6def7aa), [6](https://postext.dev/cookbook/business-section-on-salmon/en/p06.webp?v=a6def7aa), [7](https://postext.dev/cookbook/business-section-on-salmon/en/p07.webp?v=a6def7aa) - 在沙盒中打开: https://postext.dev/zh/sandbox#recipe=business-section-on-salmon&lang=en (.postext: https://postext.dev/cookbook/business-section-on-salmon/en/business-section-on-salmon.postext) - 最后更新: 2026-10-06 - 其他语言: [en](https://postext.dev/en/cookbook/business-section-on-salmon.md), [es](https://postext.dev/es/cookbook/business-section-on-salmon.md), [ca](https://postext.dev/ca/cookbook/business-section-on-salmon.md), [ja](https://postext.dev/ja/cookbook/business-section-on-salmon.md), [ar](https://postext.dev/ar/cookbook/business-section-on-salmon.md) ## 简单来说 一份虚构日报的八个版面。前四版是新闻，印在灰白色纸上；后面的财经版印在橙红色纸上，栏更窄，颜色也不一样。 ## 成品一览 虚构日报《The Marrowick Ledger》的八个版面，开本为315 × 470 mm的柏林版。第1至4版是新闻，印在灰白色新闻纸上，分五栏，栏间有细线，每版有一个红色版名标签。从第5版起纸张变了。财经版印在橙红色纸上，财经版面一百多年来一直这样印：页面变成#f2d3c0，网格收窄为六栏，强调色从红色换成石油蓝，版名下面是一条当日收盘行情。版内有一个市场版，载有本市指数一年的走势、一张行业图和四张数据表，还有公司新闻和一个股价版。在Folio的3D视图里，两张对折的纸一张套一张，最后四版印在橙红色纸上。 **这份食谱回答的问题:** - 怎样把报纸的财经版印在橙红色纸上，用自己的版式网格，在3D查看器里也一样？ - 怎样让封面、插页或图版使用与全书不同的纸张？ - 报纸版面怎么排：对开报纸分五栏，一张照片横跨两栏，一个新闻框横跨三栏？ - 怎样把书分成若干篇或部分，每篇有自己的颜色和隔页？ ## 简短回答 ```js // script.js, 行 96–123 // page.backgroundColor links to 'paper', so the section's palette, which turns 'paper' salmon, // repaints every page of the section: the opener and the pages its copy runs on to. const business = { id: 'business', advancedDesign: { enabled: true, slot: { elements: flagParts } }, // The swap: the page, flags, kickers, the folio line, chart marks and table heads follow. palette: { paper: palette.salmon, accent: palette.petrol, tint: '#e6bfa8' }, // Six narrower columns, ruled as the news pages are. layout: { layoutType: 'multiple', columnCount: 6, gutterWidth: mm(4) }, bodyStyle: { fontSize: pt(8.8), lineHeight: pt(LEAD) }, }; // The section front: the same style, with a bigger flag over the market close strip. const front = () => ({ ...business, id: 'business-front', advancedDesign: { enabled: true, slot: { elements: [depth(10), text('title', 'Business', { fontFamily: 'Playfair Display', fontSize: pt(58), fontWeight: 900, lineHeight: 1, color: col('accent') }, at('container', 'top-left', 0, -1)), text('tag', 'Companies · Markets · Money', caps(9, 700, 'accent'), at('#title', 'right-of', 5, 9)), rule('top', 3, at('#title', 'below', 0, 2)), ...STRIP().flatMap(([name, value, change], i) => [ // the day's close, from the market data text(`s${i}`, name, caps(7, 700, 'muted'), at('#top', 'below', (i * WIDE) / 6, 1.8)), text(`v${i}`, value, sans(13, 700), at(`#s${i}`, 'below', 0, 0.6)), text(`c${i}`, change, sans(9.5, 600, { color: col(change[0] === '+' ? 'accent' : 'muted') }), at(`#v${i}`, 'right-of', 1.6, 1))]), rule('under', 0.5, at('#depth', 'align-bottom', 0, -1.4))] } } }); // hook-up: headingStyles lists both, and the Markdown wraps pages 5–8 in // :::paper{type="newsprint" shade="#faede6"} ← the stock Folio prints them on // # Business {style="business-front"} … # Markets {style="business"} … ::: ``` ## 用料 **讲解** - [为一组页面换用纸张](https://postext.dev/zh/docs/document-format.md#paper): :::paper容器让其中的页面使用自己的纸张：铜版纸图版、卡纸封面或几页色纸。 - [三栏及以上](https://postext.dev/zh/docs/configuration.md#版式类型): layoutType 'multiple'把正文分成columnCount个等宽的栏（3到8栏），用于报纸和杂志；栏线、齐栏、脚注和通栏浮动体在所有栏中都适用。 - [对折的报纸（Folio）](https://postext.dev/zh/docs/configuration.md#书页视图配置): folio.binding.type 'folded'：纸张对折一次，一张套一张，不用订书钉，没有书脊和封面板；带shade的:::paper段把某一版印在鲑鱼色新闻纸上。 **还用到** - [报纸开本](https://postext.dev/zh/docs/configuration.md#页面尺寸预设) - [跨多栏的浮动体](https://postext.dev/zh/docs/document-format.md#位置) - [标题样式](https://postext.dev/zh/docs/configuration.md#标题样式) - [分节版式](https://postext.dev/zh/docs/configuration.md#标题样式) - [按篇配色](https://postext.dev/zh/docs/configuration.md#part容器) - [纸张颜色](https://postext.dev/zh/docs/configuration.md#页面) - [设计过的章首页](https://postext.dev/zh/docs/configuration.md#通栏与高级设计) - [锚定设计元素](https://postext.dev/zh/docs/configuration.md#元素定位) - [书眉与页码](https://postext.dev/zh/docs/configuration.md#页眉与页脚) - [栏间线](https://postext.dev/zh/docs/configuration.md#栏线) - [横跨页面的框](https://postext.dev/zh/docs/configuration.md#callout容器) - [浮动框](https://postext.dev/zh/docs/configuration.md#callout容器) - [框内分栏](https://postext.dev/zh/docs/document-format.md#columns) - [命名表格样式](https://postext.dev/zh/docs/configuration.md#命名表格样式) - [图的放置](https://postext.dev/zh/docs/document-format.md#位置) - [图就放在这里](https://postext.dev/zh/docs/document-format.md#块级嵌入可选显式的行内放置) - [纸张、装订、台面与光照（Folio）](https://postext.dev/zh/docs/configuration.md#书页视图配置) - [标注框](https://postext.dev/zh/docs/configuration.md#标注框样式) - [决定图位置的引用](https://postext.dev/zh/docs/document-format.md#行内引用主要写法) - [标题属性](https://postext.dev/zh/docs/document-format.md#标题属性) - [通栏章首色带](https://postext.dev/zh/docs/configuration.md#通栏与高级设计) - [段落样式](https://postext.dev/zh/docs/configuration.md#段落样式) - [自定义资源类型](https://postext.dev/zh/docs/configuration.md#资源类型) - [作为资源的图和表](https://postext.dev/zh/docs/document-format.md#资源) - [分节书眉](https://postext.dev/zh/docs/configuration.md#标题样式) - [显式竖向间距](https://postext.dev/zh/docs/document-format.md#space) **配置一览** - [`bodyText`](https://postext.dev/zh/docs/configuration.md#正文), [`calloutStyles`](https://postext.dev/zh/docs/configuration.md#标注框样式), [`captionStyle`](https://postext.dev/zh/docs/configuration.md#题注样式), [`colorPalette`](https://postext.dev/zh/docs/configuration.md#调色板), `folio`, [`footer`](https://postext.dev/zh/docs/configuration.md#页眉与页脚), [`header`](https://postext.dev/zh/docs/configuration.md#页眉与页脚), [`headingStyles`](https://postext.dev/zh/docs/configuration.md#标题样式), [`headings`](https://postext.dev/zh/docs/configuration.md#标题), [`layout`](https://postext.dev/zh/docs/configuration.md#版式), [`locale`](https://postext.dev/zh/docs/configuration.md#断词), [`page`](https://postext.dev/zh/docs/configuration.md#页面), [`paragraphStyles`](https://postext.dev/zh/docs/configuration.md#段落样式), [`resourceTypes`](https://postext.dev/zh/docs/configuration.md#资源类型), [`tableStyle`](https://postext.dev/zh/docs/configuration.md#表格样式), [`tableStyles`](https://postext.dev/zh/docs/configuration.md#命名表格样式) **API** - [`buildDocument`](https://postext.dev/zh/docs/configuration.md#构建文档), [`clearMeasurementCache`](https://postext.dev/zh/docs/configuration.md#测量缓存), [`registerResourceImage`](https://postext.dev/zh/docs/architecture.md#api接口), [`renderPageToCanvas`](https://postext.dev/zh/docs/configuration.md#把页面渲染为位图) **字体** - Source Serif 4 (OFL-1.1), Playfair Display (OFL-1.1), Archivo Narrow (OFL-1.1) ## 做法 ### 1 · 一个调色板里的两种纸 ```js // script.js, 行 18–32 const palette = { ink: '#16181b', // text and heavy rules paper: '#f6f4ef', // the page: grey-white newsprint (salmon in Business) accent: '#b3261e', // news red: flags, kickers, chart marks (petrol in Business) tint: '#e8e4da', // box fills (a deeper salmon in Business) rule: '#9d9a93', // hairlines muted: '#5c5954', // bylines, the folio line, credits salmon: '#f2d3c0', // the business stock, and the teaser patches on page 1 petrol: '#0f4c5c', // the business accent }; const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id }); const colorPalette = [ ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })), { id: 'main-color', name: 'ink (defaults)', value: { hex: palette.ink, model: 'hex' } }, ]; ``` 配置里的每一种颜色都链接到调色板的八个条目之一。新闻版用`paper`（#f6f4ef）作页面颜色，用`accent`（#b3261e）作版名标签、眉题和图表标记。财经版保留这些链接，只改它们的值：分区调色板把`paper`改成橙红色，`accent`改成石油蓝（#0f4c5c），`tint`改成更深的橙红色。`salmon`另有一个条目，用于头版的报耳和导读条，它们在白色版面上仍然是橙红色。 ### 2 · 一个标题样式让一页变成财经版 代码见上面的[简短回答](#简短回答)。`# Markets {style="business"}`开始一个分区，分区内各页采用样式的`palette`、`layout`和`bodyStyle`：六栏，栏间距4 mm（每栏45.2 mm，新闻版为54.6 mm），正文8.8 pt，行距仍是11.4 pt。页面颜色也跟着调色板走。`page.backgroundColor`链接到`paper`，分区调色板一旦给`paper`另一个值，这个分区的每一页都用它来画：标题所开的那一页，以及稿件转到的任何一页。所以财经版从边到边都是橙红色，而栏间线沿用文档的设置（样式的`layout`没有改它），像在五栏之间一样画在六栏之间。 ### 3 · 每一版都以版名标签开头 ```js // script.js, 行 74–92 const flagParts = [ depth(3), rule('bar', 3, at('#depth', 'align-bottom', 0, -1.4)), text('flag', '{titleText}', { ...caps(12, 700, 'paper'), box: patch('accent', pad(1.3, 3.5)) }, at('#bar', 'above')), ]; const FOLIO = 9; // mm from the top edge const folioLine = (parity, side, s) => [ // s: +1 on a verso (folio on the left), −1 on a recto text(`n-${parity}`, '{pageNumber}', { ...sans(11, 700), align: side }, at('page', `top-${side}`, s * M.side, FOLIO)), text(`t-${parity}`, '{title} · {publishDate}', { ...caps(7.5, 600, 'muted'), align: side }, at(`#n-${parity}`, s > 0 ? 'right-of' : 'left-of', s * 3, 1)), text(`c-${parity}`, '{chapterTitle}', { ...caps(7.5, 700, 'accent'), align: s > 0 ? 'right' : 'left' }, at('page', `top-${s > 0 ? 'right' : 'left'}`, -s * M.side, FOLIO + 1)), ].map((element) => ({ ...element, parity })); const header = { elements: [...folioLine('even', 'left', 1), ...folioLine('odd', 'right', -1), { kind: 'rule', id: 'folio-rule', thickness: pt(0.5), color: col('ink'), placement: { ...at('page', 'top-left', M.side, FOLIO + 5), size: { width: mm(WIDE) } } }] }; ``` H1是通页宽的版头，`breakBefore`的奇偶为`'any'`，所以每个标题都从下一页开始，不论单双页。它的设计是3 pt粗线上的一个标签，深三行网格。页眉行固定在离上边缘9 mm处：外侧是页码、报名和日期，内侧是用强调色排的`{chapterTitle}`，在橙红色版面上调色板把它变成石油蓝。 ### 4 · 跨k栏的照片和图表 ```js // script.js, 行 461–489 const unnumbered = (id, name, captionStyle) => ({ id, name, shortLabel: name, captionPrefix: '', numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal', captionStyle }); const resourceTypes = [unnumbered('picture', 'Picture'), unnumbered('panel', 'Panel', { position: 'above', fontSize: pt(9.5) })]; const res = (id, typeId, kind, body, extra) => ({ id, typeId, kind, [kind]: body, createdAt: 0, updatedAt: 0, ...extra }); const photo = (id, file, [w, h], placement) => res(id, 'picture', 'bitmap', { fileId: file, format: 'jpeg', width: w, height: h }, { placement, ...CAPTIONS[id] }); const drawing = (id, [w, h], placement) => res(id, 'picture', 'svg', { fileId: `${id}.svg`, width: w, height: h }, { placement, ...CAPTIONS[id] }); const data = (id, model, caption, note) => res(id, 'panel', 'table', { model }, { placement: here, caption, note }); const top = (columns) => ({ position: 'top', columns }); // a float across k columns const here = { position: 'here' }; // in the flow: in a column, or across a box const resources = [ photo('barrier', 'barrier-1800.jpg', [1800, 1106], here), // in the banner box: page-wide photo('welders', 'apprentices-1536.jpg', [1536, 1024], top(3)), drawing('gate', [1130, 500], top(3)), photo('ferry', 'ferry-1536.jpg', [1536, 1024], top(4)), photo('cartoon', 'cartoon-1280.jpg', [1280, 853], top(4)), photo('cranes', 'cranes-1800.jpg', [1800, 750], here), drawing('throughput', [1130, 700], top(2)), drawing('mx40', [2910, 1000], here), drawing('sectors', [2910, 820], here), photo('loaves', 'bakery-1536.jpg', [1536, 1024], top(3)), // The tables sit where the text names them, in a column or a data box: no float. ...Object.entries(TABLES).map(([id, [model, caption, note]]) => data(id, model, caption, note)), ...SECTORS.map((_, i) => res(`prices-${i + 1}`, 'panel', 'table', { styleId: 'prices', model: pricesTable(i, 21) }, { placement: here })), ]; ``` `top(3)`就是`placement: { position: 'top', columns: 3 }`：船厂照片占新闻版五栏中的三栏，渡轮占四栏，面包厂占财经版六栏中的三栏，港口图表占两栏。从第1栏的段落引用的浮动体，会占据其后仍然空着的各栏的顶部，所以这些图从第2栏开始，报道在旁边往下排。这样的图片只有在本页下方不再排别的报道时才会留在自己的报道里：之后再排一篇通栏报道，可能把图片带进那篇报道的区域，或推到下一页。所以第2页和第3页以浮动到页脚的广告收尾，而不是再排一篇报道。横贯整版的照片以行内方式（`here`）放在标题框里。表格也在正文流中，放在页脚的通页宽框里。 ### 5 · 标题、数字框、数据和广告都是框 ```js // script.js, 行 127–154 const none = pad(0, 0); const banner = { id: 'banner', backgroundEnabled: false, padding: none, titleStyle: { ...caps(8.5, 700, 'accent'), gap: mm(1.2) }, // the kicker marginTop: pt(0), marginBottom: pt(LEAD / 2), body: { fontFamily: 'Source Serif 4', fontSize: pt(13), lineHeight: pt(16.5), textAlign: 'left', firstLineIndent: pt(0) } }; const story = { ...banner, id: 'story', marginTop: pt(LEAD), padding: { ...none, top: mm(2.5) }, stripe: { enabled: true, side: 'top', width: pt(1), color: col('ink') } }; const boxBody = { fontFamily: 'Archivo Narrow', fontSize: pt(9.5), lineHeight: pt(LEAD), textAlign: 'left', firstLineIndent: pt(0), paragraphSpacing: true, boldColor: col('accent') }; const briefs = { id: 'briefs', background: col('tint'), padding: pad(2.8, 3), titleStyle: { ...caps(9, 700, 'accent'), gap: mm(1.5) }, body: boxBody }; const teaser = { ...briefs, id: 'teaser', background: col('salmon'), columnGap: mm(4.5), body: { ...boxBody, fontSize: pt(10.5), lineHeight: pt(13.5) } }; const panel = { ...story, id: 'panel', marginTop: pt(0), titleStyle: briefs.titleStyle, stripe: { ...story.stripe, width: pt(2.5), color: col('accent') }, body: { ...boxBody, fontFamily: 'Source Serif 4' } }; const dataBox = { ...story, id: 'data', marginTop: pt(0), columnGap: mm(4.5) }; const ad = { id: 'ad', backgroundEnabled: false, marginTop: pt(LEAD), border: { enabled: true, color: col('ink'), width: pt(0.75) }, padding: { ...pad(6, 6), top: mm(3) }, titleStyle: { ...caps(6.5, 600, 'muted'), gap: mm(4) }, body: { ...boxBody, fontSize: pt(14), lineHeight: pt(18), boldColor: col('ink') } }; const pullQuote = { ...story, id: 'quote', columns: 2, marginTop: pt(0), body: { ...banner.body, fontFamily: 'Playfair Display', fontSize: pt(19), lineHeight: pt(23), italic: true } }; // a pull quote, floated across two columns const headline = (id, size, look = {}) => ({ id, fontSize: pt(size), lineHeight: pt(size * 1.04), marginBottom: pt(size * 0.2), ...look }); ``` 通栏标题是一个无边框的通页宽框，里面是三种字号之一的H2，上方1 pt的线标出下一篇报道。第5版的*The terminal in numbers*框浮动在六栏中的两栏上（围栏上写`columns="2"`），第4版的引语框则在样式里用`columns: 2`做到同样的效果。数据框用一组`:::columns`把两到四张表并排，广告是浮到页脚的通页宽框，外加0.75 pt的边线。 ### 6 · Folio所用的纸张 新闻版不用设置：`folio.paper`是45 g/m²的新闻纸，`binding: { type: 'folded', cover: 'pages' }`把两张对折的纸套在一起，第1版在外，第8版作封底。财经版放在一个块里： ```markdown :::paper{type="newsprint" shade="#faede6"} # Business {style="business-front"} … # Share prices {style="business"} … ::: ``` 块里每一页都带有这种色调的`page.paper`，Folio就用这种纸来印。色调是把页面颜色向白色推60%（README §4）：平面页面已经画了#f2d3c0，下面再垫一整张橙红色纸会染两次色。画布、HTML和PDF不读`:::paper`，画的是页面颜色，所以分区调色板也要改`paper`。 ## 完整食谱 一个文件，由食谱文件夹合成，示例文本和排版食谱的公共工具包都已内联；它自己排出页面。要运行它，把它放进空白页面的`