Theme Settings

NexT insists to hide complex details and gives you a simple but flexible config, so you can use it easily.

Cache Support

NexT v6+ allows to cache content generation. Set the value enable to true in cache section in theme config file as following:

next/_config.yml
# Allow to cache content generation. Introduced in NexT v6.0.0.
cache:
enable: true

RSS Support

There are three RSS options in NexT to fit different cases.
Edit theme config file and set the value of rss:

  • false: Disable RSS, which won't show links on page.
  • Leave Blank: Use Hexo to generate feed and insert links automatically. You may need to install hexo-generator-feed plugin with npm firstly.
  • Concrete URL: This means you have generate Feed in advance.

GitHub Banner

NexT provides Follow me on GitHub banner in right-top corner. GitHub banner has format permalink || title which contains 2 values:

Value before || delimeter (permalink) → is the specified link must have full url path.

Value after || delimeter (title) → is the title and aria-label name.

You can uncomment github_banner value and add your GitHub link in theme config file as following:

next/_config.yml
github_banner: https://github.com/yourname || Follow me on GitHub

Custom Logo Support

NexT supports the site logo personalization.

For now only default Muse Scheme supports custom logo setting under 6.0.x version or highter.

Custom Style Support

Like Next Data files, you can put all your custom styles into one place (hexo/source/_data).

  • head: It's custom swig styles placed in layout/_custom/head.swig.
  • header: It's custom swig styles placed in layout/_custom/header.swig.
  • sidebar: It's custom swig styles placed in layout/_custom/sidebar.swig.
  • variables: It's variables styles placed in source/css/_variables/custom.styl.
  • mixins: It's mixins styles placed in source/css/_mixins/custom.styl.
  • styles: It's custom styles placed in source/css/_custom/custom.styl.

Add your custom files in hexo/source/_data and uncomment needed files under the custom_file_path section in theme config file as following:

next/_config.yml
# For example, you want to put your custom styles file
# outside theme directory in root `source/_data`, set
# `styles: source/_data/styles.styl`
#custom_file_path:
# Default paths: layout/_custom/*
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig

# Default path: source/css/_variables/custom.styl
#variables: source/_data/variables.styl
# Default path: source/css/_mixins/custom.styl
#mixins: source/_data/mixins.styl
# Default path: source/css/_custom/custom.styl
#styles: source/_data/styles.styl

Custom Page Support

Next allows users to add custom pages in menu.

In your terminal emulator, change to Hexo site dir. Use hexo new page custom_name to create a new custom_name page:

$ cd your-hexo-site
$ hexo new page custom_name

Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Settings Front-matter values and more detailed can be found in Front-matter. You can also add contents in custom_name/index.md if you like.

title: custom_name
date: 2014-12-22 12:39:04
---

Add custom_name to menu by editing theme config file, like adding about page:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
about: /about/ || user

If you want to add Tags or Categories page, please continue reading.

Adding «Tags» Page

Adding «Tags» page and show «Tags» link in menu. «Tags» page will show all tags of site. If no article has tags, this page will leave blank.
Following code shows you a example of article with tags:

title: Tags Testing Article
tags: [Testing, Another Tag]
---
title: Tags Testing Article
tags:
- Testing
- Another Tag
---

Please read Hexo's Docs of Categories & Tags to know how to add tags or categories for articles.

In your terminal emulator, change to Hexo site dir. Use hexo new page tags to create a new tags page:

$ cd your-hexo-site
$ hexo new page tags

Edit the new page and change the type to "tags", theme will show tags cloud automatically in this page. Page content looks like following:

title: Tags
date: 2014-12-22 12:39:04
type: "tags"
---

Add tags to menu by editing theme config file, like following:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags

If you enable any comment system for your site, comments will be shown for all posts and pages.
See «How to Disable Comments on Page» if you want to do it for pages like tags or categories.

Adding «Categories» Page

«Categories» page can be added in similar way as «Tags» page, only name there is difference: just need to replace tags with categories.

Adding Google Calendar Page

In your terminal emulator, change to Hexo site dir. Use hexo new page schedule to create a new schedule page:

$ cd your-hexo-site
$ hexo new page schedule

Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Settings Front-matter values and more detailed can be found in Front-matter. You can also add contents in schedule/index.md if you like.

title: schedule
date: 2014-12-22 12:39:04
---

Add schedule to menu by editing theme config file:

