Better late than never

Hexo+NexT博客搭建

置顶 | 发表于 更新于 分类于 ， 评论数：
本文字数： 30k 阅读时长 ≈ 27 分钟

安装

  1. 简介
  • Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
  • 详细内容请查看Hexo官方文档
  1. 安装

安装Hexo前，需先安装下列应用程序：

  • Node.js (Node.js 版本需不低于8.6，建议使用 Node.js 10.0 及以上版本)
  • Git

安装完成之后，在Git Bash命令行输入下列命令即可自行下载安装hexo

1
$ npm install -g hexo-cli

建站

  1. 安装Hexo完成后，执行下列命令，Hexo将会在指定文件夹中新建所需要的文件。
1
2
3
$ hexo init <folder>
$ cd <folder>	
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

  • hexo相关命令均在站点目录下，用Git Bash运行。

  • 站点配置文件：站点目录下的_config.yml。路径为<folder>\_config.yml

  • 主题配置文件：站点目录下的themes文件夹下的，主题文件夹下的_config.yml。路径为<folder>\themes\<主题文件夹>\_config.yml

  1. 修改站点配置文件，以下信息都在站点配置文件中，具体内容根据用户自身情况修改。
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。使用半角逗号 , 分隔多个关键词。
author 您的名字
language 网站使用的语言，简体中文为 zh-CN
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
pretty_urls 改写 permalink 的值来美化 URL
pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html，设置为 false 时去除 true

此外站点配置文件中的new_post_name参数是设置通过命令行的方式新建文章时该文章所对应.md文件的名字，例如你可以修改为：

1
2
3
# Writing
# File name of new posts
new_post_name: :year-:month-:day-:title.md
  • 网站存放在子目录

如果您的网站存放在子目录中，例如 http://yoursite.com/blog， 则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为/blog/。

1
2
3
4
# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
	trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/
  1. 启动服务器。在路径下，命令行（即Git Bash）输入以下命令，运行即可：
1
$ hexo server

或简写为：

1
$ hexo s
  1. 浏览器访问网址： http://localhost:4000/，便可预览Hexo博客。

部署

  1. 在你的GitHub账号里新建仓库， 仓库名为：<Github账号名称>.github.io，并添加SSH key。

  2. 修改_config.yml（在站点目录下）。文件末尾修改为：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
	type: git
	repo:  https://github.com/<Github账号名称>/<Github账号名称>.github.io.git
	branch: master
  1. 安装hexo-deployer-git插件。在命令行（即Git Bash）运行以下命令即可：
1
$ npm install hexo-deployer-git --save
  1. 推送到GithubPages。在命令行（即Git Bash）依次输入以下命令， 返回INFO Deploy done: git即成功推送：
1
2
$ hexo g
$ hexo d

或输入

1
$ hexo g -d

或输入

1
$ hexo d -g
  1. 等待1分钟左右，浏览器访问网址：https://<Github账号名称>.github.io

选择主题

应用主题

  1. 将下载好的主题文件夹，粘贴到站点目录的themes下。
  2. 更改站点配置文件_config.yml 的theme字段，为主题文件夹的名称：
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主题文件夹的名称>

主题优化

以下均为 Next 7+ 版本的主题优化，Next主题配置文件中已经提供了很多功能，需要使用时只需稍微修改即可。

设定站点建立时间

  • 打开themes/next/下的_config.yml，查找since（默认为当前年份）：
1
2
3
4
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2019

设置主题风格

  • 打开themes/next/下的_config.yml，查找Schemes，根据个人爱好选择不同的主题风格，将前面的注释“#”删除即可应用该风格。
1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

设置代码高亮主题

  1. 在站点配置文件中的highlight字段可以设置代码格式：
1
2
3
4
5
6
7
highlight:
  enable: true
  # 是否显示行号
  line_number: true
  # 自动识别，不同类型的标识符显示不同颜色，设置为false时代码只有一种颜色
  auto_detect: true
  tab_replace: ''
  1. NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties，依次如下图所示：

  • 更改主题配置文件中的 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，copy_button.style字段可以设置代码块复制按钮的风格，例如：
