The previous section, we introduced Hexo foundation to build, we must build a complete discovery, is the English version, and the page a bit ugly. This chapter will introduce the topic and set the configuration of the Hexo with you.
Original link:https://codernice.top/articles/6b580174.html

Site Information

There are mentioned in the previous chapter with you _config.yml this file, let's call this site global configuration file, follow-up, when we talk about the topic, there will be such a file, temporarily called it the theme configuration file .
We first look at a global profile What are the main contents:

# Site 站点主配置
title: Hexo  # 网站标题
subtitle:    # 网站副标题
description:   # 网站描述
keywords:      # 可以不填写保持默认
author: John Doe  # 网站拥有者昵称
language:    # 网站语言设置，一般根据依赖的主题而定
timezone:    # 网站时区设置，一般不填写保持默认

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url:   # 网站url设置
root:  # 网站根目录链接
permalink: :year/:month/:title.html  # 文章链接，默认是按照 /年/月/日/文章标题 设置的链接
permalink_defaults:  # 默认链接形式
......
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme:  #主题

These may need to set the default to rest, git configure site map configuration and subsequent re-use presentation.
Information finished configuring, remember to take hexo g && hexo s, refresh your browser to see the effect.

Next install the theme

Theme at the official website you can download (https://hexo.io/themes ) can also go to GitHub search, I recommend using Next topic that occupied almost half of Hexo blog.
Next topic Download:https://github.com/theme-next/hexo-theme-next.git
version presented here is Next6, in fact, increase the Next6 version Next5 a lot of things need to manually configure and maintain Next5 has stopped, so recommended Next6 version.

Download Next theme

In two ways:
1. Use the git clone command to clone the Next warehouse themes / next at hexo directory, you need to perform in the root directory, the command is: git clone https://github.com/theme-next/hexo-theme-next.git themes/next
2. Direct selection of the green button on the Github page Clone or Downloaddownload archive, then unzip under the themes directory name can modify.

Next set the theme

Open the global configuration file _config.yml, find theme, as follows:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next   #此处填入你在themes目录下的next主题目录名

Next topic test

Execute the following command in Git Bash:

hexo clean && hexo g && hexo s

After completion of the input command execution in the browser http://localhost:4000to view the installed Next topics.

Next topic Configuration

In the following themes directory, there are a _config.yml configuration file, we call it the theme configuration file, let's begin configuration.

Website Icons Set

Open _config.yml, found favicon positions, as follows:

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

The picture on your next topic below source / images directory, then you can set the theme configuration file.

Powered bottom closed by hexo

In the footer, the attributes of all the powered theme is set to false and

footer:
  ...
  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

Menu bar settings

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

# Enable / Disable menu icons / item badges.
menu_settings:
  enable: true  #表示是否显示菜单图标icons
  badges: false  # 显示每个菜单下面有多少个内容

|| is behind the icon name fontawesome, if you want to modify the icon, you can go to the official website to find FontAwesome icon style you like.

Theme style settings

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

The default is the Muse, I was using Gemini, you can look at each trial, which likes to see.

Social links set

social:
  GitHub: https://github.com/codernice || github
  #E-Mail: mailto:xx || envelope
  #Weibo: xx || weibo
  #Google:xx || google
  #Twitter: xx || twitter
  #FB Page: xx || facebook
  #VK Group: xx || vk
  #StackOverflow: xx || stack-overflow
  #YouTube: xx || youtube
  #Skype: xx || skype

yourname into your own annotations can be removed in the corresponding site ID, the #.

Links Set

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  #Title: http://example.com

#Title: http://example.comReplaced for the site name and link

Article metadata settings

post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

Create a display in the home page of the article, updated data Reads like

Article Word Count settings

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

This setting must be added hexo-symbols-count-timethe module dependency, the site used in the root directory hexo npm install hexo-symbols-count-time --savecommand to install the module.

Sidebar picture settings

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: 你的头像地址
  # If true, the avatar would be dispalyed in circle.
  rounded: true # 设置头像是否为圆形
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1 # 设置不透明度，1为完全不透明，0为完全透明
  # If true, the avatar would be rotated with the cursor.
  rotated: true # 设置鼠标放到头像上是否旋转

Code block is provided

codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius: 7   # 按钮圆滑度
  # Add copy button on codeblock
  copy_button:
    enable: true # 设置是否开启代码块复制按钮
    # Show text copy result
    show_result: true # 是否显示复制成功信息

Open an article a reward button

# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
  enable: true #开启打赏功能
  animation: false
  #comment: Donate comment here

reward:
  wechatpay: # 微信收款图片地址
  alipay: # 支付宝收款图片地址
  #bitcoin: /images/bitcoin.png

Open Related articles recommended function

related_posts:
  enable: true #开启
  title: # custom header, leave empty to use the default one
  display_in_home: false #显示在首页
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

You need to install hexo-related-popular-poststhe module, executed in hexo site root npm install hexo-related-popular-posts --saveinstallation module.

Code block style settings

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

There are normal, night, night eighties, night blue, night bright these types of style, we can all try and see.

Add valine comment system

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
  enable: true # 开启valine评论
  appid: # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder:  # comment box placeholder
  avatar: monsterid # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  language: # language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # if false, comment count will only be displayed in post page, not in home page

valine third-party plug-ins, you need to https://leancloud.cn registered account, you can get to put here after appid and appkey. Set the default avatar is the avatar can go to https://valine.js.org/avatar select a default avatar, then here you can set the name.

Open Baidu Share

# Baidu Share
# Available values: button | slide
# Warning: Baidu Share does not support https.
baidushare:
  type: button  # 设置分享按钮的风格，有button何slide形式

Open needmoreshare Share

needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

needmoreshare2 rely theme-next-needmoreshare2 module, can be turned to a friend https://github.com/theme-next/theme-next-needmoreshare2 find a way.

Read the article to set the amount of

leancloud_visitors:
  enable: true
  app_id: 
  app_key: 
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: false
  betterPerformance: true

appid and appkey opened with the above comments leanCloud valine use is the same. If you find that the article does not show the amount of reading, you can go to the back-end storage leanCloud menu, create a Class, named Counter.

Open without garlic statistics

busuanzi_count:
  enable: true
  total_visitors: true #开启总访客（uv）
  total_visitors_icon: user
  total_views: true #开启总访问数（pv）
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

Here post_views and above leanCloud_visitors conflict, both display the amount of reading the article, just open a can.

Enable local blog search feature

local_search:
  enable: false
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

This feature relies hexo-generator-searchdbplug, use the command npm install hexo-generator-searchdb --saveto install, and at the end of the global configuration file, add the following code.

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

to sum up

These are the common hexo blog as well as some basic configuration settings based Next topic more features you can explore in use-by are welcome to discuss the exchange.

Dependencies of the modules need to install

1. Count: npm install hexo-symbols-count-time --save
2. Recommended related articles: npm install hexo-related-popular-posts --save
3. Local blog search: npm install hexo-generator-searchdb --save, then add the code at the end of the global configuration file

Third-party plug-ins

1.valine comment system: the need to https://leancloud.cn registered account, access to appid and appkey
2. articles of read: leancloud need to use the same appid and appkey

Use Hexo open source blog system, easy to build your personal blog (2) - Configuration chapter