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

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

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

1. 安裝

1. Clone anvithks的儲存庫

1
2

git clone https://github.com/anvithks/hugo-embed-pdf-shortcode.git
cd hugo-embed-pdf-shortcode

2. 將/layouts/shortcodes/embed-pdf.html複製到你的網站目錄/layouts/shortcodes。如果shortcodes目錄不存在，就自行新建。

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

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

1

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

2. 使用

1. 在撰寫Markdown文章時，在檔案內插入以下語法(最前面的二個大括號中間沒有空格)：

1

{ {< embed-pdf url="pdf路徑" >}}

2. 假設pdf檔案位於你的網站目錄/static/file/example.pdf，那麼引用pdf時要填寫相對路徑：

1

{ {< embed-pdf url="/file/example.pdf" >}}

3. 尚有參數可調整，例如隱藏分頁：

1

{ {< embed-pdf url="./path/to/pdf/file/example.pdf" hidePaginator="true" >}}

4. 只渲染特定頁面：

1

{ {< embed-pdf url="./path/to/pdf/file/example.pdf" renderPageNum="5" >}}

5. 隱藏載入的圖示：

1

{ {< embed-pdf url="./path/to/pdf/file/example.pdf" hideLoader="true" >}}