快轉到主要內容

在網頁嵌入Markdown簡報:使用Marp + Hugo page bundle HTML iframe

· 民國115年丙午年
·
切換正體/简体 ·
分類 資訊科技 Hugo網站架設
標籤 Markdown
目錄

Marp是一款讓你用Markdown做簡報的VS Code插件。可以將簡報輸出為PDF或HTML格式。

我想要在自己的Hugo網頁展示簡報,但又不把它上傳到第三方平台託管,該怎麼辦呢?

這有幾種做法:一種是在網頁引入Marp的Javascript函式庫,即時將Markdown程式碼渲染成簡報。

不過這個渲染速度太慢,我希望網頁一載入就有簡報可以看,並且我希望這個簡報是互動式的,因此PDF成為次要考量。

我決定將簡報輸出為靜態HTML,這個html會帶有可以Marp提供的翻頁基本元件,用相對路徑儲存圖片。然後用iframe語法嵌入到Hugo頁面。

具體效果:Phosh:Linux手機觸控桌面環境簡介

1. 允許Hugo生成HTML
#

如果要在Hugo網頁生成檔案,必須到config取消html註解,令其能生成為一個獨立檔案。才能被網頁引用

[outputs]
home = ["HTML", "RSS", "JSON"]

[contentTypes]
  [contentTypes.'text/html']
  [contentTypes.'text/asciidoc']
  [contentTypes.'text/markdown']
  [contentTypes.'text/org']
  [contentTypes.'text/pandoc']
  [contentTypes.'text/rst']

2. 嵌入Marp簡報
#

  1. 在VS Code裡面將Marp的簡報輸出為HTML + 附件

  2. 將檔案放到Page Bundle的files目錄

.
├── files
│   ├── images
│   │   ├── image1.webp
│   │   └── image2.webp
│   └── marp.html
└── index.md
  1. 在Markdown裡面用iframe插入
<iframe src="files/marp.html" width="100%" height="400px" title="Marp Presentation Slides">
</iframe>

相關文章


感謝您的閱讀。我寫作是為了誠實表達想法,而不是追逐社群互動與流量。我很樂意傾聽你在仔細閱讀我文章之後的心得。若有內容勘誤 or 技術問題 or 回饋想法,歡迎透過本站「關於」頁面的Email與我聯絡。