presentation-repo/
├── index.html                    # Auto-generated index page (DO NOT EDIT)
├── .nojekyll                     # GitHub Pages config
├── package.json                  # Project configuration
├── package-lock.json             # Dependencies lock file
├── presentations/                # All presentations directory
│   ├── my-first-presentation/    # Individual presentation folder
│   │   ├── index.html           # Presentation HTML file
│   │   ├── metadata.json        # Presentation metadata
│   │   └── thumbnail.png        # Presentation thumbnail (800x600)
│   └── another-presentation/
│       ├── index.html
│       ├── metadata.json
│       └── thumbnail.png
├── templates/                    # Template files
│   ├── presentation-template.html   # Presentation template
│   ├── metadata-template.json       # Metadata template
│   └── index-template.html          # Index page template
├── scripts/                      # Build scripts
│   └── generate-index.js        # Index generation script
├── assets/                       # Shared resources
│   └── css/
│       └── custom.css           # Custom global styles
└── README.md                     # Repository documentation

{
  "id": "my-presentation",              // Unique identifier
  "title": "My Awesome Presentation",   // Display title
  "description": "A brief description", // Short description
  "author": "Author Name",              // Author name
  "date": "2026-02-10",                // Date (YYYY-MM-DD)
  "tags": ["tech", "tutorial"],        // Tags array
  "thumbnail": "thumbnail.png",         // Thumbnail filename
  "slides": 15,                         // Number of slides
  "language": "zh-CN",                  // Language code
  "category": "Tutorial"                // Category
}

您需要创建什么类型的演示文稿项目？

1. **单个演示文稿** - 创建一个独立的HTML文件
   - 适合：快速分享、一次性演讲、嵌入文档
   
2. **演示文稿仓库** - 创建一个完整的演示文稿管理系统
   - 适合：多个演示文稿、团队库、GitHub Pages发布、演示文稿作品集

请选择：[1] 单个演示文稿  [2] 演示文稿仓库

让我为您创建一个精彩的演示文稿！首先，我需要了解一些信息：

📌 **内容方面：**
1. 演示文稿的主题是什么？
2. 目标受众是谁？（客户、团队、学生、投资人？）
3. 核心信息是什么？（3-5个主要观点）
4. 预计需要多少张幻灯片？（快速演讲5-10张 / 标准演示15-25张 / 长篇讲座30+张）

🎨 **视觉风格：**
5. 您偏好什么视觉风格？
   - □ 专业商务（深色、简约）
   - □ 创意活泼（彩色、动感）
   - □ 极简主义（留白、聚焦）
   - □ 技术感（代码、图表）
   
6. 是否有品牌颜色要求？（如果有，请提供色值）

✨ **动画效果：**
7. 您需要什么程度的动画效果？
   - □ 基础（简单淡入淡出）
   - □ 中等（逐步显示要点）
   - □ 高级（元素变换、数据可视化动画）

🎤 **特殊功能：**
8. 是否需要以下功能？
   - □ 演讲者备注（用于演讲提示）
   - □ 代码高亮显示
   - □ 数学公式支持
   - □ 垂直嵌套幻灯片（章节内子主题）

根据您的需求，我建议以下结构：

📋 **建议的幻灯片结构：**

1. 标题页 - [主题]
2. 议程 - 本次演示的内容概览
3. 【第一部分】章节分隔符 - [第一个主要话题]
   ├─ 4. [子主题1]
   ├─ 5. [子主题2]
   └─ 6. [子主题3]
4. 【第二部分】章节分隔符 - [第二个主要话题]
   ├─ 7. [子主题1]
   └─ 8. [子主题2]
5. 总结 - 核心要点回顾
6. 结束页 - 致谢与问答

这个结构符合您的需求吗？是否需要调整？

现在让我们确定动画和交互细节：

🎭 **动画配置：**
1. 幻灯片切换效果偏好？
   - slide（滑动，默认）
   - fade（淡入淡出）
   - zoom（缩放）
   - convex（凸出）
   - concave（凹陷）

2. 要点列表是否需要逐条显示？（推荐）
   ☐ 是，要点逐条淡入
   ☐ 否，一次全部显示

3. 是否需要特殊动画？
   ☐ 元素自动变换（数字变化、图形变形）
   ☐ 高亮强调（当前要点高亮）
   ☐ 代码逐行显示

📝 **演讲者功能：**
4. 每张幻灯片是否需要演讲者备注？
   ☐ 是，我会提供每页的讲解提示
   ☐ 否，仅幻灯片内容

选择您需要的选项，我将据此创建演示文稿。

templates/viewer-reveal.html

<div class="reveal">
    <div class="slides">
        <!-- Each <section> is a slide -->
        <section class="slide-title">
            <h1>Title</h1>
        </section>
        
        <section class="slide-content">
            <h2>Content</h2>
            <ul>
                <li class="fragment">Point 1</li>
                <li class="fragment">Point 2</li>
            </ul>
            
            <!-- Speaker notes -->
            <aside class="notes">
                This is what you'll say...
            </aside>
        </section>
        
        <!-- Nested slides (vertical navigation) -->
        <section>
            <section><h2>Main Topic</h2></section>
            <section><h3>Subtopic 1</h3></section>
            <section><h3>Subtopic 2</h3></section>
        </section>
    </div>
