hexo博客新版next主题搭建

说实话，我其实本来不想写这篇文章的。

网上hexo博客的搭建教程很多，而且大多数方法其实都差不多。

然后在某一天，我的next主题突然炸了（font-awesome死了），我去github一看，发现原理是next主题出新的版本了（v7.7.1），并放弃了对旧版（v6.7.0）的维护。

如果只是这样问题不大，只要重新配置一下主题就行。

关键是我搞着搞着发现新版的主题并没有我想象的那么好配置。

原来的配置方法基本上都失效了，而且各种文件的配置方法都出现了多多少少的改动。

最难受的是，网上的一些配置next主题的文章都停留于旧版主题，一切只能靠自己的经验和代码直觉。

经历千辛万苦后终于配置完博客的我，有了写一篇文章的想法。

我会在这篇文章来详细地介绍如何配置新版next主题，并会将其与老版主题做比较。

搭建博客（基础内容）

这个地方我是不会讲的，因为网上的文章太多，总感觉自己在抄袭。

我这里推荐Venus大佬的博客

他的文章介绍得比较详细，而且里面基本上没有什么坑。

到时候先跳过主题那一部分即可。

新版next主题配置

萌新和偶遇经验的人都可以无门槛地进行配置。

对于最终效果有疑问的人可以参考着本博客来搭建。

提前说明一下，遇到代码块跟本文章不完全符合的情况时，请不要完全盲从于本文章，要集合实际情况进行配置。

首先，我们要导入主题。

我们在cmd中cd到博客目录之后输入

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

等加载条加载完之后我们就可以使用主题了。

然后我们打开博客的_config.yml，在theme那里把landscape改成next

现在，如果你在cmd输入hexo s，在浏览器输入localhost:4000的话，你会发现你的博客变成next了（虽然现在有点丑了就是）。

我们在博客配置里找到subtitle、description和author的栏目，这分别对应着博客的副标题、作者的说明（相当于个性签名了吧）和作者名字。这些可以凭个人喜好修改。

我们在language把en修改成zh-CN。

基础配置

以下内容若无特殊说明，皆在themes\next中的_config.yml中进行编辑

标签页图标

favicon:
  small: /images/picture.jpg
  medium: /images/picture.jpg
  apple_touch_icon: /images/picture.jpg
  safari_pinned_tab: /images/logo.svg

我们把想修改的图片复制到themes\next\source\images中，再把以上的picture.jpg修改成图片的名字即可。

侧目录

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  图床: /therspist/ || picture-o
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

我们可以根据自己的需要来修改侧目录的内容，按前中后的顺序分别是栏目名称、栏目字地址（如xxx.github.io/tags/）和栏目图标（具体内容请看font-awesome官网）

注：前面加上#号是被注释的代码

文章分段栏

我并没有在我的博客里添加这个功能，因为我有乱用标题的行为

不过说实话这个确实是一个快速而又实用的功能。

示例（截图自YRC的博客）：

toc:
  enable: true #改成true以启用
  number: true #自动生成编号
  # 以下默认
  wrap: false
  expand_all: false
  max_depth: 6

联系方式

social:
  GitHub: https://github.com/minyuchengmin || github
  E-Mail: mailto:minyuchengmin@outlook.com || envelope
  Bilibili: https://space.bilibili.com/386217363 || tv
  Luogu: https://www.luogu.com.cn/user/78791 || code

对前面的名称和后面的网址进行修改即可（最后面的依旧是图标）

友链

links_settings:
  icon: link
  title: 友链
  # Available values: block | inline
  layout: block

links:
  lwlaymh的博客: https://lwlaymh.github.io/
  zcmimi的博客: https://zcmimi.top
  洛谷小黄鸭团队: https://www.luogu.com.cn/team/10652

值得一提的是，如果想一行多个链接的话可以把layout的block改成inline

头像

avatar:
  # Replace the default image and set the url here.
  url: /images/curavatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: false #若为true，则头像为圆形
  rotated: false #若为true，则鼠标碰到头像时旋转

头像跟标签页图标一样，需要把图片复制粘贴到image中，再修改文件名

主题风格

一个主题之中也有很多主题风格的！我的博客用的是Gemini风格，不过大家可以根际个人喜好选择其他的风格

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

目录栏位置

sidebar:
  # Sidebar Position.
  position: left
  #position: right

返回顶部

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

相对于v6.7.0版本，新版本稍微有了些变动，不过并不是特别影响

显示全文

从这里开始，我们能看出6.7.0和7.7.1的差距。7.7.1居然取消了自动断章的功能，所以我们只能在文章的.md文件中输入

1	<!--more-->

来断章。

给萌新们解释一下，如果不断章，那么主页会把一整篇文章全都展示上去，特别影响体验

代码复制

codeblock:
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

$Latex$

$Latex$是一个比较高端的东西，相信只要写过数论博客的人应该都会使用latex。

math:
  mathjax:
    enable: true
    mhchem: false
   katex:
    enable: false
    copy_tex: false

在Venus大佬的博客里已经提过修改数学语言规则的方法了，这里我就不再多说了

阅读人数

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

文章搜索

我们打开cmd，cd到博客目录中，输入

1	npm install hexo-generator-searchdb --save

