Advanced topics NexT

NexT is Hexo one of the most popular theme frameworks. Sense and simplicity.
NexT support a variety of popular third-party services, using third-party services to extend the functionality of the site.
In addition to the Markdown syntax support, NexT aid Hexo provided tag plug-ins , to provide you with content quickly insert special style when writing the document.

Install theme

1. Cloning NexT theme

   • The latest version of the clone
     is positioned to the next Hexo site directory, the NexT clone or copy theme files to hexo/themethe directory can be.

     cd your-hexo-sit
     git clone https://github.com/iissnan/hexo-theme-next themes/next
     

   • Cloning stable version
     is positioned to the next Hexo site directory, the NexT clone or copy theme files to hexo/themethe directory can be. This blog is a clone of this version.

     cd your-hexo-sit
     git clone https://github.com/theme-next/hexo-theme-next  themes/next
     

2. Enable theme

   As with all modes Hexo themes enabled. When cloning / download is complete, open the site configuration file, find the theme field and change its value next

   theme: next
   

Theme core configuration

Core configuration can complete reference NexT official website of the Chinese document
include: Select Scheme, set the language, the setup menu, set the picture, set the sidebar, add "tags" page, add the "classification" page, set the font, set the code highlighting the theme, the side column social link, on a reward function, Links, Tencent public 404 pages, statistics and analysis, search services, sharing services.

Theme configuration file ‪username.github.io\themes\next\_config.yml
is divided into several blocks, each block is accompanied by official documentation web site, you can use Google browser to open, open translation, can be easily configured.
The basic components of the current mainstream has been put into NexT theme, simply modify the theme configuration file parameters can be several optimized online tutorial is estimated to have non-essential.

NexT 7 support custom styles and themes have been isolated core components, such as the blog background, text and other end tag. So users can rest assured that theme upgrade without breaking a custom configuration. In the path source/_dataadd custom files and theme configuration file custom_file_pathuncommented.

Another, tag plug NexT also a highlight, will open a separate article specific description, please refer NexT tag plugin

I blog: the Hexo Powered v3.9.0 | topics - NexT.Gemini v7.4.0

Next topic Update Log

Theme Optimization

RSS support

RSS (Really Simple Syndication) is called Really Simple Syndication, is a format and synchronize website content description. RSS to build a technology platform for rapid dissemination of information, so that everyone is a potential information provider. After you publish an RSS file, the information contained in the RSS Feed will be able to directly call the other sites, and because these data are standard XML format, so it can be used in other terminals and services, is a descriptive and synchronization format site content.

NexT the RSS have three options to meet the specific usage scenarios. Change the theme configuration file, set the value of the rss field.

1. rss: false
   Disable RSS, RSS display connection is not on the page.

2. rss: #留空
   Leave blank: Use Feed Links Hexo generated, you must first install the hexo-generator-feedplug-in

   • Install hexo-generator-feedplug-ins

     npm install hexo-generator-feed --save 
     

   • Site configuration file _config.ymlto modify / add

     feed:
       type: atom
       path: atom.xml
       limit: 20     # Feed中的最大帖子数(使用0或false显示所有帖子)
     

3. rss: /atom.xml
   Specific URL: applicable to the case have been fired Feed.

   • Install hexo-generator-feedplug-ins

     npm install hexo-generator-feed --save 
     

   • Site configuration file _config.ymlto modify / add

     feed:
       type: atom
       path: atom.xml
       limit: 20     # Feed中的最大帖子数(使用0或false显示所有帖子)
     

Creative Commons

NexT International supports the display of Creative Commons 4.0 license. These licenses allow creators' rights declarations and reservations of the right to give up.

Modify the theme configuration file

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: deed.zh

Bookmarks and reading progress

NexT support page scroll to read progress indicator.

Modify the theme configuration file

reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

Bookmark is a plug-in that allows users to save their reading progress. Users simply click on the bookmark icon in the top left of the page to save the scroll position. The next time they visit your blog, they can automatically restore the last scroll position of each page.
In the configuration file to enable theme

bookmark:
  enable: true
  color: "#222"   # 自定义书签颜色
  save: auto  # auto | manual 自动保存进度或点击保存进度

