安裝
我們提供三種不同安裝 reveal.js 的方式,取決於你的使用情境和技術經驗。
- 基本設置 是開始使用的最簡單函式。無需設置任何構建工具。
- 完整設置 可讓你訪問更改 reveal.js 源代碼所需的構建工具。它包括一個網頁伺服器,如果你想要加載外部 Markdown 文件則需要此伺服器(基本設置配合你自訂的網頁伺服器也可以)。
- 如果你想在項目中使用 reveal.js 作為依賴項,你可以 從 npm 安裝。
下一步
安裝完 reveal.js 後,我們推薦你查看 Markup 和 配置選項 指南。
基本設置
我們希望能讓盡可能多的人使用 reveal.js。基本設置是大家最常使用的方式,你只需要有一個瀏覽器。無需經過構建過程或安裝任何依賴套件。
- 下載最新版本的 reveal.js https://github.com/hakimel/reveal.js/archive/master.zip
- 解壓並替換 index.html 中的範例內容為你自己的
- 在瀏覽器中打開 index.html 查看
就是這麼簡單 🚀
完整設置 - 推薦
某些 reveal.js 功能,如外部 Markdown,簡報需要從本地網頁伺服器執行。以下指令將設置這樣的伺服器以及完成對 reveal.js 源代碼所需的所有開發任務。
安裝 Node.js (10.0.0 或更高版本)
克隆 reveal.js 倉庫
$ git clone https://github.com/hakimel/reveal.js.git
移動到 reveal.js 資料夾並安裝依賴
$ cd reveal.js && npm install
提供簡報並監控源文件的更改
$ npm start
打開 http://localhost:8000 查看你的簡報
開發伺服器端口
開發伺服器默認使用 8000 端口。你可以使用 port
參數切換到不同的端口:
npm start -- --port=8001
從 npm 安裝
reveal.js 有上架至 npm 可以直接安裝。請注意,reveal.js 面向瀏覽器並包含 CSS、字體及其他資源,因此使用 npm 安裝許多功能可能會受限。
npm install reveal.js
# 或者
yarn add reveal.js
安裝後,你可以將 reveal.js 作為 ES 模塊導入:
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
let deck = new Reveal({
plugins: [Markdown],
});
deck.initialize();
你還需要包括 reveal.js 的樣式和一個 簡報主題。
<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css" />