next/_config.yml
menu:
home: / || home
archives: /archives/ || archive
schedule: /schedule/ || calendar

Login to Google developers and add Google Calendar API, you will get your calendar ID and API KEY. More detailed documentation

You can enable it by editing values calendar.enable to true, and copy the value of calendar ID and API KEY in theme config file.

next/_config.yml
calendar:
enable: false
calendar_id: <required>
api_key: <required>
orderBy: startTime
offsetMax: 24
offsetMin: 4
timeZone:
showDeleted: false
singleEvents: true
maxResults: 250

Cheers Archive Page

By default NexT shows the cheers characters from ok to excellent according to the numbers of your posts. You can disable it by editing values cheers_enabled to false in theme config file.

next/_config.yml
cheers_enabled: true

Fonts Customization

To solve the unstable of Google Fonts API in some countries, NexT supports setting fonts. By using this feature you can assign URL of fonts library. And NexT gives you 5 specific font settings, they are:

  • Global Font: Font used in the whole site.
  • Title Font: Font used by titles in articles (H1, H2, H3, H4, H5, H6).
  • Article Font: Font used by articles.
  • Logo Font: Font used by Logo.
  • Code Font: Font used by code blocks in articles.

Each fonts will be used as the first font of this class, NexT will fallback to internal font settings if they are unavalible.

  • Non-code Font: Fallback to "PingFang SC", "Microsoft YaHei", sans-serif
  • Code Font: Fallback to consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

Plus each section has a external attribute, this controls whether to use the font library CDN.
Use this can help you to use fonts installed in system and reduce unnecessary requests.

next/_config.yml
font:
enable: true

# Font library CDN, e.g. //fonts.googleapis.com (Default)
host:

# Global font settings used for all elements in <body>.
global:
external: true
family: Monda
size:

# Font settings for Headlines (H1, H2, H3, H4, H5, H6).
# Fallback to `global` font settings.
headings:
external: true
family: Roboto Slab
size:

# Font settings for posts.
# Fallback to `global` font settings.
posts:
external: true
family:

# Font settings for Logo.
# Fallback to `global` font settings.
logo:
external: true
family: Lobster Two
size: 24

# Font settings for <code> and code blocks.
codes:
external: true
family: PT Mono
size:

Post Settings

Page Scroll

By default NexT scrolls page automatically to section which is under mark. You can disable it by editing values scroll_to_more to false in theme config file.

next/_config.yml
scroll_to_more: true

If you want to save page scroll position automatically in cookies, you can enable it by editing values save_scroll to true in theme config file.

next/_config.yml
save_scroll: false

Preamble Text

It's a common need to show some part of article in home page and then give a link to full article. NexT gives 3 ways to control how article is shown in home page. In other words, you can use following ways to show summary of articles and a Read More button.

If you have added description and set its value to your article summary in front-matter, NexT excerpts description as preamble text in homepage by default. Without description, the full contents would be the preamble text in homepage.

You can disable it by editing values excerpt_description to false in theme config file.

next/_config.yml
excerpt_description: true

Use <!-- more --> in your article to break your article manually, which is recommended by Hexo.

Next would use 150 characters from article header automatically as preamble text by editing values auto_excerpt.enable to true.

You can configure it by editing values in auto_excerpt section in theme config file.

next/_config.yml
auto_excerpt:
enable: false
length: 150

It is recommended to use <!-- more --> which can not only control what you want to show better, but also let Hexo's plugins use it easily.

Post Meta Display

NexT supports post created date, post updated date and post categories display.

By default NexT shows the description text of post meta. You can disable it by editing values post_meta.item_text to false in theme config file.

next/_config.yml
post_meta:
item_text: true

By default NexT shows the post created date in post meta section and created time in popup. You can disable it by editing values post_meta.created_at to false in theme config file.

next/_config.yml
post_meta:
created_at: true

By default NexT shows the post updated date in post meta section and updated time in popup. You can disable it by editing values post_meta.updated_at.enabled to false in theme config file.

next/_config.yml
post_meta:
updated_at:
enabled: true

By default edited time would be show in popup message if updated/edited date is same as created date. You can disable it by editing values post_meta.updated_at.another_day to false in theme config file.

next/_config.yml
post_meta:
updated_at:
another_day: true

By default NexT shows the post categorie in post meta section. You can disable it by editing values post_meta.categories to false in theme config file.

