Hexo + NexT (four): Hexo site and Next topic configuration in detail

Adoption Hexoand NexTlater to build a good website, some results are not what we need, Hexoand NexTprovides a powerful customization features, this article is going to explain how to configure and adjust the site, to the effect bloggers need.

This article configuration environment is Hexo 3.8.0+ NexT 5.1.4, the theme itself already provides functionality only needs to be configured to complete.

The next article will explain the use of third-party plug-ins to achieve barrier function, while more in-depth explanation of how to write Hexoplug-ins.

Because the performance difference Markdown in Hexo and blog Park, the most realistic effects See website www.guide2it.com

Hexo blog index page topic

The definition of article Permalink

Website article (post type) will form a permanent link in accordance with the rules of each page to generate a static file. , Paging page (page), classification index pages (category), tab index page (tag) and other references in the home page (index) by the permanent link. Permalink generation rules can be customized.

In 站点配置文件found in the following code, and define the

permalink: post/:year-:month-:day-:title/

Above a colon (:) at the beginning of the site is variable, you can use the following variables

variable	description
:year	The article published in the year (4 digits)
:month	Article published in January (2 digits)
:i_month	Article published in January (minus the leading zero)
:day	Publication date of the article (2 digits)
:i_day	Publication date of the article (remove leading zeros)
:title	file name

:year, :month, :dayThese values of several variables, if in markdownthe front matterarea defined date of publication of the article date: 2019-03-01 08:08:08, this value is used. If it does not, and includes the date in the file name, the system can also be used on these values, such as the file name 2019-03-03-my-first-blog.mdof the article, you can get for the year 2019, month and day are 03.

Configuration or create a new menu

Site-wide menu as a standard part of the site, which is reflected in an array, mainly by 主题to maintain, it is mainly used in the theme.

There are several elements of the menu, the menu icon name, its links, as well as its corresponding display text. NexTAlready have some built-in menu, if you want to customize or create a new alignment, in accordance with the following manner.

• In the theme configurationconfig.yml file, or open a new built-in menu, and ||specify the name behind the icon, the icon from FontAwesome, if not specified, the default is a question mark icon. (In the NexT 5.1.4definitions together, the name of the menu icons and icon)

  menu:
    home: / || home # 菜单对应的链接及图标名
    about: /about/ || about
    mymenu: /menuname/

  If you define a menu named above menuname, if not defined, the default link to /the default icon is a question mark, the default display name menuname.

• In the theme configurationconfig.yml open or close icon display function

  menu_icons:
    enable: true #先要打开显示图标的开关

• If the site specified in the profile of the language, it can be built on the current menu display or modify the file, open the \themes\next\languages\file corresponding to the language, find the following position to be modified or newly built.

  menu:
    home: 首页
    archives: 归档

• If you define a menu item in the configuration __ __ theme, but it does not correspond to the language file, from \themes\next\languages\default.ymlthe from the default name.

Custom article page width

NexT, The width of the page article, the default settings are as follows:

• 700px, when the width of the screen <1600px
• 900px, when the screen width> = 1600px
• The mobile device, the width of the adaptive

When the browser screen is wide, both sides have a large blank page, very beautiful. Can be adjusted source/css/_variables/custom.stylto control the contents of the file blank width on both sides, open the file, edit or add the following:

// 把700或900修改为你期望的宽度
//当视窗不超过 1600px时
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

This NexTis generally Scheme在effective. However, Pisces Schemespecial modifications need to header, .main-innerand .content-wrapwidth.

Open the source/css/_schemes/Picses/_layout.stylfile and find the corresponding value content modified as follows (total 3).

# 修改位置 1
header{ width: 90%; }
# 修改位置 2
.container .main-inner { width: 90%; }
# 修改位置 3
.content-wrap { width: calc(100% - 260px); }

Construction facade pattern, increasing the Read button

Site's home page, the default is to have all of the articles are arranged in order, in order to view the back of the article must be substantial drag the mouse. NexTYou can list displays a summary of each article on the home page, the hidden text, shorten the length of each article, at the end of the summary to show a 全文阅读button to display the full text after clicking.

NexTIt provides built-in label, add the following line of code between the abstract and the body of the article.

<!--more-->

The code is converted to 全文阅读the button.

Widescreen display pictures

After an article embedded into the page frame, his content is generally limited divinside. If we need a facade picture mode, slightly wider than the width of the frame aside, the effect is quite good.

NexTIn the 0.4.5above versions, provides built-in label fullimage, can achieve this effect, it is used as follows.

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}
<!-- 别名 -->
{% fi /image-url, alt, title %}

Renderings

Open the folder feature article resource

NexTProvides a resource folder feature that the location of the article with the same name as the file name of the object, as the article resource object.

Resource object used in the article, in the corresponding home page, archive and tag link urlare automatically processed, so that they get the correct link address, to prevent broken links.

Articles and resource files examples are as follows:

|   2019-03-03-00-the-index-of-make-a-blog-by-hexo-on-windows.md    # 文章名
+---2019-03-03-00-the-index-of-make-a-blog-by-hexo-on-windows       # 与文章同名文件夹
|       next_fullimage.png                                          # 资源文件1
|       20170409132041051.png                                       # 资源文件2
|       20170409141726073.png                                       # 资源文件3

Use the following features:

