External Libraries

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.

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

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

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:
...
# See: http://fancyapps.com/fancybox/
fancybox: //cdn.jsdelivr.net/npm/fancybox@2.1.5/dist/js/jquery.fancybox.pack.js
fancybox_css: //cdn.jsdelivr.net/npm/fancybox@2.1.5/dist/css/jquery.fancybox.min.css
...

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

hexo/_config.yml
fancybox: false

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

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

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:
...
# See: http://fancyapps.com/fancybox/
fancybox: //cdn.jsdelivr.net/npm/fancybox@3.0.0/dist/js/jquery.fancybox.pack.js
fancybox_css: //cdn.jsdelivr.net/npm/fancybox@3.0.0/dist/css/jquery.fancybox.min.css
...

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

hexo/_config.yml
fancybox: false

Bookmark

Bookmark is a plugin that allow the users save their reading position. The users could just click the bookmark icon (like 🔖) in left-top of the page to save the position. And when they visit your blog in the next time, they can continue the last reading position by clicking the bookmark icon from the home page.

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

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

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:
...
# bookmark
# https://github.com/theme-next/theme-next-bookmark
bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1.0.0/bookmark.min.js
...

After the plugin installed, you can enable it by editing values bookmark.enable to true in theme config file.

hexo/_config.yml
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
enable: false
# if auto
# - save the reading position when closing the page
# - or clicking the bookmark-icon
# if manual, only save it by clicking the bookmark-icon
save: auto

Reading Progress

NexT supports the page scroll reading progress indicator.

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

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

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:
...
# reading_progress
# https://github.com/theme-next/theme-next-reading-progress
reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js
...

After the plugin installed, you can enable it by editing values reading_progress.enable to true in theme config file.

hexo/_config.yml
reading_progress:
enable: false
color: "#37c6c0"
height: 2px

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:
...
# See: https://github.com/HubSpot/pace
pace: //cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js
pace_css: //cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css
...

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

hexo/_config.yml
pace: false

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-loading-bar
  • pace-theme-mac-osx
  • pace-theme-minimal

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

hexo/_config.yml
pace_theme: pace-theme-minimal

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

next/_config.yml
vendors:
...
# See: https://github.com/HubSpot/pace
pace_css: //cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css
...

FastClick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

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

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

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:
...
# See: https://github.com/ftlabs/fastclick
fastclick: https://cdn.jsdelivr.net/npm/fastclick@1.0.6/lib/fastclick.min.js
...

After the plugin installed, you can enable it by editing values fastclick to true in theme config file.

hexo/_config.yml
# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-fastclick
fastclick: false

Jquery Lazyload

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

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

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

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:
...
# See: https://github.com/tuupola/jquery_lazyload
lazyload: //cdn.jsdelivr.net/npm/jquery_lazyload@1.9.3/jquery.lazyload.min.js
...

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

hexo/_config.yml
# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-fastclick
lazyload: false

Backgroud JS

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.0.1/dist/canvas-nest.min.js
...

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

hexo/_config.yml
# Dependencies: https://github.com/theme-next/theme-next-fastclick
canvas_nest: false

For now, it will be loaded both in webs and mobile devices.

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.0.0/canvas-ribbon.js
...

After the plugin installed, you can enable it by editing values 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: false
size: 300
alpha: 0.6
zIndex: -1

For now only Pisces Scheme supports canvas ribbon setting under 6.0.x version or highter.

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.0.0/three.min.js

# three_waves
# https://github.com/jjandxa/three_waves
three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js

# three_waves
# https://github.com/jjandxa/canvas_lines
canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js

# three_waves
# https://github.com/jjandxa/canvas_sphere
canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js

...

After the plugin installed, you can enable it by editing values three_waves or canvas_lines or canvas_sphere to true in theme config file.

hexo/_config.yml
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

Chinese Typesetting

Han Support

Han.css provides a CSS typography framework optimised for Hanzi.

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

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

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/ethantw/Han
han: //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css
...

After the plugin installed, you can enable it by editing values han to true in theme config file.

hexo/_config.yml
# Dependencies: https://github.com/theme-next/theme-next-han
han: false

Pangu Autospace Support

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

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

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

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/vinta/pangu.js
pangu: //cdn.jsdelivr.net/npm/pangu@3.3.0/dist/browser/pangu.min.js
...

After the plugin installed, you can enable it by editing values han to true in theme config file.

hexo/_config.yml
# Dependencies: https://github.com/theme-next/theme-next-pangu
pangu: false