1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available value: normal | night | night eighties | night blue | night bright
  # https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true                 # 在每个代码块显示复制按钮
    # Show text copy result.
    show_result: true            # 复制成功后，显示提示信息
    # Available values: default | flat | mac
    style: mac                   # 复制按钮风格

代码块Mac Panel特效

  1. 在上述设置代码高亮主题中将copy_button设为 true，并将style设置为 mac；

  2. 打开F:\themes\next\source\css\_common\scaffolding\highlight\copy-code.styl文件，做如下修改，具体值可自行设定：

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
34
35
36
37
38
39
40
41
42
43
44
45
46
if (hexo-config('codeblock.copy_button.style') == 'mac') {
  .highlight-wrap {
    background: #21252b;
    border-radius: 5px;
    padding-top: 33px;
    position: relative;
    box-shadow: 18px 18px 15px 0px rgba(0, 0, 0, 0.4);
    margin: 35px 0;
    margin-top: 10px;
    margin-bottom: 28px;

    ::-webkit-scrollbar {
      height: 10px;
    }

    ::-webkit-scrollbar-track {  /*滚动条框*/
      -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 10px rgba(150, 150, 150, 0.5);
    }

    &::before {
      background: #fc625d;
      border-radius: 50%;
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
      content: ' ';
      height: 12px;
      left: 16px;
      margin-top: -22px;
      position: absolute;
      width: 12px;
    }
  }

  /*代码块圆角边框设置*/
  .highlight {
    border-radius: 5px;
  }
  .table-container {
    border-bottom-left-radius: 5px;
  }
}

设置文本框圆角边框

  • 在\themes\next\source\css\_variables目录下边，根据自己选择的主题风格打开相应的文件，修改相关参数即可：
1
2
3
4
// $border-radius-inner     = initial;
// $border-radius           = initial;
$border-radius-inner   = 15px;
$border-radius         = 15px;

设置板块透明度

  1. 打开themes\next\source\css\_schemes目录，根据自己选择的主题风格，进入相应的目录，分别打开相应版块的文件，修改background参数：
1
background: rgba(255,255,255,0.6);  //0.6是透明度，可自行修改

设置头像

  • 打开themes/next/下的_config.yml，查找avatar
1
2
3
4
5
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  rounded: false    # 如果为true，则头像将显示为圆形。
  rotated: false    # 如果为true，则头像将随着光标旋转。

添加背景图片

  1. 将背景图片放在 themes/next/source/images 目录下；

  2. 在 themes/next/source/css/_schemes/ 目录下自己选择的主题下的 index.styl 文件中添加以下代码：

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//添加背景图片
body {
    background: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
}

//设置表格透明度
table {
    opacity: 0.9;
}

//设置标题字体大小
h1 {
    font-size: 1.6em;
}

//设置按钮样式
.btn {
    background: #f4f4f4;
    border: 1px solid #555;
    border-radius: 6px;
    color: #555;
    font-size: 0.9em;
    opacity: 0.8;
}

//侧边栏背景颜色及透明度
.sidebar {
    background: rgba(255,255,255,0);
}

//侧边栏社交连接字体大小
.links-of-author {
    font-size: 0.7em;
}

//侧边栏头像下边日志/分类/标签字体大小
.site-state {
    font-size: 0.9em;
}

//设置侧边栏目录字体大小
.sidebar-inner {
    font-size: 1.38em;
}

//回到顶部按钮边框及透明度
.back-to-top.back-to-top-on {
    opacity: 0.8;
    border-radius: 15px;
}

//代码块透明度
.highlight-wrap {
    opacity: 0.95;
}

//版权声明透明度
.post-copyright {
    opacity: 0.8;
}

//最底部信息字体大小
.footer-inner {
    font-size: 1.21em;
}

设置动画效果

  • NexT 默认开启动画效果，效果使用 JavaScript 编写，因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 如果您比较在乎速度，可以将设置此字段的值为 false 来关闭动画。

  • 编辑 主题配置文件， 搜索 use_motion，根据您的需求设置值为 true 或者 false 即可：

1
2
use_motion: true  # 开启动画效果
use_motion: false # 关闭动画效果

设置背景动画

共有两种动画，其中three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

  • 第一种
  1. 下载插件
1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
  1. 编辑主题配置文件，搜索 canvas_nest 
1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: false # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.6 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines
  • 第二种

  1. 进入theme/next目录

  2. 执行命令：

