简介

本文介绍Hexo博客的Next主题下的一些基础设置和实用优化配置，这些设置也在本文的博客中有所体现。

基础设置

本节内容介绍hexo博客的一些基础配置，主要是修改一些配置文件中的内容。

博客名称

修改站点配置文件：

1
2
3
4
5
6
7
8
# Site
title: 田宇的个人博客      # 网站标题
subtitle: '学习笔记'        # 网站副标题
description: ''  # 网站描述 主要用于SEO,该部分内容还会出现在侧边栏作者下面
keywords:
author: yu.tian    # 作者名字 用于主题显示文章的作者
language: zh-Hans   # 网站使用的语言
timezone: 'UTC'    # 网站时区 Hexo 默认使用您电脑的时区

博客路径

修改站点配置文件：

1
2
3
4
5
6
7
8
9
10
11
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
## 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/
url: http://tianyu-code.top    # 网址
root: /     # 网站根目录
permalink: :title/    # 生成的博客目录包含年月日，不利于搜索，简化
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

每页文章数量

修改站点配置文件：

1
2
3
4
index_generator:
  path: ''
  per_page: 10      # 每页显示的文章量
  order_by: -date   # 排序：根据时间
1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 20    # 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page    # 分页目录

修改网站主题

修改站点配置文件：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next     # 当前主题名称，值为false时禁用主题

设置博客主页菜单

博客主页的各种按钮需要配置才能正确跳转，例如：

  1. 修改主题配置文件，其中||符号前是跳转路径，后面是按钮图标

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
    # Value before `||` delimeter is the target link.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
    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.
    menu_icons:
      enable: true

    我在配置时必须把跳转路径后面的空格去掉，不然在跳转的时候空格也会在路径中导致失败

  2. 新增分类/标签等目录

    在完成上述配置后，我们指定了按钮的跳转路径，但是这个目录还未存在，需要手动创建,在博客目录输入hexo new page categories，即可创建分类目录，会在source下面生成categories目录，里面的index.md即为categories界面的显示文件，index.md文件修改如下：

  3. 写博客时添加分类

    接下来我们在添加新博客时，注意添加分类，下面给出一个多级分类的例子

    这样我们点击分类就会自动出来刚刚的那篇文章了

其余页面同理，根据需要设置

设置主题风格

next主题默认提供了四种风格可选，本博客是Gemini风格，修改主题配置文件：

侧边栏社交按钮

侧边栏可添加社交按钮，修改主题配置文件，其中||前面是链接，后面是图标

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
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/tianyu-code || github
  E-Mail: mailto:1406985325@qq.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  icons_only: false
  transition: false

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline

效果如下：

侧边栏头像

将头像的图片放在hexo/source/images下即可（若没有该目录则新建即可）,修改主题配置文件:

1
2
3
4
# Sidebar Avatar 设置头像
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/user.jpg

侧边栏其他设置

侧边栏出现时机和位置

回到顶部按钮

修改主题配置文件:

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
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Sidebar Display, available value (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  display: post
  #display: always
  #display: hide
  #display: remove

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini). 两个栏的间隔像素点
  offset: 12

  # Back to top in sidebar (only for Pisces | Gemini).   回到顶部按钮是否开启
  b2t: true

  # Scroll percent label in b2t button. 回到顶部按钮是否显示百分比
  scrollpercent: true

  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

主页文章显示设置

阅读更多按钮

记录上次阅读位置

自动滚动到下面

文章标题下面一些元素显示，包括更新时间，创建时间等

上述设置均修改主题配置文件:

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
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------

# Automatically scroll page to section which is under <!-- more --> mark.
# 自动滚动到<!--more-->下面
scroll_to_more: false

# Automatically saving scroll position on each post/page in cookies.
# 使用cookies记录上次阅读位置
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
# 打开阅读更多按钮
auto_excerpt:
  enable: true
  length: 150

# Post meta display settings
# 文章标题下面的一些元素，可选显示
post_meta:
  item_text: true
  created_at: true
  updated_at: true
  categories: true

效果如下:

文章版权声明

修改主题配置文件:

1
2
3
4
5
6
# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

效果如下，注意它生成的链接是根据站点配置中的URL生成的,效果图：

代码块高亮风格设置

next主题自带tomorrow代码高亮，其中包含五种风格，修改站点配置文件:

1
2
3
4
5
6
7
highlight:      # 代码块的设置
  enable: true
  line_number: true
  auto_detect: true    # 自动检测代码类型
  tab_replace: ''
  wrap: true
  hljs: false

修改主题配置文件:

1
2
3
4
5
6
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

注意在写博客时，需要使用如下格式才能触发代码高亮

```C

code…

```

页脚设置

博客最下方的页脚有些杂乱，比如由Hexo强力驱动、hexo版本等，为了简洁我们可以去掉，修改主题配置文件：

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

  # Icon between year and copyright info.
  icon: user

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  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" href="https://pages.github.com">GitHub Pages</a>
  custom_text: 田宇的个人博客

效果图：

添加评论系统

