鸽子窝

努力改变世界~

PDF.js for NexT

Introduce

This is a plugin that allows to preview PDF files in the blog pages.

If the browser supports embedded PDFs natively, NexT will create a <embed> tag and include the PDF file on your website. Otherwise, it will create a <iframe> tag and uses PDF.js by @mozilla to render the pdf file.

Follow the guide below to install the plugin.

Installation

Step 1 → Go to Hexo dir

Change dir to Hexo directory. There must be source, themes and other directories:

1
2
3
4
$ cd hexo-site
$ ls
_config.next.yml  db.json           package-lock.json scaffolds         themes
_config.yml       node_modules      package.json      source

Step 2 → Install plugin

If you have already added the Hexo directory to a git repository, then install this plugin as a git submodule:

1
$ git submodule add https://github.com/next-theme/theme-next-pdf source/lib/pdf

Otherwise, install the plugin to source/lib directory via git clone:

1
$ git clone https://github.com/next-theme/theme-next-pdf source/lib/pdf

Step 3 → Set it up

Enable the plugin in NexT _config.next.yml file:

1
2
3
4
5
6
7
8
# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# See: https://github.com/next-theme/theme-next-pdf
pdf:
  enable: true
  # Default height
  height: 500px

Find and edit skip_render settings in Hexo _config.yml file:

1
2
skip_render:
  - lib/**/*

Usage

In order to embed PDF files in the article, you just need to create pdf tags with the URL of your local PDF file, e.g.

1
{% pdf /path/to/your/file.pdf %}

Notice: Do not use cross-origin PDF files, it might be blocked by the CORS policy.

Enjoy it!

Update

1
2
$ cd hexo-site/source/lib/pdf
$ git pull
0%