Hexo建站美化笔记

发表于 | 更新于 | 分类于
本文字数： 16k | 阅读时长 ≈ 15 分钟

最近开始玩博客next 5.1.7 旧版版本 NexT v5.1.x 更新
，后面运行 hexo g 的时候老提示我升级，有强迫症的我又重新搭建了一下博客，升级到nexT主题更新到6.3.0备忘！！！下面是对hexo、nexT的配置文件进行详细的记录。这次准备把所用到的各个字段都进行记录，便于以后出现意外情况再次重建。hexo-theme-next

文章有点长来首音乐舒舒压

基本配置

语言设置

每个主题都会配置几种界面显示语言，修改语言只要编辑站点配置文件，找到 language 字段，并将其值更改为你所需要的语言(例如，简体中文)：

language: zh-CN

网站标题、作者

打开站点配置文件，修改这些值：

1
2
3
4
title: #博客标题
subtitle: #博客副标题
description: #博客描述
author:  #博客作者

注意：

配置文件要符合英文标点符号使用规范: 冒号后必须空格，否则会编译错误

域名与文章链接

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url:  #你的博客网址
root: / #博客跟目录，如果你的博客在网址的二级目录下，在这里填上
permalink: :year/:month/:day/:title/ # 文章链接
permalink_defaults:

用于配置Url请求时的主要属性，Url我进行了优化。修改如下：

安装启用主题

使用hexo init本地新建一个博客之后，下载最新的next主题。

1
2
$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

GitHub安装说明

安装后，我们要启用我们安装的主题，与所有Hexo主题启用的模式一样。 当克隆/下载完成后，打开站点配置文件， 找到 theme 字段，并将其值更改为 next 。

1
theme: next

主题风格

NexT 主题目前提供了3中风格类似，但是又有点不同的主题风格，可以通过修改 主题配置文件 中的 Scheme 值来启用其中一种风格，例如我的博客用的是 Pisces 风格，只要把另外两个用#注释掉即可:

1
2
3
4
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces

导航栏添加标签菜单

新建标签页面，并在菜单中显示标签链接。标签页面将展示站点的所有标签，若你的所有文章都未包含标签，此页面将是空的。

(1) 在终端窗口下，定位到 Hexo 站点目录下。使用如下命令新建一名为 tags 页面:

1
hexo new page "tags"

(2) 编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

1
2
3
title: 标签
date: 2017-12-22 12:39:04
type: "tags"

(3) 在菜单中添加链接。编辑 主题配置文件 ，添加 tags 到 menu 中，如下:

1
2
3
4
menu:
 		home: /
 		archives: /archives
 		tags: /tags

(4) 使用时在你的文章中添加如下代码：

1
2
3
4
5
6
7
---
title: title name
date: 2017-12-12-22 12:39:04
tags:
 	- first tag
 	- second tag
---

为了省事方便可以在hexo目录下\scaffolds\post.md添加相关的信息，每次打开新的页面，自动输入信息。根据需求自行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
photos: 
tags: 
categories:  
toc: true
mathjax: true
comments: true

---

<!--more-->

添加分类页面

新建分类页面，并在菜单中显示分类链接。分类页面将展示站点的所有分类，若你的所有文章都未包含分类，此页面将是空的。

(1) 在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories ：

1
hexo new page categories

(2) 编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

1
2
3
4
5
---
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

(3) 在菜单中添加链接。编辑 主题配置文件 ， 添加 categories 到 menu 中，如下:

1
2
3
4
menu:
 		home: /
 		archives: /archives
 		categories: /categories

(4) 使用时在你的文章中添加如下代码：

1
2
3
4
5
---
title: title name
date: 2017-12-12-22 12:39:04
type: "categories"
---

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中。

(1) 链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址 || 图标：

1
2
3
social:
 		GitHub: **************** || github
 		E-Mail: **************** || envelope

备注:如果没有指定图标（带或不带分隔符），则会加载默认图标。

(2) 设定链接的图标，对应的字段是 social_icons。其键值格式是: 匹配键: Font Awesome 图标名称， 匹配键与上一步所配置的链接的显示文本相同（大小写严格匹配），图标名称是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标:

1
2
3
4
5
6
7
# Social Icons
social_icons:
 		enable: true
 		# Icon Mappings
 		GitHub: github
 		Twitter: twitter
 		微博: weibo

友情链接

编辑 ·主题配置文件· 添加：

友情链接配置示例

1
2
3
4
5
6
7
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
 	CSDN: https://*****/*****

站点建立时间

这个时间将在站点的底部显示，例如© 2017 - 2018。 编辑 主题配置文件，新增字段 since:

1
2
配置示例
since: 2017

