Bootstrap

hugo独立博客里内嵌PDF阅读

使用hugo建立了个人独立博客 shenlb.me,然后开始各种折腾。

这次想在文章里嵌入PDF,让阅读体验更好一些。

anvithks提供了一个方案,过程是这样的:

(1)下载主题
从 https://github.com/anvithks/hugo-embed-pdf-shortcode.git 下载主题的zip压缩包,把内容放在 slb-blog/themes 文件夹下,记得修改文件夹名称为 hugo-embed-pdf-shortcode
(2)修改hugo.yaml

theme: ["PaperMod", "hugo-embed-pdf-shortcode"]

(3)把 slb-blog/themes/hugo-embed-pdf-shortcode/layouts/shortcodes/embed-pdf.html 复制到自己的文件夹 slb-blog/layouts/shortcodes 下,如果shortcodes 文件夹不存在,就自己创建一个。

注意:据说这里有一个小BUG,需要修改文件里的这一行内容:

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

(4)把 slb-blog/themes/hugo-embed-pdf-shortcode/static/js/pdf-js/ 这个文件夹复制到自己的 slb-blog/static/js 文件夹之下。

(5)现在可以在文章里使用短代码嵌入PDF

{{< embed-pdf url="/shenlb.me.pdf" >}}

(6)效果展示

每天写给孩子一页纸

参考文章:
https://github.com/anvithks/hugo-embed-pdf-shortcode.git
https://discourse.gohugo.io/t/embed-pdf-file-into-a-page-or-post-papermod-theme/36440

;