1
git clone https://github.com/theme-next/theme-next-three source/lib/three
  1. 将themes/next/_config.yml中查找three字段，将想要的效果改为true即可：
1
2
3
4
5
6
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

添加背景音乐

  1. 修改 themes/next/layout/_macro/sidebar.swig 文件，在如下位置添加音乐播放器内容：
1
2
3
4
5
6
7
8
9
10
11
12
<div class="site-overview-wrap sidebar-panel">
  {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

  {{- next_inject('sidebar') }}
</div>
	  
<!--以下为新增内容-->
<div>
  {% if theme.background_music %}
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=210 height=88" src="{{ theme.background_music }}"></iframe>
  {% endif %}
</div>

  1. 注册网易云账号，新建歌单，添加音乐，获取歌单的外链；

  2. 将复制出的代码中src字段的内容加入themes/next/_config.yml 配置文件中，将height=90改成66，具体格式如下：

1
background_music: //music.163.com/outchain/player?type=0&id=4261269969&auto=1&height=66"

  • 这样以后只需要修改网易云音乐的歌单，博客的背景音乐就会自动修改了。

  • 如果出现音乐不自动播放，那是资源的问题，自己上网易云音乐生成外链的页面看看会不会自动播放。把坏资源删除就OK了。

主页轮播图

关于如何添加主页轮播图在另一篇文章【在Hexo+NexT博客中添加主页轮播图】有详细介绍。

设置鼠标点击特效

关于如何设置鼠标点击特效在另一篇文章【在Hexo+NexT博客中设置鼠标点击特效】有详细介绍。

修改中文字体

  1. 前往 Google Fonts 查看合适的字体
  2. 打开 themes/next/ 下的 _config.yml，查找 font
1
2
3
4
5
6
7
8
font:
	enable: true
	 # Uri of fonts host. E.g. //fonts.googleapis.com (Default). 修改为墙内镜像
	host: https://fonts.loli.net
	global:
		external: true
		family: Noto Serif SC // 挑选的字体
		size:
  1. 修改 /themes/next/source/css/_variables/base.styl
1
2
$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')

将以上代码修改为：

1
2
$font-family-monospace    = consolas, Menlo, $font-family-base, monospace
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')

修改字体大小

  • 在themes/next/_config.yml中搜索Font，可以修改。
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
font:
  enable: true
  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:
  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda
  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab
  # 文章字体
  posts:
    external: true
    family:
  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24
  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono
  • 上述方法不太理想，还可以在themes\next\source\css\_variables\base.styl中修改。
1
2
3
4
5
6
7
8
9
// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : .75em;  //整体大小
$font-size-smallest       = .7em;         //首页阅读时长等
$font-size-smaller        = 1.11em;       //侧边栏（归档等）
$font-size-small          = .82em;        //侧边栏目录、阅读全文按钮、文中表格及代码块
$font-size-medium         = 1em;          //头像下边日志、分类、标签
$font-size-large          = 1.3em;        //首页文章标题及文章内容
$font-size-larger         = 1.25em;
$font-size-largest        = 2em;          //用户名

设置菜单及页面

  • 打开 themes/next/ 下的 _config.yml，查找 menu，去掉#注释即可显示对应的菜单项，也可自定义新的菜单项。 ||之前的值是目标链接，之后的是分类页面的图标，图标名称来自于 FontAwesome icon。若没有配置图标，默认会使用问号图标。
1
2
3
4
5
6
7
8
9
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
  • 新添加的菜单需要翻译对应的中文，打开 hexo/theme/next/languages/zh-CN.yml，在 menu 下自定义，如：
1
2
menu:
  download: 下载

创建分类页面

  1. 将主题配置文件中 menu 下方 categories 前的注释去掉。

  2. 在终端窗口下，定位到 Hexo 站点目录下，新建：

1
2
$ cd <站点目录>
$ hexo new page categories

此时在根目录的source文件夹下会生成一个categories文件，文件中有一个index.md文件，修改内容如下：

1
2
3
4
5
6
---
title: 分类
date: 2017-12-14 13:05:38
type: "categories"
comments: true
---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

创建标签页面

  1. 将主题配置文件中 menu 下方 tags 前的注释去掉。

  2. 在终端窗口下，定位到 Hexo 站点目录下，新建：

1
2
$ cd <站点目录>
$ hexo new page tags
  • 启用/关闭评论同创建分类页。
  1. 一篇文章有多个标签时按下面的格式填写：
1
2
3
4
5
6
---
title: 标签测试文章
tags:
  - Testing
  - Another Tag
---

创建关于页面

  1. 将主题配置文件中 menu 下方 about 前的注释去掉。

  2. 在终端窗口下，定位到 Hexo 站点目录下，新建：

1
2
$ cd <站点目录>
$ hexo new page about

此时在根目录的 source 文件夹下会生成一个 about 文件，文件中有一个index.md文件，修改内容如下：

1
2
3
4
5
---
title: 个人简介
comments: true
date: 2020-07-18 16:12:21
---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

修改标签样式

博客底部的标签样式默认为#tag，我们可以将其改成：

在 /themes/next/layout/_macro/post.swig文件中搜索 rel=”tag”>：

1
<a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>

修改为：

1
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

归档/标签/分类页美化

关于归档/标签/分类页的美化在另一篇文章【Hexo+NexT博客归档/标签/分类页美化】有详细介绍。

设置侧边栏

  • 设置显示位置：打开themes/next/下的_config.yml，查找sidebar
1
2
3
sidebar:
position: left
#position: right
  • 设置显示时机：
1
2
3
4
5
6
7
8
#post - 默认行为，在文章页面（拥有目录列表）时显示
#always - 在所有页面中都显示
#hide - 在所有页面中都隐藏（可以手动展开）
#remove - 完全移除
display: post
#display: always
#display: hide
#display: remove

侧边栏目录

  • 修改主题配置文件中的toc字段即可：
1
2
3
4
5
6
7
8
9
# Table of Contents in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  wrap: true          # 如果为true，则如果标题宽度长于边栏宽度，则将剩余标题内容放置在下一行。
  expand_all: false   # 如果为true，则将显示帖子中所有级别的目录，而不是帖子中已激活的部分。
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
  max_depth: 6

侧边栏滚动条样式

默认的侧栏滚动条其实挺丑的，添加如下代码重新渲染页面就可以修改侧栏滚动条了。

文件位置：/themes/next/source/_schemes/ 相应主题的 index.styl文件：

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
34
35
/*更好的侧边滚动条*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
  display: none;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
  width: 10px;
  height: 10px;
  /*background: url(../images/scrollbar_arrow.png) no-repeat 0 0;*/  /*可以添加滚动条样式*/
}