综合考虑下来，决定使用valine系统，它的优点如下：
（1）有国内网站，加载速度快，Leancloud管理评论也方便
（2）无需再使用第三方登录，可游客直接评论，直接设置自己的昵称即可

  1. 进入Leanclound,注册登录后创建应用，如下所示：

    进入刚才创建好的应用，在“存储”中选择“创建Class”，设定Class名称为Comment，设置ACL权限为创建者可读可写，如下图

    然后进入“设置”中的“安全中心”,添加Web安全域名，防止其他用户盗用

    再进入“设置”中的“应用Keys”，记录App ID和AppKey的值

  2. 修改主题配置，将App ID和AppKey的值填入

    placeholder是在评论框中显示的提示标语，默认Just go go可自行修改
    guest_info是评论上方显示的头部
    添加成功后文章标题下访还会有评论数的统计

    效果如下：

  3. 评论管理

    管理评论在leanClound中即可

本地搜索功能

在博客根目录安装
npm install hexo-generator-searchdb --save

站点配置文件添加如下:

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

主题配置文件修改如下：

1
2
3
4
5
6
7
8
9
10
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # 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

效果图：

取消主题默认动画

next主题的内容和菜单都有相关的动画，影响加载速度，可以在主题配置文件中取消，将motion的enable改为false即可

1
2
3
4
5
6
7
8
9
10
11
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Use velocity to animate everything.
motion:
  enable: false
  async: false
  transition:

主要优化选项

该部分设置涉及了一些主题的css设置，影响了博客内容的样式等。

添加文章结束标识

在目录 themes/next/layout/_macro/ 下添加 passage-end-tag.swig文件，内容如下：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ff4d4d;font-size:16px;">--------------------- 本文结束,感谢您的阅读---------------------</div>
    {% endif %}
</div>

打开 themes/next/layout/_macro/post.swig 文件，新增内容如下:

1
2
3
4
5
<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>

打开主题配置文件 ，添加代码如下：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

将乱码的上一页/下一页修正

next主题存在一个bug，就是当首页文章过多而分页时，上一页和下一页会出现乱码，如图所示：

修改themes/next/layout/_partials/pagination.swig文件：

1
2
3
4
5
6
7
8
9
10
11
12
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '上一页',
        next_text: '下一页',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

修复后效果图：

修改文章链接样式

打开themes/next/source/css/_common/components/post/post.styl，在开头添加

1
2
3
4
5
6
7
8
9
10
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

效果测试：个人博客

常用CSS样式修改

更改背景图片

简单代码块样式

归档和分类页面的时间轴样式

修改archives页面移动端菜单下拉的bug

博客中引用的样式

选中文字部分的样式

以上所有的设置均在统一个文件中修改：hexo/themes/next/source/css/_custom/custom.styl，该文件一开始默认是空，可新增我们想要的css样式（估计大部分的css修改都在此文件夹）.
下面附上我的文件修改，各种颜色，透明度等细节修改见注释：

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
// Custom styles.

// 页面整体设置

body {
    //background-image:url(https://source.unsplash.com/random/daily);
    background-image:url(/images/background.jpg); //这一行的括号里填背景图片的路径，将图片重命名为background.jpg放在\themes\next\source\images下
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:100% 100%;//默认将图片和当前窗口大小100%填充，强迫症福利
}


// ``简单代码块的自定义样式

code {
    color: #000;
    background: rgba(255,0,0,.3);
    margin: 1px 3px;
    padding: 1px 3px;
}

// 归档和分类页面的时间轴样式

.posts-collapse {
    margin: 50px 0;
}
@media (max-width: 767px) {
    .posts-collapse {
        margin: 50px 20px;
    }
}

.posts-collapse::after {
    margin-left: -2px;
    background: rgba(255, 118, 0, 0.75);
}

.posts-collapse .post-title a {
    color: #0095ff;
}

.posts-collapse .post-title a:hover {
    color: #ff7600;
}


// 修改archives页面移动端菜单下拉的bug

.posts-collapse {
    z-index: initial;
}



// 博客中引用的样式
blockquote {
    padding-top: 3px;//引用框和字体上部的填充空白
    padding-right: 20px;//右边的空白
    padding-bottom: 0px;//底部的空白
    padding-left: 20px;//左部的空白
    border-left: 5px solid rgba(255, 118, 0, 0.75);//竖条的属性（宽度和颜色rgba，a为透明度）
}

// 选中文字部分的样式
::selection {
    background: rgb(46, 124, 160);
    color: rgb(255, 255, 255);
}
*::-moz-selection {
    background: rgb(46, 124, 160);
    color: rgb(255, 255, 255);
}

Gemini主题透明化

效果图：

