# @classic-homes/slides 中文文档

规范地址：https://npmcn.com/package/%40classic-homes/slides/

版本：0\.8\.7
npm 元数据更新时间：2026-11-05T20:48:48.410Z
中文译文更新时间：2026-11-09T23:51:23.958Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40classic-homes/slides
原文对照：https://npmcn.com/package/%40classic-homes/slides/?lang=original
项目主页：https://github.com/Classic-Homes/classic-theme#readme
源码仓库：https://github.com/Classic-Homes/classic-theme

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

- 包体积（解压后）：1.2 MB，33 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：@modelcontextprotocol/sdk ^1\.11\.0
- 首次发布：2026-09-29T22:13:45.721Z
- 最新版本发布：2026-11-05T20:48:48.232Z
- 近 30 天下载量：3033（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

来自结构化甲板文件的有品牌的 Classic Homes 演示文稿: schema,布局,渲染器, CLI 和 MCP 服务器

## 安装

```sh
npm install @classic-homes/slides
```

也可以使用：`pnpm add @classic-homes/slides`、`yarn add @classic-homes/slides`、`bun add @classic-homes/slides`

## README

# @ classic- homes/ slips( 经典家庭)

品牌经典 以简单的甲板文件为主 。 选择每个布局 幻灯片,填入文字和相片,并获得一个自成一体的 HTML 文件 在任何浏览器中打开:包括品牌字体、颜色和介绍工具,否 互联网需要.

德克是数据,布局拥有样式. 无法设置颜色、字体 或大小在幻灯片上,这就是保持每个甲板的品牌,无论一个人 或者是人工智能特工写的.

## 快开始

```bash
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.

## 一个甲板文件

```yaml
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` 每点击一次显示一个项目.

### 图表

```yaml
- 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` 完全抛出(见 [作为图书馆](https://npmcn.com/package/%40classic-homes/slides/#readme-as-a-library)) (中文(简体) ).

### 录像和嵌入

`video` 取用YouTube/Vimeo链接(增强功能的玩家); `embed` 使用任意 https page (地图,仪表板,3D出行,表)在一个沙盒框中. 两种负载 只显示幻灯片时,然后返回到带有QR的海报/屏幕截图 代码离线、打印和PDF.

## 品牌简介和甲板设置

```yaml
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` (一个可选的对等点,所以应用程序只能使甲板 别安装它).

```bash
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` (默认: 工作目录).

## 作为图书馆

```ts
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 服务器)并返回其输出。 甲板上有图,没有铸造器.

````ts
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.
````

## 常见问题

### @classic-homes/slides 是什么？

来自结构化甲板文件的有品牌的 Classic Homes 演示文稿: schema,布局,渲染器, CLI 和 MCP 服务器

### 如何安装 @classic-homes/slides？

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

### @classic-homes/slides 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @classic-homes/slides 支持 ESM 还是 CommonJS？

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

### @classic-homes/slides 可以商用吗？

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

### @classic-homes/slides 的下载量有多少？

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

### @classic-homes/slides 还在维护吗？

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