---
theme: easy-jyy
title: easy-slides 快速开始
description: JYY 风格 Markdown 演示引擎的功能示例
author: easy-slides
date: 2026-08-27
tags:
  - Markdown
  - Slidev
  - JYY Style
cover: ./assets/cover.svg
transition: fade-out
mdc: true
drawings:
  persist: false
---

# easy-slides

> 写 Markdown，推送 Git，分享一场清晰的演示。

<!--
欢迎使用 easy-slides。这一页演示了 JYY 风格的标题页和逐页演讲备注。
-->

---
layout: default
---

## 内容优先

<v-clicks>

- 在 VS Code 中实时编辑
- 自动处理图片比例与可用空间
- 使用 Vue、Mermaid、KaTeX 和代码高亮
- 推送 Git 后部署到 Cloudflare Pages 或 GitHub Pages

</v-clicks>

<!--
依次介绍四个核心能力。列表项会随着点击逐项出现。
-->

---
layout: two-cols
class: easy-code-lg
---

## Markdown 与代码

::left::

### 数学公式

$$
e^{i\pi}+1=0
$$

::right::

### 代码高亮

```ts {2|3|all}
const deck = await discover('slides')
const pages = deck.filter(page => !page.draft)
await build(pages)
const published = pages.map(page => page.slug)
const artifacts = await exportSlides(pages)
await upload(artifacts)
await invalidateCache(published)
console.info(`Published ${published.length} decks`)
return { pages, published }
```

<!--
左侧是 KaTeX，右侧是带逐步高亮的 TypeScript 代码。
-->

---
layout: image-auto
image: ./assets/cover.svg
imageFit: contain
---

## 智能图片

- 默认保持原始比例
- 宽图自动切换为上下结构
- 不超出幻灯片内容区
- 支持方向、contain、cover 和定位覆盖

<!--
image-auto 根据图片宽高比选择上下或左右结构，仍可通过 imagePlacement 显式覆盖。
-->

---
layout: default
---

## Markdown 图片属性

![easy-slides 示例封面](./assets/cover.svg){fit="contain" position="center" max-height="55vh"}

<!--
独占一行的 Markdown 图片会自动扩展为主要视觉区域，也可以通过属性覆盖默认值。
-->

---
layout: default
---

## 文本生成图表

```mermaid
flowchart LR
  A[编辑 Markdown] --> B[Vite 实时预览]
  B --> C[构建静态站点]
  C --> D[Cloudflare Pages]
  C --> E[GitHub Pages]
```

<!--
Mermaid 图表随 Markdown 一同维护，不需要额外绘图软件。
-->

---
layout: default
---

## 表格尺寸预设

<div class="easy-table-lg">

| 预设 | 字号 | 单元格留白 |
| --- | ---: | ---: |
| 小 | 24px | 7px × 10px |
| 中（默认） | 30px | 10px × 14px |
| 大 | 36px | 13px × 18px |

</div>

<!--
表格和代码尺寸既可以按页设置，也可以用 div 包裹后只调整一个内容块。
-->

---
layout: quote
---

> 内容决定表达，样式帮助内容被看见。

<!--
结束时回到 easy-slides 的设计原则：克制的视觉风格服务于内容。
-->