Re: Hexo builds a personal blog from scratch (2)

This chapter mainly talks about the personalization of the blog, such as the basic configuration of the site (language, avatar, site icon, etc.), installing a new Hexo theme (Next theme), and the configuration of the theme.

1. Modify the site configuration

Open the site configuration file and find:

# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone:

Modify the above configuration according to your own needs. The annotations of these configurations are as follows:

# Site
# 站点标题
title: Hexo
# 站点副标题
subtitle:
# 站点描述
description:
# 站点关键词
keywords:
# 站点主人
author: John Doe
# 站点语言
language:
# 站点时区
timezone:

1.1 language

The languages currently supported by NexT are as follows:

language	language
English	on
Simplified Chinese	zh-Hans
French	fr-FR
Português	pt or pt-BR
traditional Chinese	zh-hk or zh-tw
Russian language	ru
Deutsch	from
Japanese	and
Indonesian	id
Korean	ko

1.2 timezone

Hexo uses the computer's time zone by default, or you can configure it yourself, for example:

UTC+8

2. Install the new theme

Hexo has a lot of themes developed by big guys. Many people use the Next theme, which is really simple and beautiful. The new version of the Next theme can also choose four themes.

So how to install the new Hexo theme?

In our Hexo project path, we can see that there is a themes folder, which is used to store theme files.

2.1 Download Next Theme

First open a command window under the path of the Hexo project. If you have not configured Git environment variables, please use Git Bash.

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

Note that the current path is your Hexo project root directory, use the above command to correctly clone the Next theme to the next folder under the themes folder.

Next, you will see a next folder under themes, click in and you will see a .gitfolder, delete the folder, otherwise you will not be able to push the entire Hexo project to GitHub.

2.2 Enable Next theme

In the Hexo project, there are two important configuration files _config.yml; these two configuration files are one in the project root directory and the other in the theme directory.

The former is the site configuration file, and the latter is the theme configuration file. As the name suggests, one is the configuration option of the Hexo project, and the other is the configuration option of the theme file.

Open the site configuration file. You cannot open the file with the notebook that comes with Windows. Please use other editors to open it. Common editors include Notepad++, UltraEdit, EditPlus, etc.

In the site configuration file, find:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

The default blog theme is this, we will change it to next; the theme here refers to the folder name of the corresponding theme under the themes folder.

Note that all property values in the configuration file must :be preceded by a space. For example, the spelling below is wrong. If you don't add spaces, you will make an error.

theme:landscape

2.3 Select the Appearance Scheme of the corresponding theme

Open the theme configuration file and find the options below:

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

By default, Muse is used as the appearance of the Next theme, and #a certain appearance is activated by removing the front of a certain scheme, as follows:

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

2.4 Verify the new theme

Still the old operation - start the debug mode server:

hexo s --debug

After the startup is successful, use a browser to access http://localhost:4000/it to see if the blog can be accessed successfully.

3. Modify the Next theme configuration

Theme configuration files are _config.ymllocated themes\nextunder .

3.1 Avatar settings

Open the theme configuration file and find the following:

# 侧边栏头像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
# 头像的路径可以放在主题对应文件夹的source里，也可以放在站点根目录的source里，建议放在站点路径上
#avatar: /images/avatar.gif

Remove the # in front of avatar, and then configure the path of the image.

3.2 Website Icons

Open the theme configuration file and find the following:

# 将你的网站图标放到`{站点根目录}/source/` (推荐）或者`hexo-site/themes/next/source/images/`目录下
# 默认的Next主题的网站图标放在`{站点根目录}/themes/next/source/images/`目录下
# 如果你想将自己的网站图标放到`{站点根目录}/source/`根目录下，必须将`/images`从路径中去掉
# 如果你将网站图标放到了`{站点根目录}/source/images`路径下，需要令网站图标的名字和`{站点根目录}/themes/next/source/images/`路径下的网站图标不同，否则网站图标会使用后者的同名图标
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

It should be noted here that website icons are generally of .ico or .gif type, and the size of the icon is generally only a few kilograms. You can use the website below to make a personal website icon. It is recommended to make the original icon square first.

Make ico icons online

3.3 Menu Settings

Open the theme configuration file and find the following:

# 如果该站点是运行在子目录之下（比如：domain.tld/blog；这里的blog就是指我们的博客，前边的是上一级的域名），需要将路径前的斜杠去掉（/archives -> archives；即是将原本的绝对路径改成了相对路径）。
# 用法：`Key：/link/ || 菜单图标`
# Key就是菜单名，如果对该菜单名进行了国际化，即将其翻译放到对应的languages文件夹中，将会根据你设置的语言进行加载对应的菜单名翻译；如果没有设置翻译，则会使用这里的Key作为菜单名。这里的Key是大小写敏感的。
# 在`||`分隔符之前的值是该菜单对应的路径
# 在`||`分隔符之后的值是FontAwesome的图标（不懂的请百度什么是FontAwesome以及其用法），如果不指定图标，将会自动使用question这个图标。

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

The method of use is very simple. It is still necessary to remove the # in front of the menu that needs to be displayed. I have given the more specific operation information in the comments above.

3.4 Tag Classification

First, we need to create a new page, open a command window in the root directory of the site, and enter the commands respectively:

hexo n page "categories"
hexo n page "tags"
hexo n page "about"

Then you will find that there are three more folders above in the source directory of the root directory, each with an index.md file. If we unseal the three menus of categories, tags, and about in the menu before, then after creating these three pages, we can successfully access them, otherwise a 404 request error will be reported.

3.5 Social Links

# 如果不指定图标，会默认使用globe图标
#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:[email protected] || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

The old rule, remove the # comment to start.