next/_config.yml
post_meta:
categories: true

Post Wordcount

3rd-party plugin hexo-wordcount was replaced by hexo-symbols-count-time in 6.x versions because hexo-symbols-count-time no have any external nodejs dependencies, no have language filter which causes better performance on speed at site generation.

Install hexo-symbols-count-time by run following command in site root dir:

$ npm install hexo-symbols-count-time --save

Activate this plugin in site config file by enabled any option:

By default NexT shows the number of post words in post meta section. You can disable it by editing values symbols_count_time.symbols to false in site config file.

hexo/_config.yml
symbols_count_time:
symbols: true

By default NexT shows the estimated reading time of post in post meta section. You can disable it by editing values symbols_count_time.time to false in site config file.

hexo/_config.yml
symbols_count_time:
time: true

By default NexT shows the number of all posts words in footer section. You can disable it by editing values symbols_count_time.total_symbols to false in site config file.

hexo/_config.yml
symbols_count_time:
total_symbols: true

By default NexT shows the estimated reading time of all posts in footer section. You can disable it by editing values symbols_count_time.total_time to false in site config file.

hexo/_config.yml
symbols_count_time:
total_time: true

After the plugin enabled, you may adjust options in symbols_count_time section in theme config file:

By default NexT shows the words counts and estimated reading time in a separated line. You can add them into one line by editing values symbols_count_time.separated_meta to false in theme config file.

hexo/_config.yml
symbols_count_time:
separated_meta: true

By default NexT shows the text description of the words counts and estimated reading time in post meta section. You can disable it by editing values symbols_count_time.item_text_post to false in theme config file.

hexo/_config.yml
symbols_count_time:
item_text_post: true

By default NexT doesn't shows the text description of the words counts and estimated reading time in footer section. You can enable it by editing values symbols_count_time.item_text_total to false in theme config file.

hexo/_config.yml
symbols_count_time:
item_text_total: false

awl means the average Word Length (chars count in word). You can check this here.

hexo/_config.yml
symbols_count_time:
awl: 4

wpm means the average words per minute. You can check this here.

hexo/_config.yml
symbols_count_time:
wpm: 275

Post Codeblock

By default NexT defines the default value of codeblock border radius as 1. You can configure it by editing border_radius values in codeblock section in theme config file.

hexo/_config.yml
codeblock:
border_radius:

NexT supports the copy-and-paste functionality of codeblock.

You can enable it by editing values copy_button.enable to true in theme config file.

hexo/_config.yml
codeblock:
copy_button:
enable: false

By default NexT doesn't show copy results of the copy-and-paste functionality. You can also enable it by editing values copy_button.show_result to true in theme config file.

hexo/_config.yml
codeblock:
copy_button:
show_result: false

Code Highlight Theme

NexT uses Tomorrow Theme to support code highlight.
Default style is white (normal) and there are 5 styles to choose:

  • normal
  • night
  • night blue
  • night bright
  • night eighties

Change the value of highlight_theme to choose the highlight style you like, for example:

next/_config.yml
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

Post Copyright

NexT supports the copyright declaration for your posts.

You can enable it by editing values post_copyright.enable to true in theme config file.

hexo/_config.yml
post_copyright:
enable: false

You can also configure your custom license by editing values in post_copyright.license section in theme config file.

hexo/_config.yml
post_copyright:
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

Post Edit

NexT supports the edit functionality of your posts.

You can enable it by editing values post_edit.enable to true in theme config file.

hexo/_config.yml
post_edit:
enable: false

You should create a source repository of your post files. The url setting depends on the source project in github.

  • For site repository
    • Link for view source: url: https://github.com/.../tree/master/source/_posts/
    • Link for fork & edit: url: https://github.com/.../edit/master/source/_posts/
  • For post repository
    • Link for view source: url: https://github.com/.../_posts/tree/master/
    • Link for fork & edit: url: https://github.com/.../_posts/edit/master/
hexo/_config.yml
post_edit:
url:

NexT supports the related posts functionality according to hexo-related-popular-posts.

Reward (Donate)

More and more platform (WeChat public accounts, Weibo, Jianshu, Baidu Reward) supports reward (donate). To catch paid reading trends, we added reward feature, supports WeChat Pay, Alipay and Bitcoin. What you need is:

  1. Get your WeChat Pay / Alipay / Bitcoin receive money QRcode image(s) and put into source/images under theme directory.
  2. Set needed values in theme config file:

    next/_config.yml
    # Reward
    reward_comment: Donate comment here
    wechatpay: /images/wechatpay.jpg
    alipay: /images/alipay.jpg
    bitcoin: /images/bitcoin.png

