雖然說是嵌入,但並不是檔案檢視器,而是把PDF即時渲染成左右翻頁的靜態圖片,效果參考這篇,如圖:
如果要真的嵌入,Google Drive的PDF元件應該是最方便的了,不過手機瀏覽的話會變成下載PDF。而渲染成圖片的話,讀者可以直接在網站上讀。
- Clone anvithks的儲存庫
1
2
|
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
,將第一行改成:
1
|
<script src= '/js/pdf-js/build/pdf.js'></script>
|
- 在撰寫Markdown文章時,在檔案內插入以下語法(最前面的二個大括號中間沒有空格):
1
|
{ {< embed-pdf url="pdf路徑" >}}
|
- 假設pdf檔案位於
你的網站目錄/static/file/example.pdf
,那麼引用pdf時要填寫相對路徑:
1
|
{ {< 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" >}}
|