AI Skills
html-slides

html-slides

熱門

使用 reveal.js 建立令人驚豔的 HTML 簡報。支援動畫、程式碼高亮、備忘稿等互動功能。

290星標
67分支
更新於 2026/1/31
獲取技能源代碼

相關技能

stripe-best-practices1644azure-storage1196firebase-crashlytics357
SKILL.md
readonlyread-only
name
html-slides
description

>

version
1.0

HTML 簡報技能

概述

此技能可讓您使用 reveal.js（網路上最受歡迎的簡報框架）建立令人驚豔的 HTML 簡報。製作具備動畫、程式碼高亮、備忘稿等功能的互動式響應式投影片。

使用方式

  1. 描述您想建立的簡報內容
  2. 指定主題、轉場效果及所需功能
  3. 我將為您產生 reveal.js 簡報

範例提示：

  • 「為我們的產品建立一份互動式簡報」
  • 「製作一份包含語法高亮的程式碼導覽簡報」
  • 「製作一份包含備忘稿和計時器的簡報」
  • 「建立含有動畫和轉場效果的投影片」

領域知識

reveal.js 基本結構

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css">
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section>Slide 1</section>
            <section>Slide 2</section>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
    <script>Reveal.initialize();</script>
</body>
</html>

投影片結構

<!-- 水平投影片 -->
<section>Slide 1</section>
<section>Slide 2</section>

<!-- 垂直投影片（巢狀） -->
<section>
    <section>Vertical 1</section>
    <section>Vertical 2</section>
</section>

<!-- Markdown 投影片 -->
<section data-markdown>
    <textarea data-template>
        ## Slide Title
        - Point 1
        - Point 2
    </textarea>
</section>

主題

內建主題：black、white、league、beige、sky、night、serif、simple、solarized、blood、moon

<link rel="stylesheet" href="reveal.js/dist/theme/moon.css">

轉場效果

Reveal.initialize({
    transition: 'slide',  // none, fade, slide, convex, concave, zoom
    transitionSpeed: 'default',  // default, fast, slow
    backgroundTransition: 'fade'
});

片段動畫

<section>
    <p class="fragment">Appears first</p>
    <p class="fragment fade-in">Then this</p>
    <p class="fragment fade-up">Then this</p>
    <p class="fragment highlight-red">Highlight</p>
</section>

片段樣式：fade-in、fade-out、fade-up、fade-down、fade-left、fade-right、highlight-red、highlight-blue、highlight-green、strike

程式碼高亮

<section>
    <pre><code data-trim data-line-numbers="1|3-4">
def hello():
    print("Hello")
    print("World")
    return True
    </code></pre>
</section>

備忘稿

<section>
    <h2>Slide Title</h2>
    <p>Content</p>
    <aside class="notes">
        Speaker notes go here. Press 'S' to view.
    </aside>
</section>

背景設定

<!-- 顏色背景 -->
<section data-background-color="#4d7e65">

<!-- 圖片背景 -->
<section data-background-image="image.jpg" data-background-size="cover">

<!-- 影片背景 -->
<section data-background-video="video.mp4">

<!-- 漸層背景 -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">

設定選項

Reveal.initialize({
    // 顯示控制項
    controls: true,
    controlsTutorial: true,
    progress: true,
    slideNumber: true,
    
    // 行為設定
    hash: true,
    respondToHashChanges: true,
    history: true,
    keyboard: true,
    overview: true,
    center: true,
    touch: true,
    loop: false,
    rtl: false,
    shuffle: false,
    
    // 時間設定
    autoSlide: 0,  // 0 = 停用
    autoSlideStoppable: true,
    
    // 外觀設定
    width: 960,
    height: 700,
    margin: 0.04,
    minScale: 0.2,
    maxScale: 2.0,
    
    // 外掛
    plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});

範例

範例 1：技術分享

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>API Design Best Practices</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css">
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">
                <h1>API Design</h1>
                <h3>Best Practices for 2024</h3>
                <p><small>Engineering Team</small></p>
            </section>
            
            <section>
                <h2>Agenda</h2>
                <ol>
                    <li class="fragment">RESTful Principles</li>
                    <li class="fragment">Authentication</li>
                    <li class="fragment">Error Handling</li>
                    <li class="fragment">Documentation</li>
                </ol>
            </section>
            
            <section>
                <section>
                    <h2>RESTful Principles</h2>
                </section>
                <section>
                    <h3>Resource Naming</h3>
                    <pre><code data-trim class="language-http">
GET /users           # Collection
GET /users/123       # Single resource
POST /users          # Create
PUT /users/123       # Update
DELETE /users/123    # Delete
                    </code></pre>
                </section>
            </section>
            
            <section>
                <h2>Questions?</h2>
                <p>api-team@company.com</p>
            </section>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>
    <script>
        Reveal.initialize({
            hash: true,
            plugins: [RevealHighlight]
        });
    </script>
</body>
</html>

範例 2：產品發表

<!doctype html>
<html>
<head>
    <title>Product Launch</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">
    <style>
        .reveal h1 { color: #2d3748; }
        .metric { font-size: 3em; color: #3182ce; }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section data-background-color="#f7fafc">
                <h1>Introducing</h1>
                <h2 style="color: #3182ce;">ProductX 2.0</h2>
            </section>
            
            <section>
                <h2>The Problem</h2>
                <p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>
            </section>
            
            <section data-auto-animate>
                <h2>Our Solution</h2>
                <div data-id="box" style="background: #3182ce; padding: 20px;">
                    AI-Powered Automation
                </div>
            </section>
            
            <section data-auto-animate>
                <h2>Our Solution</h2>
                <div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">
                    <p>AI-Powered Automation</p>
                    <p>90% faster</p>
                </div>
            </section>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
    <script>Reveal.initialize();</script>
</body>
</html>

資源