WeChat Subscribing

Show your WeChat public account QRcode after each article, subscribing blog by simply scanning.

  1. Download your QRcode from WeChat Public Platform, and save it under source/uploads/ site directory.
  2. Edit theme config file like following:

    next/_config.yml
    wechat_subscriber:
    enabled: true
    qcode: /uploads/wechat-qcode.jpg
    description: Welcome to scan the WeChat Public Account QRcode and subscribe my blog!

Mobile Devices Adaptation

If you want to reduce padding/margin indents on devices with narrow width, you can enable it by editing values mobile_layout_economy to true in theme config file.

next/_config.yml
mobile_layout_economy: false

By default NexT uses black-deep (#222) as the color of android Chrome header panel. You can configure it by editing values with Hex color in android_chrome_color section in theme config file.

next/_config.yml
android_chrome_color: "#222"

By default sidebar only shows in posts (have a table of content), and is placed in left side. You can change it by editing values under sidebar setting in theme config file.

Sidebar has several options, but for now we will consider position, width, display, offset, b2t, scrollpercent, and onmobile options.

Set up sidebar position by changing the value of sidebar.position, which can be one of following:

  • left → Place at the left of the screen.
  • right → Place at the right of the screen.

next/_config.yml
sidebar:
position: left
#position: right

For now only Pisces / Gemini Schemes supports position setting under 6.0.x version or highter.

You can change sidebar width by specify sidebar.width setting in pixels, for example:

next/_config.yml
sidebar:
width: 300

This option commented out by default and values are:

  • For Muse | Mist schemes: 320
  • For Pisces | Gemini schemes: 240

From version 6.0.4 to 6.3.0 option was called sidebar_width and was available for Gemini Scheme only.
From 6.4.0 version or highter, option renamed to sidebar.width and available for all schemes.

Set up conditions under which sidebar will show by editing sidebar.display value, which can be one of following:

  • post → Show sidebar only in posts which have index.
  • always → Show sidebar in all pages.
  • hide → Hide it in all pages (but can be opened by user manually).
  • remove → Remove sidebar totally.
next/_config.yml
sidebar:
display: post
#display: always
#display: hide
#display: remove

Set up sidebar offset from top menubar in pixels by changing the value of sidebar.offset, which can be one of following:

next/_config.yml
sidebar:
offset: 12

For now only Pisces / Gemini Schemes supports offset setting under 6.0.x version or highter.

Set the value sidebar.b2t to true to display Back to top button as following:

next/_config.yml
sidebar:
b2t: false

For now only Pisces / Gemini Schemes supports b2t setting under 6.0.x version or highter.

Set the value sidebar.scrollpercent to true to display scroll percent label in Back to top button as following:

next/_config.yml
sidebar:
scrollpercent: false

Set the value sidebar.onmobile to true to enable sidebar on narrow view for mobile device as following:

next/_config.yml
sidebar:
onmobile: false

For now only Muse / Mist Schemes supports onmobile setting under 6.0.x version or highter.

By default NexT shows the categories and counts of Posts / Categories / Tags in sidebar. You can configure it by editing values in site_state section in theme config file.

next/_config.yml
site_state: true

Social Links have similar fucture as Menu Items, only target link there is difference: specified link must have full url path (permalink).

Edit the social section in theme config file as following:

next/_config.yml
social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
Google: https://plus.google.com/yourname || google
Twitter: https://twitter.com/yourname || twitter
FB Page: https://www.facebook.com/yourname || facebook
VK Group: https://vk.com/yourname || vk
StackOverflow: https://stackoverflow.com/yourname || stack-overflow
YouTube: https://youtube.com/yourname || youtube
Instagram: https://instagram.com/yourname || instagram
Skype: skype:yourname?call|chat || skype

By default NexT shows the icons of social links in sidebar.

You can configure it by editing values in social_icons.enable section in theme config file.

next/_config.yml
social_icons:
enable: true

Set the value icons_only to true to display social icons without description in social_icons section in theme config file as following:

next/_config.yml
social_icons:
icons_only: false

Set the value transition to true to display social icons with transition effects in social_icons section in theme config file as following:

next/_config.yml
social_icons:
transition: false

Set the value exturl to true to encrypt social links in social_icons section in theme config file. For example, encoded GitHub link: GitHub: aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQ= || github.

next/_config.yml
social_icons:
exturl: false

You can add blog rolls within sidebar in NexT.

Edit the links section in theme config file and add your favorite links:

next/_config.yml
links:
Title1: http://example1.com/
Title2: http://example2.com/

By default NexT shows the link icon before links_title. The name of icon can be found in Font Awesome site. You can configure it by editing values in links_icon section in theme config file.

next/_config.yml
links_icon: link

By default NexT uses Links as the name of blogroll. You can configure it by editing values in links_title section in theme config file.

next/_config.yml
links_title: Links

By default all blogrolls are displayed in block. You can configure it to inline by editing values in links_layout section in theme config file.

next/_config.yml
links_layout: block
#links_layout: inline

By default NexT shows Table Of Contents (TOC) in the Sidebar. You can disable it by editing values toc.enable to false in theme config file.

next/_config.yml
toc:
enable: true

By default NexT adds list number to TOC automatically. You can disable it by editing values toc.number to false in theme config file.

next/_config.yml
toc:
number: true

If the post header width longer than sidebar width, you can wrap the header words in next lines by editing values toc.wrap to true in theme config file.

next/_config.yml
toc:
wrap: false

NexT supports the display of Creative Commons 4.0 International License including by, by-nc, by-nc-nd, by-nc-sa, by-nd, by-sa, zero. These licenses allow creators to communicate which rights they reserve, and which rights they waive for the benefit of recipients or other creators.

You can configure it by editing values in creative_commons section in theme config file.

next/_config.yml
creative_commons:

Site Start Time

By default NexT shows current year in the footer like © 2018. You can configure it to show the time gap like © 2015 - 2018 by editing values in since section in theme config file.

next/_config.yml
footer:
since: 2015

By default NexT shows black user icon without animation between year and copyright information in the footer. You can configure it by editing values in icon section in theme config file.

The name of footer icon can be founded in Font Awesome site. heart is recommended.

next/_config.yml
footer:
icon:
name: user

Set up animated of footer icon by changing the value of icon.animated:

  • true → Icon will be animated.
  • false → Icon will not be animated.
next/_config.yml
footer:
icon:
animated: false

Set up color of footer icon by changing the value of icon.color. Please use Hex Code, and red (#ff0000) is recommended for heart icon.

next/_config.yml
footer:
icon:
color: "#808080"

By default NexT shows the name of author from site config file. You can configure it by editing values in copyright section in theme config file.

next/_config.yml
footer:
copyright:

Site Platform Information

By default NexT shows Hexo and Theme & scheme information like Powered by Hexo v3.7.1 | Theme — NexT.Muse v6.3.0. You can configure it by editing values in powered and theme section in theme config file.

  • true → Displaying Powered by Hexo Information.
  • false → Not Displaying Powered by Hexo Information.
next/_config.yml
footer:
powered:
enable: true
  • true → Displaying Hexo Version Information.
  • false → Not Displaying Hexo Version Information.
next/_config.yml
footer:
powered:
version: true
  • true → Displaying Theme & Scheme Information.
  • false → Not Displaying Theme & Scheme Information.
next/_config.yml
footer:
theme:
enable: true
  • true → Displaying Theme NexT Version Information.
  • false → Not Displaying Theme NexT Version Information.
next/_config.yml
footer:
theme:
version: true

Adding Custom Information

If you want, any custom text can be defined within footer in custom_text section in theme config file like:

next/_config.yml
footer:
custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>

SEO Setting

Next provides useful options for better Search Engine Optimization (SEO).

By default a canonical link tag is created in Hexo by setting the value canonical to true in theme config file after you have set up your URL url: http://yoursite.com in site config file. More detailed information can be found in Consolidate duplicate URLs.

next/_config.yml
canonical: true

Set the value enable to true in seo section to change headers hierarchy on subtitle in site config file and on all post/pages titles for better SEO in theme config file as following:

next/_config.yml
seo: false

Set the value enable to true in index_with_subtitle section to add subtitle information in site config file to index page.

next/_config.yml
index_with_subtitle: false

NexT also supports the baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO. You can enable it by editing values related_posts.enable to true in theme config file.

next/_config.yml
baidu_push: false

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