快轉到主要內容

在Hugo生成的靜態網頁內嵌入PDF

資訊科技 Hugo網站架設 Hugo
✍ 切換正體/簡體字
Ivon Huang
作者
Ivon Huang
目錄

雖然說是嵌入,但並不是檔案檢視器,而是把PDF即時渲染成左右翻頁的靜態圖片,效果參考 這篇,如圖:

如果要真的嵌入,Google Drive的PDF元件應該是最方便的了,不過手機瀏覽的話會變成下載PDF。而渲染成圖片的話,讀者可以直接在網站上讀。

1. 安裝 #

  1. Clone anvithks的儲存庫
git clone https://github.com/anvithks/hugo-embed-pdf-shortcode.git
cd hugo-embed-pdf-shortcode
  1. /layouts/shortcodes/embed-pdf.html複製到你的網站目錄/layouts/shortcodes。如果shortcodes目錄不存在,就自行新建。

  2. /static/js/pdf-js複製到你的網站目錄/staic/js目錄下。

  3. 根據Github回報,這個shortcodes有小bug,因此要開啟你的網站目錄/layouts/shortcodes/embed-pdf.html,將第一行改成:

<script src= '/js/pdf-js/build/pdf.js'></script>

2. 使用 #

  1. 在撰寫Markdown文章時,在檔案內插入以下語法(最前面的二個大括號中間沒有空格):
{ {< embed-pdf url="pdf路徑" >}}
  1. 假設pdf檔案位於你的網站目錄/static/file/example.pdf,那麼引用pdf時要填寫相對路徑:
{ {< embed-pdf url="/file/example.pdf" >}}
  1. 尚有參數可調整,例如隱藏分頁:
{ {< embed-pdf url="./path/to/pdf/file/example.pdf" hidePaginator="true" >}}
  1. 只渲染特定頁面:
{ {< embed-pdf url="./path/to/pdf/file/example.pdf" renderPageNum="5" >}}
  1. 隱藏載入的圖示:
{ {< 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

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要登入Github帳號才能留言。支援markdown語法,方便您張貼程式碼,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。無論有無登入皆可留言。此處留言只有本站參與者看得到。若您選擇以訪客身份匿名留言,就不會收到後續回覆通知。