Blog Building II: next theme related settings beta

install NexT

In your blog root directory

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

Different versions NexT The configuration file is slightly different , This use is hexo-theme-next-7.8.0 edition .

Recommended download nop++ Use together to modify the configuration file , Using shortcut keys Ctrl+F It can quickly locate the modified place .

There are two profiles , One is Hexo Of , The other is NexT Of , The names are _config.yml, below “ The configuration file ” Unless otherwise specified, it is assumed that next The configuration file under file .

Enable theme

Modify the configuration file in the blog root directory _config.yml Of theme：next( notes ： Clone the previous step to the local NexT Copy the file to the blog root directory themes Folder , And changed his name to next)

Theme setting

open next Configuration file in _config.yml, You can choose different blog topics by modifying the following Muse、Mist、Pisces、Gemini（ Delete #）

#  Scheme Settings
#  Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Setup language

In the configuration file under the root directory of the blog

language: zh-CN

The Settings menu

menu:
  home: /                   #  home page 
  archives: /archives       #  file （ Organize all blogs , In chronological order ）
  #about: /about            #  About 
  #categories: /categories  #  classification （ Equivalent to a book ） such as ： programing language 
  tags: /tags               #  label （ It's equivalent to a book catalog ） such as ：C、C++、Python···
  #commonweal: /404.html    #  public welfare 404

Set up sidebar

Modify... In the configuration file sidebar.position Value ：

left -  Keep to the left 
right -  Keep to the right 

Set when the sidebar is displayed , modify sidebar.display Value ：post - Default behavior , On the article page （ Have a list of directories ） Time display 、always - Show... On all pages 、hide - Hidden in all pages （ It can be expanded manually ）、remove - Remove... Completely .

sideebar:
  display: post

Set up your avatar

avatar: http://example.com/avatar.png

The avatar file is located in next/source/images/ Under the table of contents

Set the author's nickname 、 Site description

The configuration file in the blog root directory

# Site
title:          #  title 
subtitle:       #  Subtitle 
description:    #  One sentence description 
keywords:       #  keyword 
author:         #  Author's nickname 
language: zh-CN #  Language 

Add tab page

In the blog root directory git bash here

$ hexo new page tags

It will be in the blog root source Generate under folder tags Folder , Modify the index file ：

---
title:  label 
date: #  The default value is 
type: "tags"
---

notes ： If the comment function is integrated , If you need to turn off the comment function of an article , Please add comments And set the value to false, If you want to close the comments on the classification page, modify index file , Such as ：

---
title:  label 
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

####　 Add a category page

$ hexo new page categories

It will be in the blog root source Generate under folder categories Folder , Modify the index file ：

---
title:  classification 
date: #  The default value is 
type: "categories"
---

The closing method is the same as above .

Set the code highlight theme

NexT The default is Off-white normal The theme , Optional values are normal,night, night blue, night bright, night eighties：

codeblock:
  highlight_theme: night eighties

Social links

Changing configuration files

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
   Microblogging : http://weibo.com/your-user-name
   douban : http://douban.com/people/your-user-name
   You know : http://www.zhihu.com/people/your-user-name
  #  wait 

It can be downloaded from Font Awesome：http://www.fontawesome.com.cn/faicons/#web-application Add an icon to the link above （ You don't have to bring fa- Prefix ）. enable Options are used to control whether icons are displayed , You can set it to false To not display icons .

Configuration example

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
   Microblogging : weibo

Turn on the reward function

Fill in the wechat and Alipay collection QR code image address in the theme configuration file to enable this function .

reward_comment: #  User defined reward interface content adheres to original technology sharing , Your support will encourage me to continue to create ！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

Site establishment time

since: 2022

Animate the background

NexT With two kinds of background animation effects

Edit theme profile , Search for canvas_nest or three_waves, Set the value as true perhaps false that will do ：

canvas_nest  Configuration example 
# canvas_nest
canvas_nest: true // Turn on animation 
canvas_nest: false // Turn off animation 

three_waves  Configuration example 
# three_waves
three_waves: true // Turn on animation 
three_waves: false // Turn off animation 

Only one background animation effect can be turned on at the same time .

Count the number of words in the article

install hexo-symbols-count-time

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

$ npm install eslint --save

Configuration file modification

symbols_count_time:
  symbols: true                #  Word count of the article 
  time: true                   #  The reading time of the article is 
  total_symbols: true          #  Site total word count 
  total_time: true             #  The total reading time of the site 
  exclude_codeblock: false     #  Exclude code word count 
  separated_meta: true         #  Whether to start another line （true It's not the same as the time of publication ）
  item_text_post: true         #  Whether to display text description before counting the number of articles on the front page （ The number of words in this article 、 Reading time ）
  item_text_total: false       #  Whether to display text description before counting quantity at the bottom of the page （ The total number of words on the site 、 How long does the site read ）
  awl: 4                       # Average Word Length
  wpm: 275                     # Words Per Minute（ Read words per minute ）
  suffix: mins.

Reading time = Total words ÷ Average reading speed （275 wpm）

On this basis , Then give each image 12 The second time .

notes ：wpm, Its full name is Words per minute
With the development of the platform , More and more articles are illustrated . The original reading time is based on comics 「 It takes a long time to see 」 Based on the picture of , If we calculate with the original algorithm , That one contains 140 The reading time of the article with pictures will be as long as 87 minute , This is obviously unreasonable .

therefore , The reading time of the picture is corrected to the first 12 second , The second 11 second , Decrease in turn 1 Second to the first 10 Zhang Hou , Each with 3 Second count .

The reason for setting the reading duration is actually easy to understand , In this way, users can easily grasp the opportunity to read —— When waiting for the bus , It's better to collect it for a while before reading .

Of course , The premise of setting all reading hours is —— Estimate .

Set the number of visitors

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

Set the top loading bar of the blog

# Progress bar in the top during page loading.
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

（ notes ： Because there is no cloud server , So there is no backup service , If there is a backup requirement , You can back up theme files or blog content as appropriate , There was a problem adding new functions. Traceable stream recovery , Themes can also be used directly in new blogs , Omit the subsequent configuration process .）