开启打赏功能

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要主题配置文件去掉注释并填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能：

1
2
3
4
5
# Reward
#reward_comment: 如果文章内容对你有帮助,您的支持将鼓励我继续创作！
#wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

设置阅读全文

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：
(1) 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式推荐
(2) 在文章的 front-matter 中添加 description，并提供文章摘录
(3) 自动形成摘要，在 主题配置文件 中添加：

1
2
3
auto_excerpt:
 		enable: true
 		length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

建议使用 <!-- more -->（即第一种方式），除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。（本站采用方式）

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成 <i class="fa fa-tag"></i>

站内搜索

NexT 支持集成 Swiftype、 微搜索、Local Search 和 Algolia。在这里我使用的是Local Search，下面将介绍如何使用:

(1) 添加百度/谷歌/本地 自定义站点内容搜索，安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
npm install hexo-generator-searchdb --save

(2) 编辑 站点配置文件，添加文件：

1
2
3
4
5
6
#Local Search
search:
	path: search.xml
	field: post 
	format: html 
	limit: 10000

(3) 编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
 		enable: true

其他搜索方式请查看搜索服务

文章图片

文章插入图片

利用标签引用（未使用）

markdown引用 本站采用方式

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
2
_config.yml
post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件（笔者在尝试Hexo3的标签时出现了一些错误还未解决，因此暂不演示该种方式来引用图片）

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法![](/example.jpg)，它将 不会 出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

1
{% asset_img example.jpg This is an example image %}

通过这种方式，图片将会同时出现在文章和主页以及归档页中。

利用makdown引用（插入本地图片）

安装 

1
npm install hexo-asset-image --save

之后就可以按照正常的方法使用的，比如：

1
我现在写了一个段落，并且想在这个段落的某一个地方[图片上传失败...(image-43fc5f-1510018038370)]引入一张图片

不蒜子统计（未开启）

备注：
此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

(1) 全局配置。编辑 主题配置文件 中的 busuanzi_count的配置项。当enable: true 时，代表开启全局开关。若 site_uv 、site_pv 、page_pv 的值均为 false 时，不蒜子仅作记录而不会在页面上显示。

(2) 站点UV配置。当 site_uv: true时，代表在页面底部显示站点的UV值。site_uv_header 和 site_uv_footer 为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为 [site_uv_header]UV值[site_uv_footer]。

1
2
3
4
# 效果：本站访客数12345人次
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次

(3) 站点PV配置。当 site_pv: true时，代表在页面底部显示站点的PV值。site_pv_header 和 site_pv_footer 为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为 [site_pv_header]PV值[site_pv_footer]。

1
2
3
4
# 效果：本站总访问量12345次
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次

(4) Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
	 # count values only if the other configs are false
	 enable: true
	 # custom uv span for the whole site
	 site_uv: true
	 site_uv_header: <i class="fa fa-eye"></i> 本站访客数
	 site_uv_footer: 次
  # custom pv span for the whole site
	 site_pv: true
	 site_pv_header: 本站总访问量
	 site_pv_footer: 次
	 # custom pv span for one page only
	 page_pv: false
	 page_pv_header: <i class="fa fa-file-o"></i>
	 page_pv_footer:

leancloud阅读次数统计（未开启）

GitHub官方文档

相关注意事项请参考Doublemine的为NexT主题添加文章阅读量统计功能

(1) 先在 leancloud 官网上注册账号获取 app_id 、app_key

(2) 终端窗口下，定位到 Hexo 站点目录下输入一下命令

1
npm install hexo-leancloud-counter-security --save

(3) 打开hexo站点文件_config.yml

1
2
3
4
5
6
leancloud_counter_security:
 	  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  username: <<your username>> # Will be asked while deploying if is left blank
  password: <<your password>> # Recommmended to be left blank. Will be asked while deploying if is left blank

(4) 打开next主题文件_config.yml

1
2
3
4
5
6
7
leancloud_visitors:
  enable: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  security: true    # 不开启安全性的话选择：false
  betterPerformance: false

说明不开启安全性的情况下，直接选择步骤4就可以了！！！

symblos_count_time配置用于站点字数、阅读时间统计等。

symblos_count_time在6.0.0以上版本替换了word_count，详细配置
hexo根目录执行

1
$ npm install hexo-symbols-count-time --save

（1）站点文件

1
2
3
4
5
6

symbols_count_time:
		symbols: true
 		time: true
 		total_symbols: true
 		total_time: true

（2）主题文件 

1
2
3
4
5
6
symbols_count_time:
 		separated_meta: true
 		item_text_post: true
 		item_text_total: false
 		awl: 4
 		wpm: 275

优化加载速度

