Marp是一款讓你用Markdown做簡報的VS Code插件。可以將簡報輸出為PDF或HTML格式。
我想要在自己的Hugo網頁展示簡報,但又不把它上傳到第三方平台託管,該怎麼辦呢?
這有幾種做法:一種是在網頁引入Marp的Javascript函式庫,即時將Markdown程式碼渲染成簡報。
不過這個渲染速度太慢,我希望網頁一載入就有簡報可以看,並且我希望這個簡報是互動式的,因此PDF成為次要考量。
我決定將簡報輸出為靜態HTML,這個html會帶有可以Marp提供的翻頁基本元件,用相對路徑儲存圖片。然後用iframe語法嵌入到Hugo頁面。
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簡報#
在VS Code裡面將Marp的簡報輸出為HTML + 附件
將檔案放到Page Bundle的files目錄
.
├── files
│ ├── images
│ │ ├── image1.webp
│ │ └── image2.webp
│ └── marp.html
└── index.md- 在Markdown裡面用iframe插入
<iframe src="files/marp.html" width="100%" height="400px" title="Marp Presentation Slides">
</iframe>