我们在博客主目录（不是主题目录）的_config.yml输入以下内容

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后再主题的_config.yml下添加以下内容

local_search:
  enable: true
  top_n_per_article: 1
  unescape: false

书签

书签会记住你上次阅读文章停留的位置

我们在cmd中输入git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark

然后再主题目录下修改以下配置

1
2
3

bookmark:
  enable: true
  save: auto

经过主题更新之后，书签的位置胸左上角移到了右上角，如果觉得和后面添加的进度条冲突的话可以在css中删除bookmark图标

打开\themes\next\layout_partials\widgets.swig，在

1
2
3

{%- if theme.bookmark.enable %}
  ~~~
{%- endif %}

的部分中间的代码（就是~~~的部分）删除就可以

标签等栏目

如果有些人在到这之前在博客的目录栏中打开了标签等栏目的话会发现这种情况：

原因是因为我们并没有添加相对应的地址。

我们在cmd中输入hexo new page “tags”新建tag栏目

然后如法炮制建立其他的栏目

然后我们在source\tags\index.md的标题位置输入

1	type: "tags"

about等其他栏目我们可以正常地编写文章进去。

背景图片

背景图片可是博客的灵魂之一，也是新主题最令人抓狂的地方之一。

用过老版主题的人都知道，想要添加背景图片就去_custom文件中进行修改就行了。

结果我打开新版主题目录，发现——没有_custom！没有了！为了添加背景，我对博客网页的css进行了排查，然后最终找到了新版主题的背景设置的位置。

打开themes\next\source\css_common\scaffolding的base.styl

body {
  background: url(/images/background.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: cover;
  color: var(--text-color);
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  opacity: 0.9;

  +tablet-mobile() {
    // Remove the padding of body when the sidebar is open.
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

把body部分修改一下，图片照例放在image中。

鼠标点击显示各种图案

这个东西我试过了，新版主题把它掐死了。

编写文章

主题什么的都是虚的，博客的文章才是它的核心

Venus的博客中都有详细的介绍，只有一点要提醒。

当文章的标签超过1个的时候，我们要这么添加：

1
2
3

tags:
- 标签1
- 标签2

而对于那些不懂markdown的新手来说，推荐洛谷的MD手册

进阶配置

添加RSS订阅

其实现在RSS订阅的作用很有限，不过放在博客中确实能起到一点美观作用

老版本的rss是显示在头像下面的，不过新版本中rss出现在文章末尾

我们在博客目录下的_config.yml的最下面添加

1	plugins: hexo-generate-feed

然后打开主题的_config.yml

follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  #WeChat: /images/wechat_channel.jpg || wechat
  RSS: /atom.xml || rss

然后再cmd中输入

1	npm install --save hexo-generator-feed

文章链接文本颜色

示例：

themes\next\source\css_common\components\post\post.styl,在最底部添加以下代码

.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;
  }
}

可以通过修改color的rgb编码来改变颜色，具体颜色编码自行百度

修改文章底部标签

打开\themes\next\layout_macro\post.swig，搜索 rel=”tag”#，将 # 换成

1	<i class="fa fa-tag"></i>

加载条

虽然next主题自带加载条（主题_config的pace），但是只有少量的颜色，所以要自己添加

打开\themes\next\layout_partials\head.swig，在这里添加红框上的代码

代码：

1 2	<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

然后我们继续在上述代码下方添加以下代码

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

在线联系

不用想daovoice了，它死了，辣鸡7.7.1

不过，我在逛某一位大佬的博客的时候，找到了一个完美的替代品——Tidio

这个的安装也是非常方便，注册之后选择js，复制代码之后粘贴到\themes\next\layout_layout.swig中的body里面就可以

起码比daovoice的安装简单多了

音乐播放器

不得不说hexo的功能特别强大，连音乐播放器都能搞出来

首先下载Aplayer

解压缩之后把文件夹里面的dist文件夹复制粘贴到\themes\next\source中

添加歌曲有两种方法，一种是导入外部歌单，比如说qq音乐的歌单，另一种方法是手动从外链网站导入歌曲，因为第二种方法过于麻烦，这里只推荐第一种

打开\themes\next\layout_layout.swig，在倒数第三行（也就是在body上方）添加以下代码

<!-- 音乐播放器 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
 <div id="aplayer" class="aplayer" data-id="" data-server="" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
 <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
 <!-- 音乐播放器 end -->

data-id输入歌单编号，data-server输入音乐软件（腾讯输入tencent，网易输入netease）

打开歌单网址，看地址框的数字编号，就是歌单编号了

看板娘

作为自己辛辛苦苦配置的博客，不配置最好的看板娘是不是说不过去啊

一般的看板娘是无法说话的，只能跟着鼠标转头

然而stevenjoezhang创造的看板娘突破了传统看板娘的极限。

这位也就是张书樵大佬真实让人又爱又恨。爱是为什么不用说了，恨是因为next主题也是他创造的，所以7.7.1的更新也是……

这篇文章是我一口气写到这里的，写这么多其实已经没有什么心情写下去了

所以我就挂一个链接吧，里面介绍的还是比较详细的

我的next主题配置就到这里了有什么问题就字评论区里讨论吧

参考资料： 1 2