Menu
Article Tech

External.js - Load HTML in Reveal.js

Wei Lee

Wei Lee

• 1 min read
Category Tech

reavel.js 提供了 data-markdown="example.md" 這個 tag 可以載入外部的 markdown
卻沒提供可以載入 html 的 tag
於是就有人寫了這個External.js

有了 External.js，就可以不用把所有的內容都寫在 index.html 裡面

Install

Method1: Download

  1. 到 external 下載
  2. 把 extneral 裡面的 external 資料夾放到 plugin 裡面
  3. 在 index.html 中的 Reveal.initialize 這個 block 加入下面的內容
{ src: 'plugin/external/external.js', condition: function() { return !!document.querySelector( '[data-external]' ); } },

Method2: Submodule

不過為了讓他的更新也能被追蹤，我使用了 git submodule

  • git submodule
git submodule add https://github.com/calevans/external plugin/external
  • 在 index.html 中的 Reveal.initialize 這個 block 加入下面的內容
{ src: 'plugin/external/external/external.js', condition: function() { return !!document.querySelector( '[data-external]' ); } },

( 注意兩種方式加入的內容有些微的不同 )

Usage

之後就能使用 data-external 這個 tag 來載入外部的 html

原本的 index.html

<section data-external="module_01/index.html"> </section>

外部 html

<!-- module_01/index.html -->
<h1> This is external <h1>

載入後的 html

<section data-external="module_01/index.html">
    <!-- module_01/index.html -->
    <h1> This is external <h1>
</section>
Share