Hexo Personal Free Blog (iii) next topics, comments, reading statistics and in-site search

use the next theme to beautify the interface:

After installing the Hexo, the theme uses the Hexo default landscape theme, the next theme is Iissnan design, the user guide can actually refer directly to the next official website: http://theme-next.iissnan.com/ 1.Next Theme Download:

Open the Git shell and use git to checkout the subject code from GitHub at the current project root, and enter the instructions:

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

After the download is completed, the next folder in the Hexo\theme directory, the next one is the required files, of course, we can also see in the theme file directory there is a landscape folder, which is the Hexo default theme.
2. Configuration topics:

Before we configured the Hexo, useful to the _config.yml file, called the site configuration file , and we open the next theme folder, found that there is also a _config.yml file, we call this a theme configuration file . How to enable the next topic in Hexo: Open the Site configuration file, locate the theme field, and change its value to "next", as follows:

# Extensions # #
plugins:https://hexo.io/plugins/
# themes:https://hexo.io/themes/
theme:next

After the configuration is complete, use the HEXO Server directive to launch the local blog in the Git shell, and access the http://localhost:4000 in the browser to see the following results:
style selection for 3.next:

There are three different styles of Next: Muse, Mist and Pisces, what you see in step 2 is actually the next default mode Muse, according to the official description three styles are characterized as follows: Muse: default Scheme, this is the original version of Next, the black and white melody, Plenty of white Mist: A compact version of Muse, neat and orderly single-column appearance Pisces: double-bar Scheme, Xiaojiabiyu-like freshness

Switching control is very simple, using the Scheme field in the next theme configuration file to control, let's say we choose the mist style (personally think the most beautiful style), the procedure is: Open the next folder in the _config.yml file, find the Scheme field, set it to " Mist ", as follows:

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

# schemes
#scheme: Muse
scheme:mist
#scheme: pisces

Restart your blog and refresh your browser to see:
Additional optimizations: 1. Set Favicon:

Favicon's Full name Favorites icon, which is the icons on the left side of the address bar:

There is an online tool to upload your own images to generate Favicon.ico files of the specified specifications: http://www.atool.org/ico.php. Open the theme profile _config.yml to see the configuration information for Favicon:

# Put your favicon.ico into ' hexo-site/source/' directory.
Favicon:/favicon.ico

According to the instructions, we name the icon Favicon.ico and then put it in the Hexo\source directory of the current project and restart the blog to take effect. 2. Menu bar control:

We see the menu bar at the top of the page, which is actually controlled by the menu field in the theme configuration file, such as the original look:

Let's change the theme profile by removing the comment from the front of the About page as follows, which means that the tab is displayed:

#------------------------------------------------------#
Menu Settings
#------------------------------- -----------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/a Rchives-Archives)
menu:
  home:/
  #categories:/categories about
  :/about
  Archives:/archives
  Tags:/tags
  #commonweal:/404.html

Restart your blog to see the following results:

However, click to open about but there is "cannot get/about/" page error, this is because we have not about this page, we need to use the Hexo new page "name" to create:

Hexo New page about

The result is a more about folder under the Hexo\source directory, with INDEX.MD in it, which is a click on the content page to be displayed. Similarly, you can create a tags page. 3. Language settings:

In the site configuration file, explicitly specify the language to use, such as Chinese, if:

Language:zh-hans

Once setup is complete, the Discovery menu bar has changed:
4. Side bar Setting:

In the sidebar field of the theme profile, I set it directly to the sidebar, which is displayed on the right side:

Sidebar:
  # sidebar Position, available Value:left | Right
  position:left
  #position: Right

  # sidebar Disp Lay, available value:
  #  -Post    expand on posts automatically. Default.
  #  -Always  expand for all pages automatically
  #  -Hide    Expand if click on the sidebar togg Le icon.
  #  -Remove  totally remove sidebar including sidebar Toggler.
  #display: Post
  display:always
  #display: Hide
  #display: Remove

5. Set the Avatar and author name:

In the site configuration file, a new field avatar, the value is the connection address of the Avatar, where I use the site address, put Avatar.png in the local directory hexo\source\images; the author name directly sets the value of the Author field in the Site configuration file:

# Site
title:linsh-he le ~
subtitle:
Description:
author:linshuhe
Avatar:/images/ Avatar.png
Language:zh-hans
timezone:

third-party services: 1. Comment MORE:

Enter more said official website, login and click "I want to log in", fill in the relevant information, note to remember to say the domain name of this field fill in the content, http://(Duoshuo_shortname). duoshuo.com, this Duoshuo_ ShortName will be used for the configuration in our site configuration file. Step: Create a new Duoshuo_shortname field in the Site configuration file and fill in the Duoshuo_shortname used for registration, for example:

Duoshuo_shortname:linshuhe1

2. Baidu Statistics:

Used to count the number of readings, the steps are as follows: Login Baidu Statistics official website: Http://tongji.baidu.com/web/welcome/login to the site of the code to get the page; Copy the ID of the hm.js? In the site configuration file, Add a field baidu_analytics, set its value for the above copied Baidu statistics ID reading statistics, using Leancloud to achieve, details view: https://notes.wanghao.work/2015-10-21-%E4%B8 %banext%e4%b8%bb%e9%a2%98%e6%b7%bb%e5%8a%a0%e6%96%87%e7%ab%a0%e9%98%85%e8%af%bb%e9%87%8f%e7%bb%9f%e8%ae%a1%e5% 8a%9f%e8%83%bd.html#%e9%85%8d%e7%bd%aeleancloud 3.Swiftype Search

You need to go to Swiftype to configure a search engine before using Swiftype. Then edit the site profile, add the Swiftype_key field, and value the key for your Swiftype search engine. For detailed configuration, please refer to: Http://theme-next.iissnan.com/third-party-services.html#swfitype

Local Search : add Baidu/google/local Custom site content search: Install Hexo-generator-search:

NPM Install Hexo-generator-search--save

In the site configuration file, add:

    Search:
        path:search.xml
        field:post

The end result can be viewed in my blog: https://linshuhe1.github.io/ supplement:

Maybe someone like me met with you trouble, that is the main page of the article list, the blog content is all displayed instead of only the part of the article and read the full text button, so that the first page of the list is very messy and lengthy, in fact, to solve the problem is very simple, just need to be in our writing markdown content, In the appropriate position if the following label:

<!--more-->

Then the section on the front page is the content of the article before this label, not the full text display: