156 lines
2.7 KiB
Markdown
156 lines
2.7 KiB
Markdown
---
|
||
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 图片属性
|
||
|
||
{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 的设计原则：克制的视觉风格服务于内容。
|
||
-->
|