🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx skills add https://skills.sh/claude-office-skills/skills/html-slides

💡 提示：需要 Node.js 和 NPM

HTML 幻灯片技能 (HTML Slides Skill)

概述 (Overview)

此技能支持使用 reveal.js 创建基于 HTML 的精美演示文稿——这是网络上最流行的演示文稿框架。创建具有动画、代码高亮、演讲者备注等功能的交互式响应式幻灯片。

使用方法 (How to Use)

  1. 描述您想要创建的演示文稿
  2. 指定主题、过渡效果和所需功能
  3. 我将生成一个 reveal.js 演示文稿

示例提示 (Example prompts):

  • “创建一个关于我们产品的交互式演示文稿”
  • “构建一个带有语法高亮的代码讲解演示文稿”
  • “制作一个带有演讲者备注和计时器的幻灯片”
  • “创建带有动画和过渡效果的幻灯片”

领域知识 (Domain Knowledge)

reveal.js 基础 (reveal.js Basics)

<!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>幻灯片 1 (Slide 1)</section>
            <section>幻灯片 2 (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>

幻灯片结构 (Slide Structure)

<!-- 水平幻灯片 (Horizontal slides) -->
<section>幻灯片 1 (Slide 1)</section>
<section>幻灯片 2 (Slide 2)</section>

<!-- 垂直幻灯片（嵌套）(Vertical slides - nested) -->
<section>
    <section>垂直 1 (Vertical 1)</section>
    <section>垂直 2 (Vertical 2)</section>
</section>

<!-- Markdown 幻灯片 (Markdown slides) -->
<section data-markdown>
    <textarea data-template>
        ## 幻灯片标题 (Slide Title)
        - 要点 1 (Point 1)
        - 要点 2 (Point 2)
    </textarea>
</section>

主题 (Themes)

内置主题 (Built-in themes): black, white, league, beige, sky, night, serif, simple, solarized, blood, moon

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

过渡效果 (Transitions)

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

片段（动画）(Fragments – Animations)

<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>

片段样式 (Fragment styles): fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green, strike

代码高亮 (Code Highlighting)

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

演讲者备注 (Speaker Notes)

<section>
    <h2>幻灯片标题 (Slide Title)</h2>
    <p>内容 (Content)</p>
    <aside class="notes">
        演讲者备注写在这里。按 'S' 键查看。
        (Speaker notes go here. Press 'S' to view.)
    </aside>
</section>

背景 (Backgrounds)

<!-- 颜色背景 (Color background) -->
<section data-background-color="#4d7e65">

<!-- 图片背景 (Image background) -->
<section data-background-image="image.jpg" data-background-size="cover">

<!-- 视频背景 (Video background) -->
<section data-background-video="video.mp4">

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

配置 (Configuration)

Reveal.initialize({
    // 显示控件 (Display controls)
    controls: true,
    controlsTutorial: true,
    progress: true,
    slideNumber: true,
    
    // 行为 (Behavior)
    hash: true,
    respondToHashChanges: true,
    history: true,
    keyboard: true,
    overview: true,
    center: true,
    touch: true,
    loop: false,
    rtl: false,
    shuffle: false,
    
    // 计时 (Timing)
    autoSlide: 0,  // 0 = 禁用 (disabled)
    autoSlideStoppable: true,
    
    // 外观 (Appearance)
    width: 960,
    height: 700,
    margin: 0.04,
    minScale: 0.2,
    maxScale: 2.0,
    
    // 插件 (Plugins)
    plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});

示例 (Examples)

示例 1：技术演讲 (Example 1: Tech Talk)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>API 设计最佳实践 (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 设计 (API Design)</h1>
                <h3>2024 年最佳实践 (Best Practices for 2024)</h3>
                <p><small>工程团队 (Engineering Team)</small></p>
            </section>
            
            <section>
                <h2>议程 (Agenda)</h2>
                <ol>
                    <li class="fragment">RESTful 原则 (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 原则 (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：产品发布 (Example 2: Product Launch)

<!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">团队浪费 <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% (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>

资源 (Resources)

📄 原始文档

完整文档（英文）：

https://skills.sh/claude-office-skills/skills/html-slides

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。