侧边栏社交链接

  1. 链接放置在主题配置文件中的 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。
1
2
3
4
5
6
7
8
# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等
  1. 设定链接的图标，对应的字段是 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

侧边栏友情链接

  • 修改主题配置文件中的link字段即可：
1
2
3
4
5
# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

腾讯公益404页面

  • 腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 http://www.ixirong.com/404.html

  • 使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

生成唯一文章链接

  1. 首先需要安装一个插件，用于根据帖子标题生成静态帖子链接，博客站点下执行下面命令：
1
npm install hexo-abbrlink --save
  • 执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…
    使用npm命令安装即可，比如 npm install eslint@4.x babel-eslint@8 –save-dev
  1. 修改站点配置文件 config.yml 文件中的永久链接：
1
permalink: posts/:abbrlink.html
  1. 在 permalink 下面写入下面的内容：
1
2
3
4
# abbrlink config
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

回到顶部按钮

  1. NexT主题自带的样式：
  • 在themes/*/_config.yml中搜索back2top，将enable属性的false改为true即可：
1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
  1. 自定样式：

  • 将上一步的 sidebar 设置为 false；

  • 在 themes/next/source/css/_schemes/(自己选的相应主题)/index.styl 文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.back-to-top {
  //right: 60px;
  width: 70px;  //图片素材宽度
  height: 900px;  //图片素材高度
  top: -900px;
  bottom: unset;
  transition: all .5s ease-in-out;
  background: url("/images/scroll.png");
  //隐藏箭头图标
  > i {
    display: none;
  }
  &.back-to-top-on {
    bottom: unset;
    top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
  }
}
  • 修改 background 里的 url 地址，下载图片 保存为 scroll.jpg 放到 themes/next/source/images 目录下边

阅读进度条

  • 在themes/*/_config.yml中搜索reading_progress，修改相关信息：
1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top        # 进度条在页面中显示的位置：顶部/底部
  color: "#37c6c0"     # 进度条颜色
  height: 3px          # 进度条宽度

页面加载进度条

  1. 进入博客文件夹的/themes/next文件夹下

  2. 下载安装 Progress module，如下：

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  1. 在/themes/next/_config.yml中设置，如下
1
2
3
4
5
6
7
8
9
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: flash

添加搜索功能

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
1
$ npm install hexo-generator-searchdb --save
  1. 编辑站点配置文件，新增以下内容到任意位置（7.5+版本不加也可以）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# see https://github.com/theme-next/hexo-generator-searchdb
search:
  # file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
  path: search.xml
  #  the search scope you want to search, you can chose:
  #    post (Default) - will only covers all the posts of your blog.
  #    page - will only covers all the pages of your blog.
  #    all - will covers all the posts and pages of your blog.
  field: post
  # the form of the page contents, works with xml mode, options are:
  #    html (Default) - original html string being minified.
  #    raw - markdown text of each posts or pages.
  #    excerpt - only collect excerpt.
  #    more - act as you think.
  format: html
  #define the maximum number of posts being indexed, always prefer the newest.
  limit: 10000
  # whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.
  content: true
  1. 编辑 主题配置文件，启用本地搜索功能：
1
2
3
# Local search
local_search:
  enable: true

博文置顶

  1. 安装插件
1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
  1. 然后在需要置顶的文章的Front-matter中加上top（正数）即可，top值越大的越靠前显示。