为了提高网站的加载速度，使用gulp对博文中的js、css、img等文件进行压缩。
在博客的根目录执行以下命令

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

然后在根目录中新建文件 gulpfile.js，并填入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
   return gulp.src('./public/**/*.css')
       .pipe(minifycss())
       .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
 	return gulp.src('./public/**/*.html')
   	.pipe(htmlclean())
   	.pipe(htmlmin({
        	removeComments: true,
        	minifyJS: true,
        	minifyCSS: true,
        	minifyURLs: true,
   	}))
   	.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
   	return gulp.src('./public/**/*.js')
       	.pipe(uglify())
       	.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
   	'minify-html','minify-css','minify-js'
])

生成博文是执行hexo g && gulp就会根据gulpfile.js中的配置，对public目录中的静态资源文件进行压缩。

评论系统

来必力

首先要注册来必力帐号，并获取用户的UID（查看具体方法）。
然后打开主题目录的配置文件/next/_config.yml，定位到livere_uid字段，将UID填入即可

1
2
3
4
5
	# Support for LiveRe comments system.
	# You can get your uid from https://livere.com/insight/myCode (General web site)
	#livere_uid: your uid
	livere_uid: MTAyMC8z111111111  #例如
至此，其他人就可以使用评论系统进行评论。

Valine

来必力是韩国人开发的评论系统，一方面国内加载速度慢，另一方面评论需要登录，因此自己将博客的评论系统更换为Valine。有关Valine可以参考官方文档与原作者的博客：Valine – 一款极简的评论系统。

为 Hexo 博客 Next 主题添加 Valine 系统可以参考博客为你的 Hexo 加上评论系统-Valine。

主要有以下步骤：

  • 登录LeanCloud帐号，创建一个app应用，名字随便写
  • 将App Id 和 App Key 配置到主题的配置文件valine字段下
1
2
3
4
5
6
7
8
9
10
valine:
  enable: true
  appid: your app id # your leancloud application appid
  appkey: your app key  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! 
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

注意：不同版本的主题app_id 和 app_key 这两个字段名是不一样的，复制的时候一定要看清楚。5.1.3版本字段名称是：appid 、appkey， 6.0.1版本的字段名称是：app_id、app_key。

底部版权声明

直接在next主题文件吧 false 改为 true

1
2
3
4
# Declare license on posts
post_copyright:
  enable: true  
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

FancyBox——jQuery弹出窗口插件

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

如果之前的是fancybox 2，要先删除fancybox，目录为themes/next/source/lib/fancybox,

下载模块

1
$ git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

在next主题_config.yml中 false 改为 true 

1
2
3
4
5
# Fancybox. There is support for old version 2 and new version 3.
# Please, choose only any one variant, do not need to install both.
# For install 2.x: https://github.com/theme-next/theme-next-fancybox
# For install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

添加热度

NexT主题集成leanCloud，打开/themes/next/layout/_macro/post.swig， 搜索leancloud-visitors-count， 添加以下内容：

1
2
<span class="leancloud-visitors-count"></span>  // 在此处后面添加
<span>℃</span>

打开/themes/next/languages/zh-Hans.yml， 将visitors的内容改为热度即可。

文章加密功能

二选一，自由选择

(1)hexo-encypt配置用于文章加密。启用文章加密需要安装
hexo-blog-encrypt，在hexo根目录下执行

1
npm install hexo-blog-encrypt --save

找到根目录下的_config.yml文件，添加如下：

1
2
3
# Security
encrypt:
    enable: true

启用加密功能需要在文章的Front-matter部分添加password字段即可。建议修改post.md模版，目录为hexo\scaffolds\。

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
password:          #文章密码
abstract:          #文章摘要
message:           #密码提示
---

官方文档说明

(2)打开/themes/next/layout/_partials/head.swig， 在meta标签后面插入这样一段代码：

1
2
3
4
5
6
7
8
9
10
<script>
   	(function(){
       	if('{{ page.password }}'){
           	if (prompt('请输入文章密码') !== '{{ page.password }}'){
               alert('密码错误！');
               history.back();
           	}
       	}
   	})();
</script>

然后文章中添加：password: 00000如下：

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
password:          #文章密码

---

如果 password 后面为空，则表示不用密码。

live2d配置

用于站点吉祥物设置，作用应该是美化站点吧。手动/斜眼笑！
想要吉祥物的话需要先安装hexo-helper-live2d，在hexo根目录下执行

1
$ npm install --save hexo-helper-live2d

Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

详情请看官方文档。

footer设置