Open 站点配置文件, find the following configuration, and is set to true:

post_asset_folder: true # 默认值false，关闭文章资源文件夹功能

Resource object use the following categories:

1. With a asset_imglabel the picture resource object into a document, you can take prompt text as a parameter.

   {% asset_img 资源对象名 提示文字 %}

   Effect:
   
   

2. With a asset_pathdisplay full path to the resource file. Its usage Yes.

   {% asset_path 资源对象名 %}

   Written directly in the markdown article:

   <img src="{asset_path full-image.jpg %}/>"

   effect:

   

3. 用asset_link把资源对象处理为链接目标，需要带链接显示文字。
   yaml {% asset_link 资源对象名 显示文字 %}
   效果:
   ​ {% asset_link full-image.jpg 指向资源对象 %}

4. 在fullimage内嵌标签中也可以使用资源对象

   {% fullimage 资源对象名, 替代文字, 标题 %}

   效果:
   

增加支付宝和微信打赏功能

NexT主题已经集成了打赏的功能，只要在配置文件中打开开关即可。

在主题配置文件中找到下列代码，去掉#，并把打赏图片和存放路径对应上即可。（/引导符号表示网站根目录）

reward_comment: 坚持原创，您的支持将鼓励我继续创作 
wechatpay: /images/wechat_money.jpg 
alipay: /images/alipay_money.jpg

把收钱码图片拷贝到主题或者网站目录的souces/images文件夹下面（跟上面对应）。

打开themes\next\layout\_macro\reward.swig文件，修改打赏按钮和图片下方的文字。

# 改动1：把下方的Donate改为赏,对应打赏按钮
<span>Donate</span> 

# 改动2  把p标签内的WetChar Pay改为微信打赏
{% if theme.wechatpay %}
  <div id="wechat" style="display: inline-block">
    <img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay"/>
    <p>WetChar Pay</p>  
  </div>
{% endif %}

# 改动3： 把p标签内的Alipay pay改为支付宝打赏
{% if theme.alipay %}
  <div id="alipay" style="display: inline-block">
    <img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay"/>
    <p>Alipay pay</p> 
  </div>
{% endif %}

打赏功能也支持其他比如比特币的打赏，只要文字，图片对应即可。

修正打赏说明文字闪动问题

当前主题中，当鼠标移动到打赏图片下方的文字上时，文字会非常怪异地闪动，如果不喜欢，可以修改去掉。

打开themes\next\source\css\_common\components\post\post-reward.styl文件。把其中的#wechat:hove p和#alipay:hover p以及#bitcoin:hover p样式采用双斜杠//注释掉。

//#wechat:hover p{
//    animation: roll 0.1s infinite linear;
//    -webkit-animation: roll 0.1s infinite linear;
//    -moz-animation: roll 0.1s infinite linear;
//}
//#alipay:hover p{
//    animation: roll 0.1s infinite linear;
//    -webkit-animation: roll 0.1s infinite linear;
//    -moz-animation: roll 0.1s infinite linear;
//}
//#bitcoin:hover p {
//    animation: roll 0.1s infinite linear;
//    -webkit-animation: roll 0.1s infinite linear;
//    -moz-animation: roll 0.1s infinite linear;
//}

设置网站博客肖像

打开 主题配置文件 找到Sidebar下面的Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径，只需把你的网站头像图片命名为header.jpg（其他名字也可以）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！

效果如图

设置页面动态背景

打开主题配置文件next/_config.yml，修改以下代码就可以了：

动态特效：该特效打开的是3条线段追踪鼠标

# Canvas-nest
canvas_nest: true

3D特效：该特效由三维js库提供的三维动态背景

# three_waves
three_waves: true

线条特效：该开关的打开，在背景上显示较长线条及小球。

canvas_lines: false

Spherical effects: a spherical display of the switch on the background pattern.

canvas_sphere: true

Special attention, these four effects, may be provided independently, can also be superimposed

Set up a website thumbnail icons

Generally the favicon.icolower the root directory on the web site, the browser will use the thumbnail.

With the development of the browser, as well as various constantly add their own custom content.

favicon:
  small: /images/favicon-16x16-next.png
  medium: /favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

Recommended icothumbnail format, other figures there may be compatibility issues.

Remove the title of the article directories automatic numbering

NexTThe title provides automatic numbering feature extraction, and turned on by default. If bloggers want to manage their own title number, you can turn off the automatic numbering function.
Open the theme configuration file , found.

toc:
  enable: true
  number: false

The numberback of the truemodification is false.

Custom head region background

In Prisse Theme in, is not the all-black does not make you very great, I am also unhappy.

I want a different effect, such as adding a background image. I subtitled "Facing the sea, the spring bloom chaos," I want a picture of the occasion.

Find the following themes\next\source\css\_custom\custom.stylfiles, add

.site-meta {
  background-image: url(/images/log-big.jpg);
  @media(min-width: 992px){
    background-image: url(/images/log-small.jpg);
    }
}

log-big.jpg may also be other names. log-big.jpgThe size 992×112, log-small.jpgthe size 240×112, the large display only part of a small covered can be repeated.

Note: In the bootstrap, the display device width <768px portable device, <992px small devices, <1200px conventional devices, greater than or equal 1200px wide screen device.

Under the effect of a normal state of FIG.

Under the effect of a narrow screen state in FIG.