1
2
3
title: 2018
date: 2018-10-25 16:10:03
top: 10
  1. 设置置顶标志，打开：/themes/*/layout/_macro/post.swig，定位到<div class=”post-meta”>标签下，插入以下代码即可：
1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=green>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

自定义样式博文加密

  1. 在目录 /themes/next/layout/ 下的 _layout.swig 中，找到main标签添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<main id="main" class="main">
  <div class="main-inner">
    <div class="content-wrap">
      <div id="content" class="content">
        {% block content %}{% endblock %}
      </div>
      {% include '_third-party/duoshuo-hot-articles.swig' %}
      {% include '_partials/comments.swig' %}
    </div>
    {% if theme.sidebar.display !== 'remove' %}
      {% block sidebar %}{% endblock %}
    {% endif %}
  </div>

 <!-- 此处为新加的代码 -->
 {% include 'password.swig' %}

</main>
  1. 在目录 /themes/next/layout/ 下创建 password.swig ，内容如下：
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<script>
    //暂时储存文章中的内容
    var div = $('.post-body');
    //暂时储存目录的内容
    var toc=$('.post-toc');
    function password() {
        if('{{ page.password }}'){
            //将文章内容删除
            div.remove();
            //将目录删除
            toc.remove();
            //将文章删除后，向原来文章的地方添加，应该出现的提示用户输入密码的样式
            //下面这里的第一个用textarea是因为如果在手机端的时候只能显示一部分文字，
            //只是拓展:input里面的字只能显示一行，不会自动换行，目前上网搜索没有发现好的办法，所以用了textarea，右下角的小三角通过resize:none 去掉。
            $('.post-header').after(
            '<span class="description" value="请输入密码，然后按 Enter 键阅读" style="font-style: oblique;font-weight: bold;border: none;display: block;'+
            'width: 60%;margin: 0 auto;text-align: center;outline: none;margin-bottom: 40px;resize:none ">'+
            '<i class="fa fa-heartbeat" id="myheartbeat"></i>'+
            ' 请输入密码，按回车键进入 ' +
            '<i class="fa fa-heartbeat" id="myheartbeat"></i>'+
            '</span>' +
            '<div class="qiang" style="height: 100px;width: 60%;margin:0 auto">' +
            '<input class="password"  type="password" autocomplete="new-password" autofocus="autofocus" value="" style="border-radius: 5px;height: 30px;border: none;display: block;border-bottom: 1px solid #ccc;' +
            'margin: 0 auto;outline: none;width:95%"/>' +
            '</div>')
            //绑定点击事件，如果是点击的.password 这个div就改变样式，如果是document中除了div之外的其他任何元素，就变回原来的样式。
            document.onclick = function (event) {
                var e = event || window.event;
                var elem = e.srcElement || e.target;

                while (elem) {
                    if (elem != document) {
                        if (elem.className == "password") {
                            //$(".password").animate({paddingTop:"30px",width:"100%",borderWidth:"2px"},300)
                            return;
                        }
                        elem = elem.parentNode;
                    } else {
                        //$(".password").animate({paddingTop:"0px",width:"95%",borderWidth:"1px"},300)
                        return;
                    }
                }
            }
            //绑定enter键按下后离开的事件
            $(document).keyup(function(event){
                if(event.keyCode ==13&&$('.password').length>0){
                    //console.log($('.password').val())
                    //console.log('{{ page.password }}')
                    if ($('.password').val() == '{{ page.password }}') {
                        //恢复文章内容
                        (div).appendTo($(".post-header"))
                        //恢复目录
                        toc.appendTo($(".sidebar-inner"))
                        //删除本页面的输入密码组件
                        $(".description").remove();
                        $(".qiang").remove();
                        $(".password").remove();

                        //重新处理pjax事件,如果没有加pjax的从下面这行起到下面的else之间的代码需要去掉。
                        //图片懒加载，没有加入此功能的这个函数需要去掉
                        $('img').lazyload({
                            placeholder: '/images/loading.gif',
                            effect: 'fadeIn',
                            threshold : 100,
                            failure_limit : 20,
                            skip_invisible : false
                        });
                        //pjax后出现文章不显示，没有pjax的下面四行需要去掉
                        $(".post-block").css({opacity:1});
                        $(".post-header").css({opacity:1});
                        $(".post-body").css({opacity:1});
                        $(".pagination").css({opacity:1});
                    }else {
                        alert("对不起，密码输入错误。")
                    }
                }
                //将document的keyup移除，防止在pjax的情况下会重复绑定事件
            });
        }
    }
    password();
</script>
  1. 使用方法：在文章开头加上password字段并设置密码即可，如下所示：
1
2
3
4
5
---
title: 测试
date: 2019-03-30 21:18:02
password: aaa
---
  • 实现效果如下图所示：

  • 注意：如果自己的博客源码中的这篇文章上传到 github ，密码也就公诸于世了，可以在 push 到 github 的时候将这篇文章忽略。

首页显示文章摘要

  • 打开themes/next/下的_config.yml，查找excerpt
1
2
3
auto_excerpt:    # 自动摘录
  enable: false
  length: 150    # 摘录字数

添加书签

  • 在 themes/next/ 下的 _config.yml 文件中搜索 bookmark，修改相关信息：
1
2
3
4
5
6
7
8
9
# Bookmark Support
bookmark:
  enable: true
  # 书签颜色
  # color: "#222"
  color: "#e8e8e8"
  # 如果为auto，请在关闭页面或单击书签图标时保存阅读进度。
  # 如果为manual，则只能通过单击书签图标进行保存。
  save: auto

阅读更多按钮

  • 打开themes/next/下的_config.yml，查找read_more_btn：
1
read_more_btn: true //显示全文按钮
  • 在文章中添加<!–more–>，其后面的内容在主页将不显示。

设置图片可放大

  1. 打开站点配置文件_config.yml，搜索fancybox字段，设置其值为true

  2. 进入到theme/text/文件夹下，打开git bash

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

    注：Next 7.5及以上版本不必下载。

添加评论系统-Valine

  1. 我们的评论系统其实是放在Leancloud上的，因此首先需要去注册一个Leancloud账号

  2. 创建一个应用，名字可以随便起，然后进入应用->设置->应用key，获取appid和appkey

  3. 打开主题配置文件，搜索valine，填入appid和appkey：

1
2
3
4
5
6
7
8
9
valine:
  enable: true
  appid:  <your app id>
  appkey: <your app key>
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 快来输入你的评论吧......
  guest_info: nick,mail,link
  pageSize: 10
  1. 在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去。

添加阅读量统计

  1. next自带的busuanzi统计，在themes/next/_config.yml中修改相关参数即可。
1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: false       # 站点总访问量
  total_visitors_icon: user   # 站点总访问量的小图标
  total_views: false          # 总浏览量（所有页面的总浏览量）
  total_views_icon: eye       # 总浏览量的小图标
  post_views: true            # 文章浏览量
  post_views_icon: eye        # 文章浏览量的小图标
  • 注：开启busuanzi之后，阅读量统计只在文章页面显示，在首页只显示文章摘要的时候不会显示，而且也无法管理阅读量的统计，因此建议采用第二种方法。
  1. Leancloud

  • 同添加评论功能一样，在Leancloud账号中新建一个应用；

  • 在新创建的应用中的存储模块下新建一个名为“Counter”的Class，名称必须为“Counter”；

  • 在创建的新应用中进入应用->设置->应用key，获取appid和appkey；

  • 打开主题配置文件，搜索leancloud_visitors，填入app_id和app_key：

1
2
3
4
5
6
7
8
9
leancloud_visitors:
  enable: true
  app_id: # <app_id>
  app_key: # <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: false

添加博客热门文章页面

  • 为博客添加文章阅读量排行榜页面。前提是用Leancloud添加了阅读量统计（上文有提到），具体操作步骤如下：
  1. 在站点目录下打开Git Bash，新建top页面，即执行以下命令：
1
hexo new page "top"
  1. 然后在主题配置文件/themes/next/_config.yml中menu下添加top：
1
2
menu:
  top: /top/ || signal
  1. 接着在语言翻译文件/themes/next/languages/zh_Hans.yml中加上top的中文翻译：
1
2
3
4
5
6
7
8
9
10
11
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  top: 热门排行 /* 可以不为 热门排行，随便取 */
  1. 编辑第一步新建页面生成的文件，其中comments为设置该页面是否开启评论，文件位置：hexo/source/top/index.md：
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
34
35
36
37
38
---
title: 文章热度排行
comments: true
date: 2019-11-03 14:37:48
type:
---

<div id="top" style="margin-top:30px;"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!-- <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script> -->
<script>AV.initialize("app_id", "app_key");</script>
<script type="text/javascript">
    var time = 0
    var title = ""
    var url = ""
    var query = new AV.Query('Counter');
    query.notEqualTo('id', 0);
    query.descending('time');
    query.limit(1000);
    query.find().then(function (todo) {
        for (var i = 0; i < 1000; i++) {
            var result = todo[i].attributes;
            time = result.time;
            title = result.title;
            url = result.url;
            var content = "<p class='my-article-top'>" + "<font color='#a7a7e5'>" + "➤【热度: " + "</font>" + "<font color='#f1a8ce'>" + time + " ℃】" + "</font>" + "<a href='" + url + "'>" + title + "</a>" + "</p>";
            document.getElementById("top").innerHTML += content
        }
    }, function (error) {
        console.log("error");
    });
</script>

<style>.post-description {
        display: none;
    }
</style>

必须将里面的里面的 app_id 和 app_key 替换为你的主题配置文件中的值，必须替换里面博客的链接，1000是显示文章的数量，其它可以自己看情况更改。最后，修改样式可以在 custom.styl 中加入自定义代码，不过还有几点需要注意：

  • 如果在设置 > 安全中心中，没有将 http://localhost:4000 加入 Web 安全域名，那么本地调试将看不到，可以先将之加入，调试完后删除。

  • 如果你发现文章标题显示不对，这是由于更改过文章标题导致的，在存储 > Counter 双击title修改即可。

  • 如果你的博客使用了 Valine 评论系统，那么可能会有代码冲突问题，解决方法可自行百度

添加字数统计和阅读时长

  1. 安装hexo-symbols-count-time
1
$ npm install hexo-symbols-count-time --save
  1. 如果安装完报如下提醒，还需安装eslint
1
npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
  1. 安装eslint
1
$ npm install eslint --save
  1. 修改themes/next/下的_config.yml中如下内容：
1
2
3
4
5
6
7
symbols_count_time:
  separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
  item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: false   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 4                   # Average Word Length
  wpm: 275                 # Words Per Minute（每分钟阅读词数）
  suffix: mins.

加入canvas粒子时钟

关于如何在博客中加入canvas粒子时钟在另一篇文章【在Hexo+NexT博客中加入canvas粒子时钟】有详细介绍。

