建立簡報

OpenPress 的 slide workspace 由可直接編輯的投影片原始碼組成，而非大型 layout wrapper。每張投影片負責自己的構成；簡報內可重用的 UI 與 theme CSS 留在同一個 Press。

請直接使用 Slide、Frame、Text、Line、MediaObject 等 core objects。視覺樣式放在 theme CSS；可編輯內容放在 Text children；固定位置使用 box；需要排列約束時使用 Frame layout。

步驟 1：初始化 Workspace

npm create @open-press@latest <project-name> -- --type slides

這會建立一個 16:9 的 slide Press。OpenPress 的投影片座標系以 1920 x 1080 為基準。

步驟 2：press.tsx 只註冊 slide marker

press/<slug>/press.tsx 應維持簡單：它描述 deck 順序，不承載每張投影片的實際 layout。

import { Press, Slide } from "@open-press/core";

export default function SlidePress() {
  return (
    <Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
      <Slide id="cover" />
      <Slide id="agenda" />
      <Slide id="statement" />
    </Press>
  );
}

步驟 3：新增空白投影片原始碼

node packages/core/engine/cli.mjs slide . add intro --press slide

這個指令會建立 slides/intro/slide.tsx，並更新 Press 的註冊。請將最小的 placeholder 改成這張投影片真正需要的構成。

press/slide/
  press.tsx
  theme/default.css
  slides/
    intro/slide.tsx

如果同一個無內容視覺元件已用在另一張投影片上，才將它放到這個 Press 的 ui/ 或 components/。一次性的構成與內容仍保留在投影片原始碼內。

步驟 4：撰寫投影片原始碼

投影片原始碼應直接使用 core objects，不要把可編輯內容藏在抽象 wrapper 的 props 裡。

import { Frame, Line, Slide, Text } from "@open-press/core";

export default function CoverSlide() {
  return (
    <Slide id="cover" className="op-source-deck-slide">
      <Frame frameKey="canvas" chrome={false} className="op-source-deck-canvas">
        <Text as="p" label="date" box={{ x: 100, y: 80 }} className="op-source-deck-date">
          26 JUNE 2024
        </Text>
        <Text as="h1" label="title" box={{ x: 100, y: 360, w: 1155 }} className="op-source-deck-title">
          A line is length without breadth.
        </Text>
        <Line label="red-rule" box={{ x: 100, y: 774, w: 270, h: 4 }} className="op-source-deck-red-rule" />
      </Frame>
    </Slide>
  );
}

步驟 5：驗證

npm run build

開發時可用 Workbench 預覽：

npm run dev:workspace

更多物件定位、label、box 與 Frame layout 規則請參考 Core Object API。