0. Preface

The Hexo NexT 6.x release has been around for a while. Compared to the many features of the 5.x version, the 6.x version has the following enhancements:

Optimization configuration item
Combine many features into the theme, such as: top display loading progress bar, avatar scrolling, Ministry of Industry Information, etc.
Code block supports copy function
Support Valine comment system
Some features are optimized. Some features were previously implemented using modified source code, which can now be activated using the “package/plugin introduction + option configuration” approach.

NexT, which was taken over by open source organizations, is more optimistic, but there are still some places that are not satisfactory and need minor modifications to better meet the needs of individualization. This article will take my own website as an example to share some of my experience with NexT configuration and modification.

I have used it myself. The modified NexT theme has been open sourced to Github, welcome to give star or follow. Due to my limited level, it is still not perfect. Need everyone’s help. Friends from Github can directly check what modifications I made, welcome to submit issues and pull.

1. Installation and use

After installing Hexo, clone or copy the NexT theme file to thehexo/themedirectory. If you already have the 5.0 version of the NexT folder, you will need to create a new folder.

1 2	cd hexo git clone https://github.com/theme-next/hexo-theme-next themes/next6

2. Configuration function

1. Features that can be used directly

In the 6.0 version of NexT, many features are merged into the main branch, such as:

Feature	Configuration properties	Description
Cache	`cache`	Allow to cache content generation. Introduced in NexT v6.0.0.
Show Hexo and NexT versions	`copyright.powered`,`copyright.theme`	Can choose whether to open, choose whether to display the version
ICP Record	`beian`	Show record information. I am not satisfied with this style, I will mention how to modify it below.
Copyright Information	`creative_commons`	You can choose your own rights agreement and the display place.
SEO optimization	`seo`	Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
Index page title with subtitle	`index_with_subtitle`	When enabled, the homepage title shows styles `like title - subtitle`
External chain encryption	`exturl`	Automatically add external URL with BASE64 encrypt & decrypt.
Code block prompt copy button	`codeblock.copy_button`	When enabled, the copy button appears in the upper right corner of the code block
Mathematical formula	`math`	Mathematical formula
Baidu push	`baidu_push`	Better SEO

2. The function should installing the plugin

In addition, the new version of NexT also optimizes the use of some features. In addition to enabling the feature in the theme _config.yml, we also need to install the corresponding plugin in the NexT directory. The features I have enabled are:

Features	Plugin	Configuration item	Configurable configuration
Word count, reading time statistics	hexo-symbols-count-time	theme.symbols_count_time	Word length, reading speed
Picture Viewer	theme-next-fancybox3	theme.fancybox
Top progress bar	theme-next-pace	theme.pace	Progress bar style
Algolia search	algolia_search	algolia_search	search `api_key` and other infomation at `hexo\_config.yml`
Related articles	hexo-related_posts	related_posts
Lazyload	theme-next-lazyload	lazyload

Other features that can be configured but I don’t have it enabled

Features	Plugin	Configuration item	Configurable configuration
Canvas nest	theme-next-canvas_nest	canvas_nest	Color, depth, etc style
JavaScript 3D library	theme-next-three	three_waves

After installing the plugin, be sure to execute the hexo clean command and recompile.

3 Modifications I made

1. Recording information supplement and position adjustment

Every legitimate website in China needs to be filed for ICP, and public security and network security record are now added. Although NexT 6.x has provided an ICP record solution. However, the lack of public security record, and the location shown at the same time I am not very satisfied, made some changes.

Open themes/next/_config.yml add

# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian:
 	  enable: true
 	  icp: 赣ICP备 - 18012283
# The following is what I added.
# 公安网备案 for Chinese users. local mean 京 or 赣 
gongan:
 	  enable: true
 	  local: 赣
 	  num: 36010202000154

Open themes\next6\layout\footer.swig, First delete the code between