Web site icon (favicon)

By default, Hexo sites hexo-site/themes/next/source/images/use NexT favicons directory.
Can download the icon on the hexo-site/source/images/directory, modify the theme configuration file.

Icon website easyicon

favicon：
  small：/  images/ favicon-16x16-next.png 
  medium： /images/favicon-32x32-next.png 
  apple_touch_icon： /images/apple-touch-icon-next.png 
  safari_pinned_tab： /images/logo.svg 
  android_manifest： /images/manifest.json 
  ms_browserconfig： /images/browserconfig.xml

SEO support

SEO (Search Engine Optimization) means search engine optimization, search engines use the rules of natural increase website ranking in the relevant search engines.

• Installation site map (sitemap) plug-in

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

• Site configuration file to modify / add

# SEO 
sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

• Baidu push function is enabled, blog URL will automatically be pushed to Baidu, which is the search engine optimization is very helpful.
  Theme configuration file is modifiedbaidu_push: true

Long-time statistical and read words

• Import Plug

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

• Site Profiles

   symbols_count_time:
     symbols: true              # 是否启用
     time: true                 # 估计阅读时间
     total_symbols: true        # 页脚部分中所有帖子字数
     total_time: true           # 页脚部分中所有帖子的估计阅读时间
     exclude_codeblock: false
  

• Theme Profiles

  symbols_count_time:
    separated_meta: true       # 以分隔线显示单词计数和估计读取时间
    item_text_post: true       # 显示单词计数和估计阅读时间的文本描述
    item_text_total: false     # 在页脚部分显示单词计数和估计阅读时间的文本描述
    awl: 4                     # 平均字长
    wpm: 275                   # 每分钟的平均单词数
    suffix: mins.
  

Article heat

• Configuring leancloud official use documents

• NexT security plug repair of leancloud counter

1. Import Plug

   npm install hexo-leancloud-counter-security --save
   

2. Add site profile

   leancloud_counter_security:
     enable_sync: true
     app_id: <<your app id>>
     app_key: <<your app key>>
     username: <<your username>> # 部署时会询问是否留空
     password: <<your password>> # 建议留空。部署时会询问是否留空
   

3. Theme configuration file is modified

 leancloud_visitors:
   enable: true
   app_id: <<your app id>>
   app_key: <<your app key>>
 
 # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
 
   security: true
  betterPerformance: false

4. Console command: registered users for access control database in Leancloud

 hexo lc-counter register <<username>> <<password>>

Related Top Posts

Please refer to the official documentation

Background animation

NexT supports a variety of background animations, import plug-in and modify configuration files corresponding to the topic

Loading bar: PACE
3D library: Three
flow lines: canvas_nest
ribbons: canvas_ribbon

Third Party Services

Static website is limited in some functions, so we need to expand our services to third-party websites.
You can always use NexT supported third-party service extensions required functionality.

Mathematical formula

NexT offers two rendering engine for displaying mathematical formulas.

1. Enable mathematical formula

   math:
     enable: true
     per_page: true 
   

   per_page: true default rendering Front-matter only markers mathjax: truedocument
   per_page: false import every page mathjax / katexscript

2. Select the rendering engine

   Currently, NexT offers two rendering engines: MathJax and KaTeX.

math

• Need to uninstall the original renderer hexo-renderer-markedand choose one renderer installation:

npm un hexo-renderer-marked --save 
npm i hexo-renderer-kramed --save ＃ or hexo-renderer-pandoc

• Open the theme configuration file rendering engine

mathjax：    
  enable：true

katex

• Need to uninstall the original renderer hexo-renderer-markedand choose one renderer installation:

npm un hexo-renderer-marked --save 
npm i hexo-renderer-markdown-it-plus --save ＃ or hexo-renderer-markdown-it

• Open the theme configuration file rendering engine

katex:
  enable：true

Note: Rendering plug-ins can only choose one, or can not be displayed properly.

Comments System

NexT system supports a variety of comments.
To cancel a page / article comments, increase in front-matter md filecomments: false

