The Details Usage of the Hexo Next-Theme Plugin `next-pdf`

This post will introce the usage of the plugin which allows to preview PDF files in the blog pages.

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 dependencies.

Installation

See Github.

Usage

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

{% pdf https://domin.com/files/file.pdf %}

or

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

obviously, it’s very easy to actualize by url, but it will need some configure for yourself to use it when you have to use by local file path.

Step 1

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

cd source
mkdir files

files folder will be used to store files (e.g. *.pdf).

Obviously, you can set anyname for folder, but the posterior config will need to modify.

Modify _config.yml:

skip_render:
  - "lib/**/*"
  - "files/**/*"

...

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
  - "files/**/*"
exclude:
  - "lib/**/*"
ignore:

In this way, you can deploy the files folder in the public folder when executed $ hexo generate

about include you can see hexo-configuration.

Step 2

Change dir to Next Theme directory.

Modify _config.yml:

# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
  enable: true
  # Default height
  height: 500px

Step 3

For example: the pdf files path: Hexo directory/source/files/filename.pdf

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

{% pdf ../../files/filename.pdf %}

---

Enjoy it!