如何使用 Vite 和 Reveal.js 創建簡單的 HTML 演示文稿

什麼是 Reveal.js 和 Vite？

Reveal.js 是一個功能強大的開源 HTML 演示框架，它允許任何擁有網頁瀏覽器的人免費創建功能齊全且美觀的演示文稿。作為一種基於網頁的解決方案，它不僅提供了傳統簡報軟體難以匹敵的彈性和客製化能力，還支持 Markdown、PDF 匯出、演講者備註等進階功能。在最新的 5.1.0 版本中，更引入了突破性的捲動視圖功能，讓觀眾可以像瀏覽網頁一樣輕鬆瀏覽演示內容。

Vite

Vite 則是一個現代化的前端建構工具，提供極快的開發體驗。它利用 ES 模組直接在瀏覽器中運行程式碼，提供近乎即時的熱模組替換（HMR），大大加快了開發速度。

這兩者的結合提供了一個強大的開發環境，讓您能夠輕鬆地創建和客製化您的演示文稿。

項目設置

讓我們從頭開始設置一個 Vite + Reveal.js 項目。

步驟 1：初始化 Vite 項目

首先，我們需要初始化一個基本的 Vite 項目。為了確保安全性，我們將使用最新的穩定版本：

npm create vite reveal-vite -- --template vanilla
cd reveal-vite
npm install

這將創建一個名為 reveal-vite 的基本 Vite 項目，使用原生 JavaScript 模板。使用特定版本可以確保項目的穩定性和安全性。完成初始化後，建議立即運行 npm audit 來檢查是否存在任何安全漏洞，並根據建議進行修復。

步驟 2：安裝 Reveal.js

接下來，我們需要安裝 Reveal.js 作為項目依賴。我們將使用最新的穩定版本 5.1.0，它帶來了許多新功能和改進：

npm install reveal.js@5.1.0

這個命令會將最新版本的 Reveal.js 安裝到您的項目中。Reveal.js 5.1.0 帶來了以下新功能：

滿屏顯示功能：可以為任何元素添加 enter-fullscreen 類來觸發滿屏顯示
視頻背景無縫播放：跨幻燈片的視頻背景現在可以無縫播放
改進的 RTL 模式導航

使用固定版本可以確保程式碼的可重現性。建議定期檢查並更新依賴項，以獲取最新的安全修復和功能改進。

創建基本 HTML 結構

現在我們已經安裝了所需的依賴，讓我們設定專案的基本結構。

步驟 3：修改 index.html

第一張幻燈片 (Calpa Liu)

首先，我們需要修改 index.html 文件，這是我們演示文稿的入口點。我們需要添加正確的 HTML 結構來容納 Reveal.js 幻燈片：

<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的 Reveal.js 演示文稿</title>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>第一張幻燈片</h1>
          <p>使用 Reveal.js 和 Vite 創建的演示文稿</p>
        </section>
        <section>
          <h2>第二張幻燈片</h2>
          <ul>
            <li>項目 1</li>
            <li>項目 2</li>
            <li>項目 3</li>
          </ul>
        </section>
        <section>
          <h2>垂直幻燈片</h2>
          <p>按向下鍵查看子幻燈片</p>
          <section>
            <h3>垂直幻燈片 1</h3>
            <p>這是一個子幻燈片</p>
          </section>
          <section>
            <h3>垂直幻燈片 2</h3>
            <p>這是另一個子幻燈片</p>
          </section>
        </section>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

在這個結構中，<div class="reveal"> 和 <div class="slides"> 是 Reveal.js 所需的容器元素。每個 <section> 元素代表一張幻燈片。您還可以嵌套 <section> 元素來創建垂直方向的幻燈片層次。

配置 Reveal.js

現在我們需要在 main.js 中配置 Reveal.js，包括導入必要的樣式和初始化框架。

步驟 4：設置 main.js

編輯 main.js 文件，內容如下：

import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css"; // 您可以選擇其他主題
import Reveal from "reveal.js";

// 初始化 Reveal.js
let deck = new Reveal({
  // 配置選項
  hash: true, // 啟用幻燈片 URL 哈希
  slideNumber: true, // 顯示幻燈片頁碼
  transition: "slide", // 轉場動畫：slide, fade, convex, concave, zoom
});

deck.initialize();

這段代碼做了三件事：

導入 Reveal.js 的基本 CSS
導入一個主題（在此例中為黑色主題）
初始化 Reveal.js 並設置一些基本選項

Vite 的優勢在於它會自動處理 CSS 導入和模組打包，不需要在 HTML 中手動添加多個樣式表連結。

運行和構建項目

現在我們已經完成了基本設置，可以運行和測試我們的演示文稿了。

步驟 5：啟動開發伺服器

npm run dev

這將啟動開發伺服器，通常在 http://localhost:5173 上運行。您可以在瀏覽器中打開此地址，即可看到您的演示文稿。

Vite Local

Vite 提供的開發體驗非常順暢，它會追蹤 JavaScript 更改、CSS 更新和 HTML 編輯，並自動重新加載最少量的代碼。而 Reveal.js 則使用 URL 哈希來記住您的演示位置，即使在重新加載後也能保持在相同的幻燈片上。

步驟 6：構建生產版本

當您的演示文稿準備好之後，您可以構建生產版本：

