@ classic- homes/ slips( 经典家庭)
品牌经典 以简单的甲板文件为主 。 选择每个布局 幻灯片,填入文字和相片,并获得一个自成一体的 HTML 文件 在任何浏览器中打开:包括品牌字体、颜色和介绍工具,否 互联网需要.
德克是数据,布局拥有样式. 无法设置颜色、字体 或大小在幻灯片上,这就是保持每个甲板的品牌,无论一个人 或者是人工智能特工写的.
快开始
npx classic-slides new decks/closing-day.yaml # basic starter
npx classic-slides new decks/orientation.yaml --starter journey
npx classic-slides dev decks/closing-day.yaml # live preview, reloads on save
npx classic-slides build decks/closing-day.yaml # → decks/closing-day.html
npx classic-slides export decks/closing-day.yaml # → decks/closing-day.deck.json
当前:打开 HTML,使用箭头键或空格. 无 显示发言者的说明,
法语 进入全屏, #slide-7 在 URL 中跳转到幻灯片。 打印到 PDF
每个幻灯片给出一页16:9.
一个甲板文件
title: Closing Day
description: What to bring and expect at your closing appointment.
slides:
- layout: title
kicker: New Homeowner
title: Closing day, *simplified*
lead: Everything you need for a smooth signing.
- layout: bullets
title: Bring these with you
marker: check
items:
- Photo ID for everyone on the loan
- text: Certified funds
sub: Never wire money based on an email — call to confirm
notes: |
Stress wire fraud. Title companies never change wiring instructions by email.
- layout: split
title: Where to go
groups:
- items: [Arrive 10 minutes early, Plan for about an hour]
images:
- { src: images/title-office.jpg, alt: Title company front entrance }
图像是相对于甲板文件(或 https URL) 的路径; 它们是内嵌的
在建设时间。 在2000px宽处保持相片 build 警告他们大.
内嵌文本支持 **bold**, (中文(简体) ), *highlight* (品牌口音), `code` 财务报告和审定财务报表
[links](https://…)。HTML总是逃脱.
布局
运行 classic-slides layouts 名单, classic-slides layouts <name> 页:1
每一个领域都有一个例子.
| 组 | 布局 |
|---|---|
| 打开器分隔符( D) | title, (中文(简体) ), section, (中文(简体) ), statement, (中文(简体) ), journey |
| 文本 | bullets, (中文(简体) ), cards, (中文(简体) ), comparison, (中文(简体) ), quote |
| 数据 | stats (有趋势+火花), chart, (中文(简体) ), table |
| 图表 | flow, (中文(简体) ), timeline, (中文(简体) ), cycle, (中文(简体) ), hierarchy, (中文(简体) ), matrix, (中文(简体) ), tiers (隧道/金字塔) |
| 媒体 | split, (中文(简体) ), photos, (中文(简体) ), image (有编号热点), compare (前后), walkthrough, (中文(简体) ), video (YouTube/维梅奥), embed (任何https页) |
| 人与地点 | qr, (中文(简体) ), contacts |
每个幻灯片也接受 track (价值/红、建/地、中/导航),
background (纸张或坚固的品牌颜色), backgroundImage + 键 overlay, (中文(简体) ),
notes, (中文(简体) ), time, (中文(简体) ), id, (中文(简体) ), hidden甲板与 journey.steps —— 说 step, (中文(简体) ),
stepDone 财务报告和审定财务报表 showJourney。 。 。 . bullets, (中文(简体) ), cards, (中文(简体) ), flow 财务报告和审定财务报表 timeline 带
build: true 每点击一次显示一个项目.
图表
- layout: chart
title: Closings *doubled* since spring
chart:
type: column # bar, stacked-*, percent-*, line, area, combo, pie, donut, treemap, funnel, waterfall, gauge, ring, bullet, dumbbell, heatmap, sankey, pictogram, scatter, radar
labels: [Q1, Q2, Q3, Q4]
series: [{ name: Closings, values: [42, 61, 88, 94] }]
unit: homes
highlight: Q4
insights: [Q4 best quarter on record]
source: Sales ops
以 ECharts(服务器侧渲染,主题)向静态SVG提供图表
从 @classic-homes/charts-core因此,他们工作离线和印刷。 欧共体
只有在甲板有图表时才加载 /core 完全抛出(见
作为图书馆) (中文(简体) ).
录像和嵌入
video 取用YouTube/Vimeo链接(增强功能的玩家); embed 使用任意
https page (地图,仪表板,3D出行,表)在一个沙盒框中. 两种负载
只显示幻灯片时,然后返回到带有QR的海报/屏幕截图
代码离线、打印和PDF.
品牌简介和甲板设置
brand:
profile: pentrust # admin-managed profile; default classic-homes
name: PenTrust Lending # optional overrides: name, tagline, logo, logoOnDark, favicon, footer
settings:
slideNumbers: true
logo: all # title | all | none
confidential: Internal
autoAdvance: 15 # kiosk mode (also ?kiosk=15 on the URL)
loop: true
简介BrandProfile(a) 携带名称、标志、favicon、页脚和可选
调色板; validateBrandProfile() 执行WCAG AA对比. 传过来
renderDeck(deck, { brands }) 编号 : validateDeck(deck, { brands })。作者可以
覆盖文字和图像, 永远不要颜色 .
介绍
箭头键 / 空间推进( 和通过显示) 无 注释 · 页:1
显示器窗口( 当前 + 下一张幻灯片、 注释、 计时器、 时钟) 欧 · 概况
法语 全屏 #slide-7 深层链接 ?kiosk=15 循环无人照管。 打印
到 PDF 时,每张幻灯片有16:9的一页,并带有回放媒体.
使用人工智能代理( MCP)
软件包传送一个 MCP 服务器,通过幻灯片编辑甲板文件
在每个保存之前验证,所以代理不能留下甲板被损坏. 这需要
@modelcontextprotocol/sdk (一个可选的对等点,所以应用程序只能使甲板
别安装它).
claude mcp add classic-slides -- npx -y -p @classic-homes/slides -p @modelcontextprotocol/sdk classic-slides mcp --root ./decks
然后问: "在收工日建造了10道滑行甲板. 第一次买家买的 约在闭关之日,然后建造它
工具 : list_layouts, (中文(简体) ), get_layout, (中文(简体) ), get_authoring_guide, (中文(简体) ), create_deck, (中文(简体) ),
read_deck, (中文(简体) ), update_deck, (中文(简体) ), add_slide, (中文(简体) ), add_slides, (中文(简体) ), update_slide, (中文(简体) ),
move_slide, (中文(简体) ), delete_slide, (中文(简体) ), validate_deck, (中文(简体) ), build_deck。提示:
build_deck_from_outline文件访问仅限于 --root (默认:
工作目录).
作为图书馆
import { renderDeck, validateDeck, listLayouts } from '@classic-homes/slides';
import { buildDeckFile, fileImageResolver } from '@classic-homes/slides/node';
const { html } = await renderDeck(deck, { resolveImage: (src) => lookUp(src) });
主条目没有节点依赖性(在工人和浏览器中运行);
/node 添加基于文件的图像加载和 buildDeckFile。 。 。 .
/core 是没有 ECharts (约 650 KB 密接) 的主要条目,用于捆绑
必须保持小, 像云花岗工人。 内容 renderDeck 绘制图表
与 renderCharts 选项: a ChartSvgRenderer 得到每一个
甲板中的图用一个调用( t){ spec, width, height, palette?, title? }, (中文(简体) ),
活过RPC的平面数据),并以相同的顺序返回他们的SVG. 运行
renderChartSvgs 从ECharts可以居住的主要条目(另一个工人,
a 服务器)并返回其输出。 甲板上有图,没有铸造器.
import { renderDeck } from '@classic-homes/slides/core';
const { html } = await renderDeck(deck, {
renderCharts: (charts) => env.CHARTS.renderSlideChartSvgs(charts),
});
``` For editors,
`layoutEditorInfo()` / `deckEditorFields()` describe every field as a widget
(with `hint`s for chart, grid, url, video-url and point pickers),
`blankSlide(layout)` gives a valid starting slide, and `renderDeck(deck,
{ includeHidden: true, initialSlide })` plus the `postMessage` API drive a
live preview. Fields flagged `advanced` (slide id, speaking time, accent
colour) belong behind an "Advanced" section.
Click-to-edit: render the preview with `editorMarkers: true` and, inside an
iframe, clicking a title, bullet or picture posts
`{ type: 'classic-slides:select', index, path }` to the parent (`index` is the
deck slide, `path` the field such as `['items', 2, 'text']`, or `null` for the
slide itself). Send `{ type: 'classic-slides:highlight', index, path }` to
outline the field being edited. Never turn it on for shared or exported decks.
`layoutGalleryDeck()` returns one deck with every layout's starting slide, for
rendering a layout picker's thumbnails in one pass.
Rendered HTML embeds the deck source (minus image data), so
`extractDeckSource(html)` recovers the editable deck.
### Portable decks (import / export)
`classic-slides export` (or `exportDeckFile` from `/node`) writes one JSON file
with every image inlined as a `data:` URI — the format to import into a hosted
deck editor. Keep it under ~10 MB by resizing photos to ~2000px wide.
In code, `inlineDeckImages(deck, resolveImage)` does the export side and
`externalizeDeckImages(deck, upload)` the import side: it hands each `data:`
image to `upload` and puts the returned URL in its place. Both build on
`mapDeckImages(deck, fn)`, which finds images written as plain strings too and
returns a copy in the author's shape (no schema defaults added).
## Brand
Colours come from `@classic-homes/theme-tokens`. Fonts (Figtree, Spectral) are
embedded from `assets/fonts`. Both are licensed under the SIL Open Font License
1.1; their copyright notices and the licence text ship as
`assets/fonts/OFL.txt`, which also covers the copies embedded in built decks. Styling lives in `src/styles.ts`; add a layout in
`src/layouts/` and register it in `src/layouts/index.ts` — its example is
tested automatically.