add menu on hexo-theme-next Environment Info Quick start References

Add new menu like “CS Technology, live” in the blog. Open it then show me all posts about special categorie.

add new menu in hexo

Environment Info

  • hexo: 3.7.0
  • hexo theme: next 5.1.4

Quick start

1. Change theme config file

1
vi themes/next/_config.yml
1
2
3
4
5
menu:
home: / || home
CS-Technology: /categories/CS-Technology/ || heartbeat
live: /categories/live/ || calendar
archives: /archives/ || archive

Tips
1). The left part of “||”, after ‘/categories/CS-Technology‘, You need to keep consistent with the categories of your posts. As follows:

1
vi source/_posts/2018-04-01-hexo-Reference-URL-Todo.md

1
2
3
4
5
6
7
8
---
title: About blog||hexo TODO-List
tags:
- Hexo
- Note
categories:
- CS-Technology
---

2). Another part is menu icon, it belong to Font Awesome, in that site you can choose any one of icons you need, and you need to whrite down its name.

2. Defining language files

The next theme supports multi-languages

1
ls themes/next/languages/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
de.yml
default.yml
en.yml
fr-FR.yml
id.yml
it.yml
ja.yml
ko.yml
nl-NL.yml
pt-BR.yml
pt.yml
ru.yml
vi.yml
zh-Hans.yml
zh-hk.yml
zh-tw.yml

Theoretically, you need to define in all language files if you add a new menu. Or change the one you use).

Here, with English:

1
vi themes/next/languages/en.yml

1
2
3
4
5
menu:
home: Home
archives: Archives
CS-Technology: CS Technology
live: Live

On the left is the key( In “themes/next/_config.yml” ), the right is the actual menu displayed in the current language.

3. Test

New Post

If you already posts about the categories you can skip new post.

1
hexo new post "XXXX"

Define categories and wirte something…

Test before deploy

1
2
hexo generate;
hexo server;

References