npm run build

這將快速創建優化後的套裝版本，並將它們放置在 dist 目錄中。您可以看到所有靜態資源都被複製到了這個文件夾中。

Vite Build

您可以使用以下命令在本地檢查生產版本：

npx serve dist

Vite Serve

這將啟動一個本地服務器，通常在 http://localhost:3000 上運行，您可以確認生產版本的演示文稿是否正常工作。

使用 Markdown 創建幻燈片

Markdown Slides

Reveal.js 的一個強大功能是支持使用 Markdown 創建幻燈片，這可以大大簡化內容創建過程。

添加 Markdown 支持

要在 Reveal.js 中使用 Markdown，您需要添加 Markdown 插件：

// 在 main.js 中添加
import Markdown from "reveal.js/plugin/markdown/markdown.esm.js";

let deck = new Reveal({
  plugins: [Markdown],
  // 其他選項...
});

deck.initialize();

這將使 Reveal.js 能夠解析和渲染 Markdown 內容。

在 HTML 中使用 Markdown

有兩種方式可以在 Reveal.js 中使用 Markdown：

方式 1：使用 data-markdown 屬性

您可以為 <section> 元素添加 data-markdown 屬性，並使用 <textarea data-template> 包裝 Markdown 內容：

<section data-markdown>
  <textarea data-template>
    ## 幻燈片標題

    這是使用 Markdown 創建的幻燈片。

    - 項目 1
    - 項目 2
    - 項目 3
  </textarea>
</section>

在這個例子中，Markdown 內容將被解析並渲染為 HTML。

方式 2：使用外部 Markdown 文件

您還可以從外部 Markdown 文件加載內容：

<section
  data-markdown="slide.md"
  data-separator="^---"
  data-separator-vertical="^--"
></section>

這將從 slide.md 文件加載 Markdown 內容，使用指定的分隔符來劃分水平和垂直幻燈片。

進階功能

Reveal.js 提供了許多進階功能，可以根據需要添加到您的演示文稿中。

添加代碼高亮

如果您需要在幻燈片中展示代碼並帶有語法高亮，可以使用 Highlight.js 插件：

// 在 main.js 中添加
import Highlight from "reveal.js/plugin/highlight/highlight.esm.js";

let deck = new Reveal({
  plugins: [Markdown, Highlight], // 可以同時使用多個插件
  // 其他選項...
});

deck.initialize();

然後在您的 Markdown 或 HTML 中使用代碼塊：

function sayHello() {
console.log("Hello, world!");
}

這將使代碼塊以語法高亮的方式顯示。

使用靜態媒體資源

要在演示文稿中使用圖片或其他靜態資源，Vite 使用 public 資料夾來存放這些文件。例如，如果您想添加一張圖片，可以將其放在 public 資料夾中，然後在 HTML 或 Markdown 中引用它：

<img src="/screenshot.png" alt="截圖">

注意，路徑應該使用絕對路徑，且不包含 public 前綴。

Markdown 在 Reveal.js 中的實際應用

Markdown 的簡潔語法使它成為創建演示文稿內容的理想選擇。以下是一個更完整的 Markdown 幻燈片示例：

# 演示文稿標題

## 作者：您的名字

---

## 第一部分：簡介

- Reveal.js 是一個強大的 HTML 演示框架
- Vite 提供極快的開發體驗
- 兩者結合實現高效的演示文稿開發

---

## 第二部分：核心功能

- 支持 HTML 和 Markdown
- 垂直和水平導航
- 可客製化的主題和轉場效果

---

## 第三部分：總結

1. 使用 Vite 和 Reveal.js 很簡單
2. 創建專業的演示文稿變得更加高效
3. 豐富的功能滿足各種演示需求

在這個例子中，--- 用於創建水平幻燈片。這種方式讓您能夠組織具有層次結構的內容，同時保持 Markdown 的簡潔性。

使用外部工具將 Markdown 轉換為演示文稿

除了直接在 Reveal.js 中使用 Markdown 外，還有其他工具可以將獨立的 Markdown 文件轉換為演示文稿。例如，Pandoc 是一個強大的文檔轉換工具，可以將 Markdown 轉換為 Reveal.js 幻燈片。

pandoc -t revealjs -s -o presentation.html presentation.md

這種方法的優勢在於您可以專注於純 Markdown 內容創作，然後使用工具將其轉換為完整的演示文稿。

安全性和依賴管理

在開發過程中，確保項目的安全性和依賴管理是非常重要的。以下是一些建議：

版本鎖定：在 package.json 中使用確切的版本號，避免使用 ^ 或 ~ 符號：

{
  "dependencies": {
    "reveal.js": "5.1.0",
    "vite": "4.5.0"
  }
}

定期更新：使用以下命令定期檢查和更新依賴：

npm audit
npm outdated
npm update

安全掃描：在部署前運行安全掃描：

npm audit fix

內容安全策略：如果要在生產環境部署，建議添加適當的 Content Security Policy 標頭，以防止 XSS 攻擊。特別是在使用外部資源（如圖片、字體等）時，請確保在 CSP 中正確配置相應的來源。
依賴項檢查：定期使用 npm audit 檢查安全漏洞，並確保所有依賴項都使用穩定版本。如果發現漏洞，請立即更新到修復版本。