Skip to content
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

PDF.js for NexT


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

It's based on PDFObject and PDF.js. If the browser supports embedded PDFs natively, PDFObject will create a <embed> tag and include the PDF file on your website. Otherwise it will create a <iframe> tag and uses PDF.js to render the pdf file.

Follow the guide below to install dependencies.


Step 1 → Go to NexT dir

Change dir to NexT directory. There must be layout, source, languages and other directories:

$ cd themes/next
$ ls
_config.yml  crowdin.yml  docs  gulpfile.js  languages  layout  package.json  scripts  source

Step 2 → Get module

Install module to source/lib directory:

$ git clone source/lib/pdf

Step 3 → Set it up

Enable module in NexT _config.yml file:

# PDF tag, requires two plugins: pdfObject and pdf.js
# pdfObject will try to load pdf files natively, if failed, pdf.js will be used.
# The following `cdn` setting is only for pdfObject, because cdn for pdf.js might be blocked by CORS policy.
# So, YOU MUST install the dependency of pdf.js if you want to use pdf tag and make it work on all browsers.
# See:
  enable: true
  # Default height
  height: 500px
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //


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 /path/to/your/file.pdf %}

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

Enjoy it!


$ cd themes/next/source/lib/pdf
$ git pull
You can’t perform that action at this time.