用于页脚设置，nexT6.3.0可以在配置文件中设置页脚。以前用5.X的时候，需要自己手工去修改。所以及时更新很重要哦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
footer:
 	# Specify the date when the site was setup.
 	# If not defined, current year will be used.
 	#since: 2015

 	# Icon between year and copyright info.
 	icon: heart 
   # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
   # `heart` is recommended with animation in red (#ff0000).
   name: user
   # If you want to animate the icon, set it to true.
   animated: false
   # Change the color of icon, using Hex Code.
   color: "#808080"

 	# If not defined, will be used `author` from Hexo main config.
 	copyright:
 	# #------------------------------------------------------
 	powered:
   # Hexo link (Powered by Hexo).
   enable: true
   # Version info of Hexo after Hexo link (vX.X.X).
   version: true

 	theme:
   # Theme & scheme info link (Theme - NexT.scheme).
   enable: false 
   # Version info of NexT after scheme info (vX.X.X).
   version: false
 	# -------------------------------------------------------------
 	# Any custom text can be defined here.
 	#custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>

Code Highlight theme设置

用于代码主题设置。
先在站点目录设置_config.yml

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

再到主题目录设置_config.yml

1
highlight_theme: night

注意事项直接使用 Tab 缩进代码是不会显示代码序号的，显示代码序号需要在一段代码前后加入小斜点

数学代码设置

后期应该会用 KaTeX 替代 MathJax

Next主题中已集成hexo-renderer-marked插件，直接通过将主题 _config.yml 文件中搜索 math 选项enable设为 true 来打开方可。

1
2
3
4
5
6
math:
  enable: true 
  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: true

别着急，这样还不够，还需要在文章的Front-matter里打开mathjax开关，如下：

1
2
3
4
5
6
---
title: index.html
date: 2018-07-23 21:01:30
tags:
mathjax: true
--

Url持久化

  • 我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】
  • 使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。

打开站点配置文件_config.yml

搜索关键词permalink定位，可以看到默认的配置是：

permalink: :year/:month/:day/:title/

将其修改为

permalink: posts/:urlname/

urlname是在每篇博客的Front-matter中定义的一个变量。也是为每篇博客取的英文名字。

本篇文章的Front-matter如下

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hexo建站美化笔记
toc: true
mathjax: true
comments: true
tags:
  - Hexo
categories:
  - 笔记
date: 2018-07-25 
urlname: hexo-website-landscaping-notes
---

本文的URL就变成了hexo-website-landscaping-notes

这样的好处就是可以自由修改文章的title，URL保持不变同时文章图片链接也不会改变。

  • _post文件夹的优化

本博客对博客的.md文件直接存放在_post文件夹下的一级目录中，不设其他文件夹。理由有2：

  1. 博客的文章不会写太多，几百篇就很骄傲了。
  2. 对博客文件的命名采用时间+中文名字的方式，这样就可以自动按时间排序，一目了然。

例如本文的.md文件的文件名就是：20180725-Hexo建站美化笔记.md

然后在Front-matter的title中对自动生成的标题进行修改，去掉时间前缀20180725。

npm install hexo-abbrlink --save

配置站点_config.yml

1
2
3
4
5
# permalink: :title/  将之前的注释掉
permalink: archives/:abbrlink.html  #  自定义/:abbrlink.html   
abbrlink:
  alg: crc16  # 算法：crc16(default) and crc32
  rep: dec    # 进制：dec(default) and hex

安装 hexo-translate-title(不建议采用)

npm install hexo-translate-title --save

修改站点主题

1
2
3
4
5
6
7
8
9
10
translate_title:
  translate_way: google  # google,youdao,baidu_with_appid,baidu_no_appid
  is_need_proxy: false     # true | false
  # proxy_url: http://localhost:50018 # Your proxy_url
  # youdao_api_key: '' # Your youdao_api_key
  # youdao_keyfrom: xxxx-blog # Your youdao_keyfrom
  # baidu_appid: '' # Your baidu_appid
  # baidu_appkey: '' # Your baidu_appkey
# 修改原链接格式：permalink: :year/:month/:day/:title/
permalink: :year:month:day/:translate_title.html

~~

如果配置文件post_asset_folder: true 和安装插入本地图片 hexo-asset-image插件再安装以上两款插件会导致本地图片直接无法显示，外链显示正常。图片位置更改为source/images/xx下正常显示。

参考博客

  1. hexo的next主题个性化教程:打造炫酷网站
  2. Hexo博客Next主题优化总结
  3. Hexo搭建博客教程
  4. HEXO的站内链接和永久链接
  5. hexo博客的URL优化
  6. 从WordPress迁移到Hexo

总结

配置文件字段名和字段值中间需要空格;
部分插件安装、配置Hexo、nexT都需进行；
文章中存在特殊符号，需要使用三个单引号以代码形式，不然会报错；
所有配置文件icon都可以在fontawesome选择心仪的，替换即可；