1	<div class="copyright">{#

and

1	#}{% set current = date(Date.now(), "YYYY") %}

then add the following code at the bottom of the file

{% if theme.footer.beian.enable %}{#
  #}  {{ next_url('http://www.miitbeian.gov.cn', theme.footer.beian.icp ) }}
  {% endif %}
  {% if theme.footer.gongan.enable %}{#
  #} {{' | '}}<span style="padding-left:25px;background:url(https://s1.ax1x.com/2018/09/29/ilmwIH.png) no-repeat left center" rel="nofollow"># 这张国徽图片可以自行更换
  {{ next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+theme.footer.gongan.num, theme.footer.gongan.local+'公网安备'+theme.footer.gongan.num+'号' ) }}</span>{#
  #}{% endif %}

The end. Refresh the page to see the effect.

2. Add website runtime at the bottom of the page

Open themes/next/_config.yml, add

1
2
3
4
5
6
7
8
9
10
11
12
 # -------------------------------------------------------------
 # web run time
 # This is the time the site starts running and shows how long the site has been running.
 # Format, 2018-02-13 15:00:00. If there is only one digit, you need to fill in zero.
 runtime:
enable: true
year: 2018
month: 02
day: 13
hour: 15
minute: 00
second: 00

Create a new fileweb-runtime.swig at themes\next6\layout\. write the following content, and save it.

 <div>
   <span id="sitetime"></span>
   // I have no good idea here. The value of swig is passed to the JavaScript code. If you can solve it, please help me improve.
   <span id="year" style="display:none">{{theme.footer.runtime.year}}</span> 
   <span id="month" style="display:none">{{theme.footer.runtime.month}}</span>   
   <span id="day" style="display:none">{{theme.footer.runtime.day}}</span>   
   <span id="hour" style="display:none">{{theme.footer.runtime.hour}}</span>   
   <span id="minute" style="display:none">{{theme.footer.runtime.minute}}</span>   
   <span id="second" style="display:none">{{theme.footer.runtime.second}}</span>   
	<script language=javascript>
	function siteTime(){        
		window.setTimeout("siteTime()", 1000);
		var seconds = 1000;
		var minutes = seconds * 60;
		var hours = minutes * 60;
		var days = hours * 24;
		var years = days * 365;
		var today = new Date();
		var todayYear = today.getFullYear();
		var todayMonth = today.getMonth()+1;
		var todayDate = today.getDate();
		var todayHour = today.getHours();
		var todayMinute = today.getMinutes();
		var todaySecond = today.getSeconds();
		/* Date.UTC() -- Returns the number of milliseconds (timestamp) of the date object between midnight on January 1, 1970 and UTC
	year - An integer between 0-11, which is the month of the date object
	month - An integer between 0-11, which is the month of the date object
	day - Integer between 1-31, the number of days as an date object
	hours - An integer between 24:00 and 23 at midnight, as the number of hours for the date object
	minutes - An integer between 0-59 and the number of minutes for the date object
	seconds - An integer between 0-59, which is the number of seconds for a date object
	microseconds - An integer between 0-999, which is the millisecond number of date objects */       
		var year = document.getElementById("year").innerHTML;
		var month = document.getElementById("month").innerHTML;
		var day = document.getElementById("day").innerHTML;
		var hour = document.getElementById("hour").innerHTML;
		var minute = document.getElementById("minute").innerHTML;
		var second = document.getElementById("second").innerHTML;//Beijing time 2018-2-13 00:00:00
		var t1 = Date.UTC(year,month,day,hour,minute,second); 
		var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
		var diff = t2-t1;
		var diffYears = Math.floor(diff/years);
		var diffDays = Math.floor((diff/days)-diffYears*365);
		var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
		var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
		var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
		if(diffYears==0){
		document.getElementById("sitetime").innerHTML=" Website has run  "/*+diffYears+" year "*/+diffDays+" days "+diffHours+" h "+diffMinutes+" min "+diffSeconds+" s";
		} else{
		document.getElementById("sitetime").innerHTML=" Website has run  "+diffYears+" year "+diffDays+" days "+diffHours+" h "+diffMinutes+" min "+diffSeconds+" s";
		}
	}
	//siteTime(document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,0);
	siteTime();
	</script>
</div>

Open themes\next6\_layout\footer.swig, in the location you want to show, such as the record code, add the following.
1
2
3
{% if theme.footer.runtime.enable %}
{% include 'web-runtime.swig' %}
{% endif %}
The end. Refresh the page to see the effect.

3. Add a thank you note at the end of the article

Open themes/next/_config.yml, add

 # At the end of the article, show thanks for reading
end_info:
  enable: true
  start_info: -------The end of this article
  icon: paw
  end_info: Thank you for your reading-------

Create a new filepassage-end-tag.swig at themes\next6\_macro\,write the following content, and save it.

<div>
   {% if not is_index %}
		<div style="text-align:center;color: #ccc;font-size:14px;">{{theme.end_info.start_info}}&nbsp;<i class="fa fa-{{ theme.end_info.icon }}"></i>&nbsp;{{theme.end_info.end_info}}</div>
	{% endif %}
</div>

Open themes\next6\_macro\post.swig，Before the following code (related article),

1
2
3

{% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
     {% include 'post-related.swig' with { post: post } %}
   {% endif %}

add

<div>
     {% if not is_index and theme.end_info.enable %}
       {% include 'passage-end-tag.swig' %}
     {% endif %}
   </div>

The end. Refresh the page to see the effect.

4. Add the link to the corresponding multi-language version in the article

This feature requires manual setting of the corresponding article abbrlink. It is recommended to compile a language version of the file locally and then manually modify the link to another version of the article.

Openthemes/next/_config.yml, add

 # Go to another language Page
translation:
	enable: true
	language: 中文  # language name
	icon: flag
	info: Chinese Version 
	url: https://xian6ge.cn # Destination URL

Create a new file post-tran.swig at themes\next6\_partials\,write the following content, and save it.

<div>
   <ul class="post-copyright">
<li class="post-copyright-link">
	<strong><i class="fa fa-{{ theme.translation.icon }}"></i> {{ theme.translation.language + __('symbol.colon') }}</strong>
	<span id="url" style="display:none">{{theme.translation.url}}</span> 
	<span id="path" style="display:none">{{post.permalink}}</span> 
	<span id="info" style="display:none">{{theme.translation.info}}</span> 
	<span id="goto"></span> 
</li>
</ul>

//I don't know how to organize the links, so I can only rewrite them with JavaScript.
<script language=javascript>
	var url = document.getElementById("url").innerHTML;
	var path = document.getElementById("path").innerHTML;
	var info = document.getElementById("info").innerHTML;
	path=GetUrlRelativePath(path);
	if(info.length==0){
	infos= url+path;
	}
	else{
	infos=info;
	}
	var str = "<a href='"+url+path+"'>"+infos+"</a>"
	console.log(str);
	document.getElementById("goto").innerHTML=str;

　　function GetUrlRelativePath()
　　{
　　　　var url = document.location.toString();
　　　　var arrUrl = url.split("//");

　　　　var start = arrUrl[1].indexOf("/");
　　　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

　　　　if(relUrl.indexOf("?") != -1){
　　　　　　relUrl = relUrl.split("?")[0];
　　　　}
　　　　return relUrl;
　　}
</script>

Open themes\next6\_macro\post.swig，Before the POST BODY, add

{% if theme.translation.enable and not is_index %}
  <div>
       {% include '../_partials/post-tran.swig' with { post: post } %}
       <br/>
  </div>
{% endif %}

The end. Refresh the page to see the effect.

5. Other little modifications

1. Busuanzi statistics prompts

NexT6 takes a simple style, and many places only display icons and omit the text description. But because I added too much information at the bottom of the site, the lowest number of visitors is top-heavy.

Open theme\next6\layout\_third-party\analytics\busuanzi-counter.swig, modify it as follows

{% if theme.busuanzi_count.total_visitors %}
     <span class="site-uv" title="{{ __('footer.total_visitors') }}">
       <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
       <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> people visited our site. |
     </span>
   {% endif %}
 
  {% if theme.busuanzi_count.total_views %}
     <span class="site-pv" title="{{ __('footer.total_views') }}">
       &nbsp;<i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
       Total visits <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> times.
     </span>
 {% endif %}

Due to the limitations of NexT6, all links on the left toolbar will automatically add the current domain name in front. For the “Home”, “About” links are no problem. However, if you want to add the outer chain, for example, the English page: https:\\xian6ge.cn, it will be automatically compiled into https:\\en.xian6ge.cn\https\xian6ge.cn, causing a error about 404. To this, we can adopt a compromise approach.
Create an cn.html file under hexo\source and jump through the JavaScript code inside. But this will encounter a problem, Hexo will compile all the files, causing the Js code to be invalid. Therefore, add the layout: false attribute in the front to tell the compiler not to compile the HTML file. The specific code is as follows.

layout: false
title: "贤柳阁 - 千古风韵，声声不息"
date: 2018-11-13 09:12:12
---
<!-- The above title uses the title of the target website to reduce the awkwardness of the jump. -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>贤柳阁 - 千古风韵，声声不息</title>
        <script type="text/javascript">
            window.location.href = "https://xian6ge.cn";
        </script>
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

		<!--[if gte IE 9]>
        	<style type="text/css">
        		.gradient {
        			filter: none;
        		}
        	</style>
        <![endif]-->

		<!-- Favicon and touch icons -->
		<!-- <link rel="shortcut icon" href="assets/ico/favicon.png">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> -->	</head>
	<body>
		<!-- Loader -->
		<h1>Go to Xianliuge in Chinese</h1>
		<h2>前往『贤柳阁』中文版</h2>
	</body>
</html>

3. Modify the background, color style, etc.

Opentheme\hexo-theme-next\source\css\_custom\custom.styl, add the following code.

// Add a background image
body { background:url(/images/backGround.jpg)}
// Change the color of the head
.site-meta {
  background: #F0D784; //Change to your favorite color
}
// Main title color
.brand{
  color: #2f9833
  }
// Subtitle color
.site-subtitle{
  color: #47b54a
}
// Footer statistics text color
.footer{
  color: #F0D784
}
//Modify the footer record link color
 .footer a{
  color: #F0D784
 }
 // Modify the color of the footer stats
 .footer .with-love{
  color: #F0D784
 }

To see more NexT theme personalized style detailed,please go to Put your blog on Christmas style, NexT theme personalized style detailed

Eternal charm, Endless sound.

Hexo NexT theme 6.x version configuration and beautification

0. Preface

1. Installation and use

2. Configuration function

1. Features that can be used directly

2. The function should installing the plugin

3 Modifications I made

1. Recording information supplement and position adjustment

2. Add website runtime at the bottom of the page

3. Add a thank you note at the end of the article

4. Add the link to the corresponding multi-language version in the article

5. Other little modifications

1. Busuanzi statistics prompts

3. Modify the background, color style, etc.

0. Preface

1. Installation and use

2. Configuration function

1. Features that can be used directly

2. The function should installing the plugin

3 Modifications I made

1. Recording information supplement and position adjustment

2. Add website runtime at the bottom of the page

3. Add a thank you note at the end of the article

4. Add the link to the corresponding multi-language version in the article

5. Other little modifications

1. Busuanzi statistics prompts

2. Solve the problem that the left toolbar cannot jump to the external link

3. Modify the background, color style, etc.