hexo中插入pdf

法1:安装hexo-pdf插件

法2:利用html语法:可以轻松设定尺寸

why? 我的本地浏览成功。但在线上却是一片空白。希望只有我一个人是这样吧

安装hexo-pdf插件

hexo-pdf

Hexo tag for embeded pdf

Install

1
$ npm install --save hexo-pdf

Normal PDF

pdf链接

1
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

本地(我的失败了,还没找到原因

1
{% pdf ./bash_freshman.pdf %}

Google drive

1
{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

Slideshare

1
{% pdf http://www.slideshare.net/slideshow/embed_code/key/8Jl0hUt2OKUOOE %}

示例:图片来源于网络


利用html语法

首先修改_config.yml文件

将_config.yml中的post_asset_folder选项置为true

1
post_asset_folder: true

关于这个选项的功能说明如下:

当您设置post_asset_folder为true参数后,在建立文件时,Hexo
会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。

然后新建一篇文章

1
$ hexo new

由于上一步已经将post_asset_folder选项设为了true
所以这一步新建文章时会创建一个md文件和一个同名的文件夹
为了方便叙述,我用test作为文件和文件夹名

编辑test.md

用vim或者别的编辑器打开test.md

test.md文件中加入如下代码

<object data="./test/test.pdf" type="application/pdf" width="100%" height="100%">

关于这句代码简单的解释
data表示你要上传的pdf的路径,使用相对路径,将你要上传的pdf放入第二步生成的test文 件夹
type和width就不说了,这里注意height不能设成100%,不然太矮了,显示效果不好
可以用浏览器预览,通过F12预估一下高度。我最后代码如下,供参考

<object data="http://image.fiftykg.com/pdf/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E8%8F%9C%E5%8D%95%E8%B0%83%E7%A0%94.pdf " type="application/pdf" width="100%" height="877px">

这里不一定非用object标签,embed、iframe标签也一样

具体参考:网页链接

注意

用html方法,在我的主题中,如果它后面有文字,会显示不出来,原因不详。所以实例我放在文章底部展示了


参考文章

hexo-pdf官方教程

hexo中插入pdf解决方法

相关文章

theme-hexo-pdf使用技巧—-解决hexo-pdf文件显示不全的问题

发布了33 篇原创文章 · 获赞 10 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览