Next Theme Tutorial

Posted on | Post modified | In
NexT is a high quality elegant Jekyll theme ported from Hexo Next. It is crafted from scratch, with love.

NexT is a high quality elegant Jekyll theme ported from Hexo Next. It is crafted from scratch, with love.

Live Preview

Screenshots

  • Desktop Desktop Preview

  • Sidebar

Desktop Sidebar Preview

  • Sidebar (Post details page)

Desktop Sidebar Preview

  • Mobile

Mobile Preview

Installation

Check whether you have Ruby 2.1.0 or higher installed:

1
ruby --version

Install Bundler:

1
gem install bundler

Clone Jacman theme:

1
2
git clone https://github.com/Simpleyyt/jekyll-theme-next.git
cd jekyll-theme-next

Install Jekyll and other dependencies from the GitHub Pages gem:

1
bundle install

Run your Jekyll site locally:

1
bundle exec jekyll server

More Details：Setting up your GitHub Pages site locally with Jekyll

Features

Multiple languages support, including: English / Russian / French / German / Simplified Chinese / Traditional Chinese.

Default language is English.

1
2
3
4
5
6
7
language: en
# language: zh-Hans
# language: fr-FR
# language: zh-hk
# language: zh-tw
# language: ru
# language: de

Set language field as following in site _config.yml to change to Chinese.

1
language: zh-Hans

Comment support.

NexT has native support for DuoShuo and Disqus comment systems.

Add the following snippets to your _config.yml:

1
2
3
duoshuo:
  enable: true
  shortname: your-duoshuo-shortname

OR

1
disqus_shortname: your-disqus-shortname

Social Media

NexT can automatically add links to your Social Media accounts:

1
2
3
4
5
6
social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url

Show a feed link.

Set rss field in theme’s _config.yml, as the following value:

  1. rss: false will totally disable feed link.

  2. rss: use sites’ feed link. This is the default option.

    Follow the installation instruction in the plugin’s README. After the configuration is done for this plugin, the feed link is ready too.

  3. rss: http://your-feed-url set specific feed link.

Up to 5 code highlight themes built-in.

NexT uses Tomorrow Theme with 5 themes for you to choose from. Next use normal by default. Have a preview about normal and night:

Tomorrow Normal Preview Tomorrow Night Preview

Head over to Tomorrow Theme for more details.

Configuration

NexT comes with few configurations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Menu configuration.
menu:
  home: /
  archives: /archives

# Favicon
favicon: /favicon.ico

# Avatar (put the image into next/source/images/)
# can be any image format supported by web browsers (JPEG,PNG,GIF,SVG,..)
avatar: /default_avatar.png

# Code highlight theme
# available: normal | night | night eighties | night blue | night bright
highlight_theme: normal

# Fancybox for image gallery
fancybox: true

# Specify the date when the site was setup
since: 2013

Browser support

Browser support