• gitalk: is based on Github Issue and Preact modern commentary components.

  1. Click here to sign new OAuth applications .
     Other content free to fill in, but be sure to fill in the correct callback URL (usually with the comments page corresponding domain name).
     You will then get Client ID and Client secret.
  2. You want to create a stored Gitalk comment on GitHub repository.
  3. Modify the theme configuration file

  # Gitalk
  # Demo: https://gitalk.github.io
  gitalk:
    enable: true 
    github_id:             # Github username
    repo:                  # Gitalk 评论的存储库
    client_id:             # Client ID
    client_secret:         # Client Secret
    admin_user:            # 所有者和合作者
    distraction_free_mode: true # Facebook-like distraction free mode
    language: zh-CN
  

• Valine (China): is a fast, simple and efficient Leancloud, does not depend on the back-end system comment. Official use Document

• Comment system support: NexT allows you to enable multiple simultaneous commenting system. Official use Document

Chat service

Please refer to the official documentation

Support for custom style

NexT suggest that you use the Data Files Hexo official recommended system configuration to separate the individual (Hexo 3.x and above), so that you can personalize the configuration in the case as little as possible to modify NexT project code, easy theme upgrade.

Text end tag

Theme configuration file uncommented

custom_file_path:
  postBodyEnd: source/_data/post-body-end.swig

In the path /source/_datacreated under / modify post-body-end.swigfile and add the following

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

Add a subject and title bar background

First theme Profile uncommented

custom_file_path:
  style: source/_data/styles.styl

In the path /source/_datacreated under / modify styles.stylfile and add the following

// 添加背景 url(https://source.unsplash.com/random/1600x900); 
body {
    background:url(/images/background6.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:cover;
}

// 标题栏背景
.site-meta {
    padding: 20px 0;
    color: #fff;
    background: $blue;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
}  

// 修改主体透明度
.main-inner{
    background: #fff;
    opacity: 0.95;
}

// 修改菜单栏透明度，会引起本地搜索菜单bug
//.header-inner {
//    opacity: 0.95;
//}

// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

Modify the main subtitle font color

Continue to /source/_data/styles.styladd files to help you choose the color of the website: Color-hex

//主标题颜色
.brand{
    color: $white
}

//副标题颜色
.site-subtitle {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff;
}

Modify button, the selected area, block, and other styles table

First theme Profile uncommented

custom_file_path:
  style: source/_data/variables.styl

In the path /source/_datato create / modify the next variables.stylfile (equivalent to modify the theme files next/source/css/_variables/base.styl), and add the following

// Buttons
// --------------------------------------------------
$btn-default-bg                 = white;
$btn-default-color              = #49b1f5;
$btn-default-font-size          = $font-size-small;
$btn-default-border-width       = 2px;
$btn-default-border-color       = #49b1f5;
$btn-default-hover-bg           = #49b1f5;
$btn-default-hover-color        = white;
$btn-default-hover-border-color = #49b1f5;

// Selection
$selection-bg                 = #49b1f5;
$selection-color              = white;

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace;
$code-border-radius             = 3px;
$code-foreground                = $black-light;
$code-background                = #edf1ff;

// Table
// --------------------------------------------------
$table-width                    = normal;  //next默认100%
$table-border-color             = $gray-lighter;
$table-font-size                = $font-size-small;
$table-content-alignment        = left;
$table-content-vertical         = middle;
$table-th-font-weight           = 700;
$table-cell-padding             = 8px;
$table-cell-border-right-color  = $gainsboro;
$table-cell-border-bottom-color = $gray-lighter;
$table-row-odd-bg-color         = #f9f9f9;
$table-row-hover-bg-color       = $whitesmoke;

Article encryption

The need to encrypt the article Front matter locale password: 123456
theme configuration file uncommented

custom_file_path:
  head: source/_data/head.swig

In the path /source/_datacreated under / modify head.swigfile and add the following

<script> 
 (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

---

Reference links:

hexo the next theme customized configuration
Hexo Next topic Advanced detailed tutorial
hexo personal blog next topic optimization
NexT website color theme of unity
Hexo Theme NexT theme personalized configuration best practices
Hexo + NexT theme configuration notes