插件

插件可用於為 reveal.js 增加額外功能。要使用插件,你需要執行兩件事:

  1. 在文檔中包含插件腳本。(有些插件可能還需要樣式。)
  2. 通過在初始化時將其包含在 plugins 數組中來告訴 reveal.js 關於插件。

這是一個範例:

<script src="plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealMarkdown],
  });
</script>

如果你使用 ES 模塊,我們也為所有內置插件提供了模塊導出:

<script type="module">
  import Reveal from 'dist/reveal.esm.js';
  import Markdown from 'plugin/markdown/markdown.esm.js';
  Reveal.initialize({
    plugins: [Markdown],
  });
</script>

內置插件

一些常見的插件,包括支持 Markdown代碼高亮演講者筆記,均包含在我們默認的簡報模板中。

這些插件與 reveal.js 存儲庫一起分發。這是所有內置插件的完整列表。

名稱描述
RevealHighlight語法高亮的代碼
plugin/highlight/highlight.js
RevealMarkdown使用 Markdown 編寫內容。
plugin/markdown/markdown.js
RevealSearch按 CTRL+Shift+F 搜索幻燈片內容。
plugin/search/search.js
RevealNotes在單獨視窗中顯示演講者視圖
plugin/notes/notes.js
RevealMath呈現數學方程式
plugin/math/math.js
RevealZoomAlt+ 點擊元素放大(Linux 中使用 CTRL+ 點擊)。
plugin/zoom/zoom.js

如果你換用 .js.esm.js,以上所有插件都可以作為 ES 模塊獲得。

API

我們提供了 API 函式來檢查哪些插件目前已導入。如果你想手動調用插件上的函式,也可以檢索任何已導入插件實例的參考。

import Reveal from 'dist/reveal.esm.js';
import Markdown from 'plugin/markdown/markdown.esm.js';
import Highlight from 'plugin/highlight/highlight.esm.js';

Reveal.initialize({ plugins: [Markdown, Highlight] });

Reveal.hasPlugin('markdown');
// true

Reveal.getPlugin('markdown');
// { id: "markdown", init: ... }

Reveal.getPlugins();
// {
//   markdown: { id: "markdown", init: ... },
//   highlight: { id: "highlight", init: ... }
// }

依賴 4.0.0

這個功能是為了向後兼容而保留的,但從 reveal.js 4.0.0 開始已被廢棄。在舊版本中,我們使用內置的依賴加載器來加載插件。我們停用這一功能是因為腳本的最佳加載和捆綁方式可能會根據使用案例大不相同。如果你需要加載一個依賴,請使用 <script defer> 標籤包含它。

依賴按照它們出現的順序加載。

Reveal.initialize({
  dependencies: [
    { src: 'plugin/markdown/markdown.js', condition: () => {
        return !!document.querySelector([data-markdown]);
    } },
    { src: 'plugin/highlight/highlight.js', async: true }
  ]
});

每個依賴對象都有以下屬性:

  • src: 要加載的腳本的路徑
  • async: [可選] 標記腳本是否應該在 reveal.js 啟動後加載,默認為 false
  • callback: [可選] 腳本加載完成時執行的函數
  • condition: [可選] 必須返回 true 才會加載腳本的函數