Hexo NexT Theme Configuration

Posted on Edited on Views: Word count in article: 757 Reading time ≈ 3 mins.

Install NexT theme

First, you need to install the NexT theme, you can enter the following code:

1
npm install hexo-theme-next

Local search function

Install the following plug-ins:

1
npm install hexo-generator-searchdb --save

Add the following code to Hexo _config.yml:

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

Then, you need to open the local search function in NexT _config.yml:

Now, you can see this on your website:

Article excerpt

Install hexo-excerpt via cmd:

1
npm install hexo-excerpt --save

Then, Add the following code to Hexo _config.yml:

1
2
3
4
5
excerpt:
  depth: 5  
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

Now, you can see the "Read More" button on your website:

Code block theme

You can change the background color of the code block here in NexT _config.yml, and there are many themes at https://theme-next.js.org/highlight/.

Article word count and reading time

Install hexo-word-counter via cmd:

1
npm install hexo-word-counter

Then, add the following code at the end of the Hexo _config.yml:

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

Finally, modify the NexT _config.yml:

Comment system

We can implement a comment system based on Gitalk. It saves article comments in the specified Github repository in the form of issues.

First, you need to register a new OAuth application: https://github.com/settings/applications/new

Then, you need to edit the configuration in the NexT _config.yml as follows:

If you don’t want to display the comment module on a certain page, you can add the following code to the Front-matter of the page:

1
comments: false

Note that if you close an issue on your Github, you will not see the corresponding comments on the website.

If you want to add a copyright notice at the bottom of the article, you need to modify the code here:

Then, you can see a similar copyright statement at the bottom of the article:

For more information about copyright agreements, you can visit this website: https://creativecommons.org/share-your-work/cclicenses/

Douban data display

If you use Douban to record the movies or books you have watched, you can use the hexo-douban plug-in to display your data.

Install hexo-douban via cmd:

1
npm install hexo-douban --save

Then, Add the following code to _config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
douban:
  id: xxx  # Your Douban id. It can be found on the personal homepage of Douban website
  dynamic: false
  item_per_page: 30
  meta_max_line: 5
  customize_layout: page
  builtin: true   # If you want to generate related pages
  movie:
    title: 'Movies'
    quote: 'xxx' # 
    path: /movie/index.html # The URL of the relevant web page can be customized
	actions:
      - do
      - wish
      - collect
    option:
  book:
    title: 'Books'
    quote: 'xxx'
    path: /book/index.html # The URL of the relevant web page can be customized
    actions:
      - do
      - wish
      - collect
    option:
  timeout: 10000

Finally, use the following code to update your website:

1
2
3
4
hexo clean
hexo douban -m
hexo g
hexo deploy

Note that you can also use other parameters here instead of hexo douban -m, such as:

1
2
3
4
-b, # books, Generate douban books only
-g, # games, Generate douban games only
-m, # movies, Generate douban movies only
-s, # songs, Generate douban songs only

More information about the parameters can be found here: https://github.com/mythsman/hexo-douban

Now you can see your Douban data on your website: