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

相关推荐
ElasticPDF-新国产PDF编辑器16 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
ElasticPDF-新国产PDF编辑器1 天前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
夏天想1 天前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
ElasticPDF-新国产PDF编辑器1 天前
React 项目 PDF 批注插件库在线版 API 示例教程
react.js·pdf·json
hello_simon1 天前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
ZhangChuChu_92481 天前
Word在生成PDF后,PDF左侧导航书签目录错误显示的解决方法
pdf·word
inxunoffice2 天前
批量将文本文件转换为 Word/PDF/Excel/图片等其它格式
pdf·word·excel
人工智能教学实践2 天前
【爬虫脚本】实现批量pdf文件下载
pdf
海峰教授3 天前
扫描仪+文档pdf编辑器+pdf格式转换器
pdf
Li_na_na013 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5