个人倾向于设定为0.9，这样不影响内容阅读，且能模糊的看见背景缓解视觉疲劳

  1. 内容板块透明
    themes/next/source/css/_schemes/Pisces/_layout.styl 文件 .content-wrap 标签下修改：
    background: rgba(255,255,255,0.9); //0.9是透明度

    themes/next/source/css/_schemes/Gemini/index.styl文件 .post-block 标签下修改：
    background: rgba(255,255,255,0.9); //0.9是透明度

  2. 分页(主页最下面的那一小块)
    themes/next/source/css/_schemes/Gemini/index.styl 文件 .pagination 标签下修改：
    background: rgba(255,255,255,0.9); //0.9是透明度

  3. 菜单栏背景
    themes/next/source/css/_schemes/Pisces/_layout.styl 文件 .header-inner 标签下修改：
    background: rgba(255,255,255,0.9); //0.9是透明度

    themes/next/source/css/_schemes/Pisces/_sidebar.styl 文件 .sidebar 标签下增加一行:
    opacity: 0.9; // 0.9透明度自己选择

  4. 站点概况背景
    themes/next/source/css/_schemes/Pisces/_sidebar.styl文件 .sidebar-inner 标签下修改：
    background: rgba(255,255,255,0.9); //0.9是透明度

    themes/next/source/css/_schemes/Pisces/_layout.styl 文件 .sidebar 标签下修改为：
    background: rgba(255,255,255,0.9); //0.9是透明度

  5. 评论区背景
    themes/next/source/css/_schemes/Gemini/index.styl文件 .comments 标签下修改为：
    background: rgba(255,255,255,0.9); //0.9是透明度

文章目录自动全展开

使用Next主题写文章时, 只有当你浏览到相应的目录级时才会展开。想通过目录快速定位某段文章的时候就很不方便，修改如下:
打开文件hexo/themes/next/source/css/_common/components/sidebar/sidebar-toc.styl

1
2
3
4
找到如下的代码：
.post-toc .nav .nav-child { display: none; }
修改为：
.post-toc .nav .nav-child { display: block; }

修改Gemini风格的博客界面布局，即修改界面宽度和留白

打开文件hexo/themes/next/source/css/_variables/Gemini.styl

1
2
3
4
5
6
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color                    = #eee
$main-desktop                     = 90%      //代表整体占用浏览器界面的百分比，即控制留白大小
$sidebar-desktop                  = 240px   //侧边栏出现的位置
$content-desktop                  = calc(100% - 250px)    //内容占用的大小

修改前后对比图：

修改字体

这里只是简单的改一下字体大小，格式什么的就不动了，文件：themes/next/source/css/_variables/base.styl

1
2
3
4
5
6
7
// Font size
$font-size-base           = 15px    //字体大小
$font-size-base           = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

使用不蒜子统计站点访问量

编辑主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
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-user"></i>本站总访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 本文总阅读量 # <i class="fa fa-file-o"></i>
  page_pv_footer: 次

由于不蒜子的域名有更改，所以我们也需要在next主题中修改：
/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件:

src替换为”https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"。

可选优化选项

该部分设置锦上添花，让你的博客变得更美观和有意思。

图片懒加载

当博客图片较多时，使用懒加载可大大加快加载速度，而且它只会加载当前界面的图片，后续图片当滚动到时才会进行加载。

  1. 在博客根目录执行命令安装插件：npm install hexo-lazyload-image --save.

  2. 在站点配置文件添加配置

    1
    2
    3
    4
    5
    #懒加载设置
    lazyload:
      enable: true
      onlypost: false
      loadingImg:    # /images/loading.png

    onlypost写成false代表所有的图片都启用懒加载，否则就是仅文章中的图片
    loadingImg是未加载时的默认图片，放到主题的目录next/source/images目录下，若不填写则为默认

添加界面宠物

该配置可在博客页面添加一只宠物，例如：

  1. 在博客根目录安装live2d插件：npm install --save hexo-helper-live2d

  2. 在博客根目录安装指定的宠物模型：npm install live2d-widget-model-shizuku

    对应模型效果可参考宠物模型效果

  3. 在站点配置文件添加配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # live2D动画
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-shizuku # 指明使用哪个动画
      display:
        position: left
        width: 150    #宽度
        height: 240   #高度
        hOffset: 100  # 调节水平位置
        vOffset: 0    # 调节垂直位置
      mobile:
        show: false   #移动端是否显示
      react:
        opacity: 0.8   #不透明度

上述配置呈现的效果即为当前博客中的宠物。个人博客链接

添加实时沟通

尽管添加了评论系统，但是沟通效果还是差强人意，这里我们使用daovoice，能在博客界面添加实时沟通，将消息发送到作者的微信

  1. 注册登录
    首先进入daovoice注册，然后通过邀请码c54c97de激活。之后找到APPID

  1. 修改配置文件

    打开themes/next/layout/_partials/head.swig文件，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {% if theme.daovoice %}
      <script>
      (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
      daovoice('init', {
          app_id: "{{theme.daovoice_app_id}}"
        });
      daovoice('update');
      </script>
    {% endif %}

    然后在主题配置文件最后添加配置

    1
    2
    3
    # Online contact 
    daovoice: true
    daovoice_app_id: 这里填你的刚才获得的 app_id

    之后就可以看到图标了，这个可能加载较慢