feat: add content repository example

2026-08-29 18:59:58 +08:00
parent 0cf1f51745
commit e169eae2dc
12 changed files with 340 additions and 0 deletions
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1200" role="img" aria-labelledby="title desc">
+  <title id="title">easy-slides JYY theme cover</title>
+  <desc id="desc">A restrained deep blue and warm gray 4:3 presentation cover.</desc>
+  <rect width="1600" height="1200" fill="#f5f2ef"/>
+  <rect x="70" y="70" width="1460" height="1060" rx="18" fill="#fff" stroke="#d9d5d7" stroke-width="4"/>
+  <path d="M140 280h620" stroke="#1d4ed8" stroke-width="12"/>
+  <circle cx="1310" cy="880" r="128" fill="#1d4ed8" opacity=".10"/>
+  <circle cx="1375" cy="815" r="74" fill="#1d4ed8" opacity=".22"/>
+  <text x="140" y="500" font-family="Lato,Arial,sans-serif" font-size="126" font-weight="700" fill="#222">easy-slides</text>
+  <text x="148" y="600" font-family="Lato,Arial,sans-serif" font-size="46" fill="#1d4ed8">Markdown → Presentation</text>
+  <text x="148" y="940" font-family="Arial,sans-serif" font-size="38" fill="#666">清晰、克制、适合投影</text>
+</svg>
@@ -0,0 +1,155 @@
+---
+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 的设计原则：克制的视觉风格服务于内容。
+-->