</div>

<ul>
    <li class="fragment">Appears first</li>
    <li class="fragment">Appears second</li>
    <li class="fragment fade-in">Fades in</li>
    <li class="fragment fade-up">Slides up</li>
    <li class="fragment highlight-red">Highlights in red</li>
</ul>

const PRESENTATION_CONFIG = {
    // Basic info
    title: "Your Presentation Title",
    author: "Your Name",
    date: "2026年2月3日",
    
    // Theme colors
    theme: {
        primary: "#2E86AB",      // Main color
        secondary: "#A23B72",    // Secondary color
        accent: "#F18F01",       // Accent color
        background: "#0a0a0a",   // Background
        text: "#ffffff",         // Text color
        textMuted: "#cccccc"     // Muted text
    },
    
    // Reveal.js options
    revealOptions: {
        transition: 'slide',      // slide/fade/zoom/convex/concave
        controls: true,           // Show arrow controls
        progress: true,           // Show progress bar
        center: true,             // Vertical centering
        slideNumber: 'c/t',       // Show slide numbers
        hash: true,               // URL routing
        
        // Animation speed
        transitionSpeed: 'default', // default/fast/slow
        
        // Auto-advance (0 = disabled)
        autoSlide: 0,
        
        // Plugins (always included)
        plugins: [
            RevealMarkdown,
            RevealHighlight,
            RevealNotes,
            RevealZoom,
            RevealSearch,
            RevealMath.KaTeX
        ]
    }
};

<section>
    <h2>Slide Title</h2>
    <p>Public content...</p>
    
    <aside class="notes">
        Remember to emphasize this point.
        Mention the case study here.
        Time: 2 minutes on this slide.
    </aside>
</section>

<section>
    <h2>Code Example</h2>
    <pre><code class="language-javascript" data-trim data-line-numbers="1-2|4-6">
function hello(name) {
    console.log(`Hello, ${name}!`);
}

// Usage
hello('World');
    </code></pre>
</section>

<section>
    <h2>Mathematical Formula</h2>
    <p>The quadratic formula:</p>
    <p>$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$</p>
</section>

<section data-auto-animate>
    <h2 style="margin-top: 100px;">Animate</h2>
</section>
<section data-auto-animate>
    <h2 style="margin-top: 400px; color: red;">Animate</h2>
</section>

<section data-background-color="#ff0000">
    <h2>Red Background</h2>
</section>

<section data-background-image="url.jpg">
    <h2>Image Background</h2>
</section>

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
    <h2>Gradient Background</h2>
</section>

🎯 打开方式：在任何现代浏览器中打开此 HTML 文件

⌨️ 快捷键：
  → / Space    下一张幻灯片
  ←            上一张幻灯片
  ↓            向下进入子幻灯片（如果有）
  ↑            向上返回
  ESC          概览模式（查看所有幻灯片）
  S            演讲者视图（包含备注和计时器）
  F            全屏模式
  ?            显示所有快捷键
  Ctrl+Shift+F 搜索
  Alt+Click    放大区域

📱 移动端：左右滑动切换幻灯片

🎤 演讲提示：
  - 按 S 打开演讲者视图，可以看到备注、下一张预览和计时器
  - 建议使用双屏，一个屏幕给观众，一个屏幕给自己（演讲者视图）

如需修改内容，在 HTML 文件中找到 <div class="slides"> 部分，
编辑对应的 <section> 标签即可。

让我为您创建一个演示文稿管理仓库！首先：

📁 **仓库基本信息：**
1. 仓库名称是什么？（例如：my-presentations, tech-talks, company-slides）
2. 仓库放在哪个目录？（默认：当前工作目录）
3. 是否要立即创建示例演示文稿？（推荐：是）

📋 **初始内容：**
4. 如果创建示例，主题是什么？
5. 您的GitHub用户名是什么？（用于GitHub Pages配置）

mkdir -p {repo-name}/{presentations,templates,scripts,assets/css}

cd {repo-name}
npm install
npm run build

📚 仓库已创建！现在设置GitHub Pages：

**1. 初始化Git并推送到GitHub：**
```bash
cd {repo-name}
git init
git add .
git commit -m "Initial commit: Presentation repository"
git remote add origin https://github.com/{username}/{repo-name}.git
git push -u origin main

undefined

**本地预览：**
```bash
npm run dev

undefined

是否要创建GitHub Action自动部署？
这样每次push都会自动重新生成索引页。

[是] [否]

name: Generate Index and Deploy

on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Generate index
        run: npm run build
      
      - name: Commit and push if changed
        run: |
          git config --global user.name 'GitHub Action'
          git config --global user.email 'action@github.com'
          git add index.html
          git diff --quiet && git diff --staged --quiet || (git commit -m "Auto-generate index [skip ci]" && git push)

