External Libraries

PJAX

Pjax is a standalone JavaScript module that uses AJAX (XmlHttpRequest) and pushState() to deliver a fast browsing experience.

It allows you to completely transform the user experience of standard websites (server-side generated or static ones) to make users feel like they are browsing an app, especially for those with low bandwidth connections.

Change dir to NexT directory, and install module to source/lib directory.

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

If you want to use the CDN instead of clone this repo, then need to set vendors in theme config file:

next/_config.yml
vendors:
...
pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
...

After the plugin installed, you can enable it by setting value pjax to true in theme config file.

hexo/_config.yml
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
# For moreinformation: https://github.com/MoOx/pjax
pjax: true

Fancybox

NexT supports the fancybox plugin, which is a jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

There is support for old version 2 and new version 3. Please, choose only any one variant, do not need to install both.

If you want to use a different version from CDN, please follow the instructions below.

You need to set vendors in theme config file:

next/_config.yml
vendors:
...
jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
fancybox: //cdn.jsdelivr.net/npm/fancybox@2/dist/js/jquery.fancybox.pack.js
fancybox_css: //cdn.jsdelivr.net/npm/fancybox@2/dist/css/jquery.fancybox.min.css
...

After the plugin installed, you can enable it by setting value fancybox to true in theme config file.

hexo/_config.yml
fancybox: true

If you want to use a different version from CDN, please follow the instructions below.

You need to set vendors in theme config file:

next/_config.yml
vendors:
...
jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
fancybox: //cdn.jsdelivr.net/npm/fancybox@3/dist/js/jquery.fancybox.pack.js
fancybox_css: //cdn.jsdelivr.net/npm/fancybox@3/dist/css/jquery.fancybox.min.css
...

After the plugin installed, you can enable it by setting value fancybox to true in theme config file.

hexo/_config.yml
fancybox: true

Medium Zoom

Medium Zoom is a JavaScript library for zooming images like Medium.

If you want to use a different version from CDN, please follow the instructions below.

You need to set vendors in theme config file:

next/_config.yml
vendors:
...
mediumzoom: https://cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
...

After the plugin installed, you can enable it by setting value mediumzoom to true in theme config file.

hexo/_config.yml
# A JavaScript library for zooming images like Medium.
mediumzoom: true

Do not enable both fancybox and mediumzoom.

Lazyload

Lazyload is a modern vanilla JavaScript version of the original Lazy Load plugin. Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

If you want to use a different version from CDN, please follow the instructions below.

You need to set vendors in theme config file:

next/_config.yml
vendors:
...
lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
...

After the plugin installed, you can enable it by setting value lazyload to true in theme config file.

hexo/_config.yml
# Vanilla JavaScript plugin for lazyloading images.
lazyload: true

Pangu Autospace

pangu.js will automatically insert a blank space between all the Chinese characters and the hexagonal English numeric symbols on the page.

If you want to use a different version from CDN, please follow the instructions below.

You need to set vendors in theme config file:

next/_config.yml
vendors:
...
# https://github.com/vinta/pangu.js
pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js
...

After the plugin installed, you can enable it by setting value pangu to true in theme config file.

hexo/_config.yml
# Pangu Support
pangu: true

Quicklink is a JavaScript plugin that faster subsequent page-loads by prefetching in-viewport links during idle time. Chrome, Firefox, Edge are supported without polyfills.

Animation Effect

NexT enables animation effect by default which is supported by JavaScript, so it will wait for JavaScript loaded to show content.
If you need speed you can set this section to false to disable it.

Edit theme config file and set the needed values under the motion to fit your demand.

next/_config.yml
# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

Progress Bar

Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.

Change dir to NexT directory, and install module to source/lib directory.

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

If you want to use the CDN instead of clone this repo, then need to set vendors in theme config file:

next/_config.yml
vendors:
...
pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
...

After the plugin installed, you can enable it by setting value pace.enable to true in theme config file.

hexo/_config.yml
pace:
enable: true

Pace includes a bunch of themes to get you started. Just include the appropriate css file.

  • pace-theme-big-counter
  • pace-theme-bounce
  • pace-theme-barber-shop
  • pace-theme-center-atom
  • pace-theme-center-circle
  • pace-theme-center-radar
  • pace-theme-center-simple
  • pace-theme-corner-indicator
  • pace-theme-fill-left
  • pace-theme-flash
  • pace-theme-flat-top
  • pace-theme-loading-bar
  • pace-theme-mac-osx
  • pace-theme-material
  • pace-theme-minimal

By default NexT uses minimal theme (pace-theme-minimal). You can configure it by editing values in pace.theme section in theme config file.

hexo/_config.yml
pace:
theme: minimal

If you want to use the CDN, then need to set vendors in theme config file:

next/_config.yml
vendors:
...
pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
...

Backgroud JS

JavaScript 3D library

The aim of JavaScript 3D library is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.

Change dir to NexT directory, and install module to source/lib directory.

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-three source/lib/three

If you want to use the CDN instead of clone this repo, then need to set vendors in theme config file:

next/_config.yml
vendors:
...
# three
three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js

# three_waves
three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js

# canvas_lines
canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js

# canvas_sphere
canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js

...

After the plugin installed, you can enable it by setting value three.enable and three.three_waves or three.canvas_lines or three.canvas_sphere to true in theme config file.

hexo/_config.yml
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: true
delay: false # Set true to further delay loading
three_waves: false
canvas_lines: false
canvas_sphere: false

Canvas Nest

canvas-nest.js is a nest backgroud of website draw on canvas.

Change dir to NexT directory, and install module to source/lib directory.

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

If you want to use the CDN instead of clone this repo, then need to set vendors in theme config file:

next/_config.yml
vendors:
...
# https://github.com/hustcc/canvas-nest.js
canvas_nest: //cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.min.js
...

After the plugin installed, you can enable it by setting value canvas_nest to true in theme config file.

hexo/_config.yml
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true

Canvas Ribbon

canvas-ribbon.js is a ribbon backgroud of website draw on canvas.

Change dir to NexT directory, and install module to source/lib directory.

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

If you want to use the CDN instead of clone this repo, then need to set vendors in theme config file:

next/_config.yml
vendors:
...
# https://github.com/zproo/canvas-ribbon
canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
...

After the plugin installed, you can enable it by setting value canvas_ribbon to true in theme config file. You can also configure the ribbon setting by editing values in canvas_ribbon section:

  • size: The width of the ribbon.
  • alpha: The transparency of the ribbon.
  • zIndex: The display level of the ribbon.
hexo/_config.yml
canvas_ribbon:
enable: true
size: 300
alpha: 0.6
zIndex: -1