Eastwatch

Listen to the rhythm of the falling rain.

0%

Hexo Blog Customization Under NexT theme

Environment: Hexo v5.4.0, NexT v7.8.0, windows 10

  1. run npm install hexo-generator-searchdb --save

  2. modify _config.yml in the root directory, add the following code:

    1
    2
    3
    4
    5
    6
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
    content: true
  3. modify _config.yml in ./themes/next:

    1
    2
    local_search:
    enable: true

Show reading progress

modify ./themes/next/_config.yml:

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 2px

Show number of visitors/views

Modify ./themes/next/_config.yml:

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

Site map

  1. run npm install hexo-generator-sitemap --save

  2. modify _config.yml in the root directory, add the following code:

    1
    2
    # Extensions
    plugins: hexo-generator-sitemap
  3. modify _config.yml in ./themes/next:

    1
    2
    menu:
    sitemap: /sitemap.xml || fa fa-sitemap

Excerption

Solution 1: Insert <!--more--> in your article. Only content before this mark will be shown in the home page.

Solution 2: Install plugin to achieve auto-excerption. This way you won't need to insert additional marks in your article.

  1. run npm install hexo-excerpt --save

  2. add the following code in ./_config.yml:

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

modify ./themes/next/_config.yml: (Note that you can create a new folder under ./themes/next/source/uploads and put uploaded images to there)

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /uploads/avatar.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false

Add menu items in sidebar

  1. Run hexo new page diary. This will create a diary folder under ./source

  2. You can modify ./source/diary/index.md at your will.

  3. Modify themes/next/_config.yml to show the "diary" item:

    1
    2
    3
    menu:
    # add the following line!
    Diary: /diary/ || fa fa-book

    "book" is the icon name in the font-awesome website. You can choose whatever icon you like and use that icon's name.

Password protection

  1. run npm install --save hexo-blog-encrypt to install plugin

  2. add the following code in ./_config.yml:

    1
    2
    3
    4
    encrypt:
    enable: true
    default_abstract: blabla
    default_message: blabla
  3. add password, abstract and message fields at the header(Front-matter) of the article that you want to protect, like this:

    1
    2
    3
    4
    5
    6
    7
    ---
    title: Diary
    date: 2021-08-025
    password: 123
    abstract: ENCRYPTED!
    message: Enter password to get access.
    ---

    If you don't provide the "abstract" and "message" field, they will be replaced by the default abstract and default message you set.

Latex support

Hexo doesn't support Latex rendering. Need to install plugins. Details see my post here.

You can create a nice and simple gallery page by using custom html and css, if you want. Please reference to other's post here.

Write diary

See my post here.

Add local image in your article

  1. Install plugin: npm install hexo-asset-image --save

  2. Modify ./_config.yml: set post_asset_folder to true

  3. Finally, the plugin has bug in my Hexo version. Find ./node_modules/hexo-asset-image/index.js, chane line 24:

    var endPos = link.lastIndexOf('.'); => var endPos = link.lastIndexOf('/');

Then when you run hexo new xxx, it will create a folder with the same name (xxx) in the same directory. Put images to that folder. Then you can link the image in xxx.md by using format like ![alt text](xxx/image_name.jpg)

Page loading effect

Need a few steps to set up. Please refer to here. Personally prefer 'bounce' effect.

Comment system (Valine)

There are quite many comment systems, but I prefer using Valine, which is open-source, anonymous and simpe to use. You need to register in leancloud website (Valine needs leancloud storage service), getting appid and appkey. Then modify code below in ./themes/next/_config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier
verify: false # Verification code
placeholder: Welcome to leave a message ~ # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail # Custom comment header
pageSize: 10 # Pagination size
language: en # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

Automatically open markdown editor

Create newpost.js under ./scripts, type in the following code:

1
2
3
4
5
var spawn = require('child_process').exec;
hexo.on('new', function(data){
spawn('start "absolute_path_of_your_marksown_editor.exe" ' + data.path);
});
// For example, my path is "C:\\Program Files\\Typora\\Typora.exe".

Then when you run hexo n xxx, your markdown will be opened automatically.

Click picture to zoom

Find fancybox option in ./themes/next/_config.yml, and change it to true.