<section class="slide-title" data-transition="zoom">
    <h1>Main Title</h1>
    <p class="subtitle">Subtitle or description</p>
    <p class="author">Author Name | Date</p>
</section>

<section class="slide-title" data-transition="zoom">
    <h1 class="fragment">Main Title</h1>
    <p class="subtitle fragment">Subtitle appears second</p>
    <p class="author fragment">Author appears last</p>
</section>

<section class="slide-content">
    <h2>Slide Title</h2>
    <p>Introduction paragraph...</p>
    <ul>
        <li class="fragment">Point one appears first</li>
        <li class="fragment">Point two appears second</li>
        <li class="fragment">Point three appears last</li>
    </ul>
    
    <aside class="notes">
        Speaker notes: Emphasize point two.
    </aside>
</section>

<section class="slide-content">
    <h2>Code Example</h2>
    <pre><code class="language-python" data-trim data-line-numbers="1-3|5-7">
def calculate_total(items):
    total = sum(item.price for item in items)
    return total

<section>
    <h2>Comparison</h2>
    <div class="two-column">
        <div class="fragment">
            <h3>Before</h3>
            <ul>
                <li>Slow performance</li>
                <li>Complex setup</li>
                <li>Limited features</li>
            </ul>
        </div>
        <div class="fragment">
            <h3>After</h3>
            <ul>
                <li>2x faster ✨</li>
                <li>One-click setup</li>
                <li>Full-featured</li>
            </ul>
        </div>
    </div>
</section>

<section>
    <div class="image-text">
        <div>
            <h2>Feature Name</h2>
            <p>Description of the feature...</p>
            <ul>
                <li class="fragment">Benefit one</li>
                <li class="fragment">Benefit two</li>
                <li class="fragment">Benefit three</li>
            </ul>
        </div>
        <div class="fragment">
            <img src="https://via.placeholder.com/600x400" alt="Feature screenshot">
        </div>
    </div>
</section>

<section data-auto-animate>
    <div class="image-text">
        <div><h2>Initial State</h2></div>
        <img src="before.png" data-id="product">
    </div>
</section>
<section data-auto-animate>
    <div class="image-text">
        <div><h2>After Transformation</h2></div>
        <img src="after.png" data-id="product">
    </div>
</section>

<section class="slide-quote" data-background-gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
    <blockquote class="fragment">
        An impactful quote that emphasizes a key message
        and inspires the audience.
    </blockquote>
    <cite class="fragment">— Author Name, Title</cite>
</section>

<section class="slide-section" data-background-gradient="linear-gradient(135deg, #A23B72 0%, #F18F01 100%)">
    <h2 class="fragment">Part Two</h2>
</section>

<!-- Main topic (horizontal) -->
<section>
    <section>
        <h2>Main Topic</h2>
        <p>Press ↓ to dive deeper</p>
    </section>
    
    <!-- Subtopic 1 (vertical) -->
    <section>
        <h3>Subtopic 1</h3>
        <p>Detailed explanation...</p>
    </section>
    
    <!-- Subtopic 2 (vertical) -->
    <section>
        <h3>Subtopic 2</h3>
        <p>More details...</p>
    </section>
</section>

<!-- Next main topic (horizontal) -->
<section>
    <h2>Next Topic</h2>
</section>

<ul>
    <li class="fragment">Fade in (default)</li>
    <li class="fragment fade-in">Also fades in</li>
    <li class="fragment fade-out">Fades out</li>
    <li class="fragment fade-up">Slides in from bottom</li>
    <li class="fragment fade-down">Slides in from top</li>
    <li class="fragment fade-left">Slides in from right</li>
    <li class="fragment fade-right">Slides in from left</li>
</ul>

<ul>
    <li class="fragment grow">Grow larger</li>
    <li class="fragment shrink">Shrink smaller</li>
    <li class="fragment strike">Strike through</li>
    <li class="fragment highlight-red">Highlight in red</li>
    <li class="fragment highlight-blue">Highlight in blue</li>
    <li class="fragment highlight-green">Highlight in green</li>
    <li class="fragment highlight-current-red">Highlight current</li>
</ul>

<p class="fragment" data-fragment-index="3">Appears third</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>

<span class="fragment fade-in">
    <span class="fragment highlight-red">
        <span class="fragment fade-out">
            Text fades in, highlights red, then fades out
        </span>
    </span>
</span>

<section data-auto-animate>
    <h2>Auto-Animate</h2>
</section>
<section data-auto-animate>
    <h2 style="margin-top: 100px; color: red;">Auto-Animate</h2>
</section>

<section data-auto-animate>
    <div data-id="box" style="height: 50px; background: red;"></div>
</section>
<section data-auto-animate>
    <div data-id="box" style="height: 200px; background: blue;"></div>
</section>

<section data-auto-animate>
    <pre><code data-trim data-line-numbers>
let x = 10;
    </code></pre>
</section>
<section data-auto-animate>
    <pre><code data-trim data-line-numbers>
let x = 10;
let y = 20;
let sum = x + y;
    </code></pre>
</section>

<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<section data-auto-animate data-auto-animate-duration="2.0">