添加网站运行时间

  1. 加入到侧边栏，在hexo/themes/next/layout/_macro/sidebar.swig中合适位置加入以下代码：
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
<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("05/27/2017 15:13:14");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i) {
    if (i<10) {
        i="0" + i
    };
    return i;
}
show_date_time();
</script>
  1. 加入到页面底部，在themes\next\layout\_partials\footer.swig文件中合适位置加入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("09/15/2019 15:13:14");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

添加板娘live2d模型

板娘原生使用文档 ，但是原生的其实不是很好用，这里我推荐一个只需要引入一个js文件就能实现看板娘的方法，这个作者对Live2d模型进行了深度优化，可以根据鼠标放置和点击内容的不同进行一定的提示信息，并且代码中设置了一年中特殊节日的祝福语，具体设置方法如下：

  1. 去live2d-widget下载源代码并解压到 themes/next/source/lib/ 下；

  2. 然后打开下载文件中的 autoload.js 文件，修改以下代码：

1
2
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
const live2d_path = "/lib/live2d-widget/";
  1. 上面那个地址表示在本地引用，然后打开 themes/next/layout/_layout.swig 文件，在其中引入 js 文件如下：
1
<script src="/lib/live2d-widget/autoload.js"></script>
  1. 打开主题配置文件 themes/next/_config.xml 文件，在其中末尾添加：
1
2
live2d:
  enable: true  # 设置看板娘开关
  1. 最后，想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js、waifu-tips.json 和 waifu.css 三个文件。

添加Fork me on GitHub

  1. 第一种方法：next自带，在主题配置文件中搜索github_banner，注意要将yourname改为自己的：
1
2
3
4
github_banner:
  enable: true
  permalink: https://github.com/yourname
  title: Follow me on GitHub
  1. 第二种：有多种样式供选择，具体方法如下：

  • 去网址https://github.com/blog/273-github-ribbons 挑选自己喜欢的样式，并复制代码，添加到themes\next\layout\_layout.swig的body标签内；

  • 把里面的url换成自己的，即复制的代码中的<a href=”https://github.com/you">；

  • 在代码里添加style=”float:right”或style=”float:left”来设置标签在页面中的位置：

1
2
3
4
5
6
<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
    <div class="headband"></div>

	<!-- 以下为复制过来的代码 -->
	<a href="https://github.com/jrbw0910"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" style="float:right" alt="Fork me on GitHub" data-recalc-dims="1"></a>

订阅微信公众号

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

  • 在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

  • 在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

  • 然后编辑 主题配置文件，如下：

1
2
3
4
5
# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

添加打赏功能

  • 在themes/next/_config.yml中搜索reward，修改内容，并在指定路径下放置自己的支付二维码。
1
2
3
4
5
6
7
8
9
reward_settings:
  enable: false
  animation: true                   # 动画
  comment: 感谢您的支持！

reward:
  wechatpay: /images/wechatpay.jpg  # 微信
  alipay: /images/alipay.jpg        # 支付宝
  #bitcoin: /images/bitcoin.png     # 比特币

文末添加版权声明

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

常用操作

  1. init：新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
1
$ hexo init [folder]
  1. new
1
$ hexo new [layout] <title>
  • [layout]可以为以下三种：
参数名 功能 文章路径
post 新建博文 source/_posts
page 新建页面（如404，分类） source
draft 草稿 source/_drafts
  1. generate：生成静态文件。
1
$ hexo generate
  1. publish：发表草稿。
1
$ hexo publish [layout] <filename>
  1. server：启动服务器。默认情况下，访问网址为： http://localhost:4000/。
1
$ hexo server
  1. deploy：部署网站。
1
$ hexo deploy
  1. clean：清除缓存文件 (db.json) 和已生成的静态文件 (public)。
1
$ hexo clean
  • 在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。
  1. version：显示 Hexo 版本。
1
$ hexo version
  1. 默认可以使用的Front-matter（就是博文最上方以 — 分隔的那部分）：
参数 描述 默认值
layout 布局
title 标题
description 文章描述
password 文章密码
keywords 文章关键字
comments 设置是否开启评论 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
date 建立日期 文件建立日期
updated 更新日期 文件更新日期

参考：

感谢您的支持！