Next Theme Tutorial

2017-07-20T00:00:00+00:00

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

Live Preview

Screenshots

Desktop
Sidebar

Sidebar (Post details page)

Mobile

Installation

Check whether you have Ruby 2.1.0 or higher installed:

ruby --version

Install Bundler:

gem install bundler

Clone Jacman theme:

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

Install Jekyll and other dependencies from the GitHub Pages gem:

bundle install

Run your Jekyll site locally:

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.

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.

language: zh-Hans

Comment support.

NexT has native support for DuoShuo and Disqus comment systems.

Add the following snippets to your _config.yml:

duoshuo:
  enable: true
  shortname: your-duoshuo-shortname

disqus_shortname: your-disqus-shortname

NexT can automatically add links to your Social Media accounts:

social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url

Feed link.

Show a feed link.

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

rss: false will totally disable feed link.
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.
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:

Head over to Tomorrow Theme for more details.

Configuration

NexT comes with few configurations.

# 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

Highlight Test

2017-07-19T00:00:00+00:00

This is a highlight test.

Normal block

alert('Hello World!');

print 'helloworld'

Highlight block

alert( 'Hello, world!' );

print 'helloworld'

def foo
  puts 'foo'
end

def foo
  puts 'foo'
end

1
2
3
def foo
  puts 'foo'
end

#include <iostream>

using namespace std;

void foo(int arg1, int arg2)
{

}

int main()
{
  string str;
  foo(1, 2);
  cout << "Hello World" << endl;
  return 0;
}

Emoji Test

2015-09-19T00:00:00+00:00

This is an emoji test. :smile: lol.

See emoji cheat sheet for more detail :wink: : https://www.webpagefx.com/tools/emoji-cheat-sheet/.

:bowtie::smile::laughing::blush::smiley::relaxed::smirk: :heart_eyes::kissing_heart::kissing_closed_eyes::flushed::relieved::satisfied::grin:

Gallery Post

2014-11-18T15:45:20+00:00

Nunc dignissim volutpat enim, non sollicitudin purus dignissim id. Nam sit amet urna eu velit lacinia eleifend. Proin auctor rhoncus ligula nec aliquet. Donec sodales molestie lacinia. Curabitur dictum faucibus urna at convallis. Aliquam in lectus at urna rutrum porta. In lacus arcu, molestie ut vestibulum ut, rhoncus sed eros. Sed et elit vitae risus pretium consectetur vel in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus turpis quis lectus rhoncus adipiscing. Proin pulvinar placerat suscipit. Maecenas imperdiet, quam vitae varius auctor, enim mauris vulputate sapien, nec laoreet neque diam non quam.

Etiam luctus mauris at mi sollicitudin quis malesuada nibh porttitor. Vestibulum non dapibus magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin feugiat hendrerit viverra. Phasellus sit amet nunc mauris, eu ultricies tellus. Sed a mi tortor, eleifend varius erat. Proin consectetur molestie tortor eu gravida. Cras placerat orci id arcu tristique ut rutrum justo pulvinar. Maecenas lacinia fringilla diam non bibendum. Aenean vel viverra turpis. Integer ut leo nisi. Pellentesque vehicula quam ut sapien convallis consequat. Aliquam ut arcu purus, eget tempor purus. Integer eu tellus quis erat tristique gravida eu vel lorem.

MathJax with Jekyll

2014-02-16T00:00:00+00:00

One of the rewards of switching my website to Jekyll is the ability to support MathJax, which means I can write LaTeX-like equations that get nicely displayed in a web browser, like this one $ \sqrt{\frac{n!}{k!(n-k)!}} $ or this one $ x^2 + y^2 = r^2 $.

What’s MathJax?

If you check MathJax website (www.mathjax.org) you’ll see that it is an open source JavaScript display engine for mathematics that works in all browsers.

How to implement MathJax with Jekyll

I followed the instructions described by Dason Kurkiewicz for using Jekyll and Mathjax.

Here are some important details. I had to modify the Ruby library for Markdown in my _config.yml file. Now I’m using redcarpet so the corresponding line in the configuration file is: markdown: redcarpet

To load the MathJax javascript, I added the following lines in my layout post.html (located in my folder _layouts)

<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Of course you can choose a different file location in your jekyll layouts.

Note that by default, the tex2jax preprocessor defines the LaTeX math delimiters, which are \$...\$ for in-line math, and \\[...\\] for displayed equations. It also defines the TeX delimiters $$...$$ for displayed equations, but it does not define $...$ as in-line math delimiters. To enable in-line math delimiter with $...$ , please use the following configuration:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

A Couple of Examples

Here’s a short list of examples. To know more about the details behind MathJax, you can always checked the provided documentation available at http://docs.mathjax.org/en/latest/

Let’s try a first example. Here’s a dummy equation:

$a^2 + b^2 = c^2$

How do you write such expression? Very simple: using double dollar signs

$$a^2 + b^2 = c^2$$

To display inline math use \$ ... \$ like this \$ sin(x^2) \$ which gets rendered as $ sin(x^2) $

Here’s another example using type \mathsf

$$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$

which gets displayed as

$\mathsf{Data = PCs} \times \mathsf{Loadings}$

Or even better:

\\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \\]

is displayed as

\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \]

If you want to use subscripts like this $ \mathbf{X}_{n,p} $ you need to scape the underscores with a backslash like so \mathbf{X}\_{n,p}:

$$ \mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p} $$

will be displayed as

\[ \mathbf{X}_{n,p} = \mathbf{A}_{n,k} \mathbf{B}_{k,p} \]

Images

2013-12-26T22:46:49+00:00

This is a image test post.

Excerpts

2013-12-25T00:23:23+00:00

The following contents should be invisible in home/archive page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam.

Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.

Block

2013-12-25T00:14:39+00:00

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Code Block

Inline code block

This is a inline code block: python, print 'helloworld'.

Normal code block

alert('Hello World!');

print "Hello world"

Highlight code block

print "Hello world"

def foo
  puts 'foo'
end

1
2
3
def foo
  puts 'foo'
end

Gist

日本語テスト

2013-12-24T23:33:26+00:00

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

中文測試

2013-12-24T23:31:30+00:00

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum