在Hugo生成的靜態網頁內嵌入PDF
資訊科技
Hugo網站架設
Hugo

作者
Ivon Huang
目錄
雖然說是嵌入,但並不是檔案檢視器,而是把PDF即時渲染成左右翻頁的靜態圖片,效果參考
這篇,如圖:
如果要真的嵌入,Google Drive的PDF元件應該是最方便的了,不過手機瀏覽的話會變成下載PDF。而渲染成圖片的話,讀者可以直接在網站上讀。
1. 安裝 #
- Clone anvithks的儲存庫
git clone https://github.com/anvithks/hugo-embed-pdf-shortcode.git
cd hugo-embed-pdf-shortcode
將
/layouts/shortcodes/embed-pdf.html
複製到你的網站目錄/layouts/shortcodes
。如果shortcodes目錄不存在,就自行新建。將
/static/js/pdf-js
複製到你的網站目錄/staic/js
目錄下。根據Github回報,這個shortcodes有小bug,因此要開啟
你的網站目錄/layouts/shortcodes/embed-pdf.html
,將第一行改成:
<script src= '/js/pdf-js/build/pdf.js'></script>
2. 使用 #
- 在撰寫Markdown文章時,在檔案內插入以下語法(最前面的二個大括號中間沒有空格):
{ {< embed-pdf url="pdf路徑" >}}
- 假設pdf檔案位於
你的網站目錄/static/file/example.pdf
,那麼引用pdf時要填寫相對路徑:
{ {< embed-pdf url="/file/example.pdf" >}}
- 尚有參數可調整,例如隱藏分頁:
{ {< embed-pdf url="./path/to/pdf/file/example.pdf" hidePaginator="true" >}}
- 只渲染特定頁面:
{ {< embed-pdf url="./path/to/pdf/file/example.pdf" renderPageNum="5" >}}
- 隱藏載入的圖示:
{ {< embed-pdf url="./path/to/pdf/file/example.pdf" hideLoader="true" >}}
相關文章
使用Hugo架設多國語言網站(i18n)
資訊科技
Hugo網站架設
Hugo
如何給Hugo + Netlify的網站加上Gitalk留言板
資訊科技
Hugo網站架設
Hugo
從Minetest Game Jam 2021發掘值得一玩的子遊戲
遊戲攻略
Minetest資訊
Minetest