如何使用 Hexo+Next 美化博客

发表于 更新于 分类于 ， 阅读次数： 本文字数： 7.5k 阅读时长 ≈ 14 分钟

前言

没看过如何搭建的建议这边走：link
注意，本博客基于 next 的 Gemini 样式进行美化。
（Gemini，在主题的配置文件搜索 scheme，即可选择样式）

美化 Hexo 基本内容

修改 URL 地址

有时候我们会觉得博客的地址是根据时间生成的链接，非常丑陋，又体现不出层次感，那么可以修改 URL 生成方式。
打开根目录下的配置文件，搜素 permalink，将后面改为 :category/:title/（这是改为分类决定链接，也可以按照个人喜好改为其他方式）。
接着重新生成一下网站就可以了（如果之前有引用过博客里的链接，记得更改过来）。

关闭证书请求

这里只是提一下有这个错误类型，因为过于冷僻，故不展开详讲。

添加 busuanzi 统计功能

打开主题下的配置文件，搜索 busuanzi，将 enable 设置成 true 即可。

  • total_visitors: 站点总访问量
  • total_visitors_icon: 站点总访问量的小图标
  • total_views: 总浏览量（所有页面的总浏览量）
  • total_views_icon: 总浏览量的小图标
  • post_views: 文章浏览量
  • post_views_icon: 文章浏览量的小图标）

字数统计

下载插件。

在根目录下的配置文件中添加如下一段话（原本没有）。

再在主题的配置文件中修改如下配置（已有，无需粘贴）：

头像

找到主题的配置文件中的这样一段话并修改为下文所示：

1
2
3
4
5
6
7
8
## Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png # 本地图片地址
  # If true, the avatar will be displayed in circle.
  rounded: true # 是否圆形
  # If true, the avatar will be rotated with the cursor.
  rotated: true # 鼠标放在头像上是否旋转

这表示在你的 \theme\next\source\images 文件夹里，你需要存放一个 名为 avatar.png 的图片来作为你的头像（当然要把原来的删掉）。

背景

首先打开主题下的配置文件，搜索 costom_file_path，将 style 前的 “#” 号去掉（取消注释），表示启用这两个个文件。
接着找到 \Blog\source，新建文件夹 _data，再在其中新建文件 styles.styl。
粘贴以下内容：
在主题的配置文件中搜素 $social$，修改即可。

接着，将你的背景图片存在 \themes\next\source\images 内，并改名为 background.png 。
边框可以设置圆角。
按照上面的做法，在 _data 内新建文件 variable.styl，同时取消掉配置文件内部 variable 的注释。
在 variable.styl 内部粘贴：

基本的内容就设置好了。

联系地址

在主题的配置文件中搜素 social，修改即可。

添加 RSS 订阅

下载插件：

1
npm install hexo-generator-feed --save

然后在主题的配置文件最后添加如下一句话。

1
2
3
4
5
6
7
8
## feed
## Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

侧边栏添加友链

打开主题的配置文件。
只需要在 “links:” 下添加网站地址即可。

隐藏 powered by

我们发现博客内的 powered by 非常碍眼，于是想去掉它。
两种方法：
打开主题的配置文件，搜索 powered，设置为 false 即可。

1
2
## Powered by Hexo & NexT
powered: false

另一种方法：找到 \themes\next\layout\_partials 下的 footer.njk，定位第 82 行，将此行删除，或者加上 <!-- --> 变成这样：

1
<!-- {{- __('footer.powered', next_url('https://hexo.io', 'Hexo') + ' & ' + next_url(next_site, 'NexT.' + theme.scheme)) }} -->

网站运行时长

还是打开 \themes\next\layout\_partials，粘贴以下内容：

页面顶部加载条

依次输入以下命令命令：

再打开主题配置文件，然后搜索 pace 修改为 true 即可。

1
2
3
4
5
6
7
8
9
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: red
  # All available themes:
  # 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: material

选择 theme 的主题和颜色，依据个人喜好（我的就是上面的配置）。

右上角 Github 图标

在主题配置文件中搜索：github_banner。
修改为这样：

1
2
3
4
5
## Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/yourname
  title: Follow me on GitHub

把名字改一下即可。

文末版权申明

主题配置文件中搜索并修改：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: zh-CN

文章中插入图片优化

通常地，在 .md 文件中插入图片的语法为 ![]()。
一般来说有三种图片路径：相对路径，绝对路径和网络路径。
网络路径就是直接引用网上的图片，这种方式十分的方便，但是也存在一定的问题：

图片失效导致无法加载；
打开网页后要再请求加载图片
原网站限制，如微信公众号的图片会变得不可见等。

这种方式算是有利有弊。
绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。
由于博客需部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。
在根目录下的配置文件修改：

1
post_asset_folder: true

那么在 \source 文件夹里，每篇文章会成相同名字的文件夹，也就是文章资源文件夹，我们可以将图片存在里面。
但是这样还不够，引用相当麻烦。
下载插件：

1
2

npm install hexo-renderer-marked

之后在根目录下的配置文件修改：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

接下来，假如文章资源文件夹（即同名文件夹）里存放着 image.png，那么我们使用 ![](image.png) 就可以插入了。

浏览进度

打开主题的配置文件，搜索 scrollpercent，修改：

1
2
3
4
5
6
7
back2top:
  # 返回顶部
  enable: true
  # Back to top in sidebar.(侧边栏显示)
  sidebar: true
  # Scroll percent label in b2t button.(打开浏览进度显示)
  scrollpercent: true

文章优先级置顶设置

先卸载一个插件，再安装一个（否则后者不会生效）：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

这样，你就可以在文章的设置区（即 titile 下面那一块）加入 top: true 来使之置顶。
如果想要优先级排序，则可以使用 top: 1 来修改优先级（优先级越低越靠后）。

添加代码块一键复制按钮

修改主题下的配置文件，搜索 copy_button，改为 enable: true。

修改标签的“#”图标

打开 themes/next/layout/_macro/post.njk，搜索：

1
rel="tag">{{ tag_indicate }} {{ tag.name }}</a>

改为：

1
rel="tag"><i class="fa fa-tag"> {{ tag.name }}</i>

修改文章目录自动编号

发现文章目录又自动编号的问题，不是很能忍。
修改主题的配置文件，搜搜 toc，修改为 enable: false。

添加 mathjax 渲染（可渲染 markdown 与 LaTeX）

安装插件：

1
npm install hexo-math --save

打开主题的配置文件，搜索 math，可以看到有 math 和 mathjax 两个选项。

1
2
3
4
5
6
math:
  every_page: false

  mathjax:
    enable: false
    tags: none

如果打开上面那个，则全部文章都开启，只是会比较卡。
打开下面那个，不会全部开启，对于想开的文章则需要在文章设置区（即标题下面）添加 mathjax: true，接着就可以用了。

添加文章折叠

下载插件：

1
npm install hexo-sliding-spoiler --save

同时更改设置，打开 node_modules\hexo-sliding-spoiler\assets，修改：

1
2
3
4
5
6
7
.spoiler.collapsed .spoiler-title:before {
    content: "Show: ";
}

.spoiler.expanded .spoiler-title:before {
    content: "Hide: ";
}

修改其中的 content 即可更改前面的字。
使用：

1
2
3
4

{% spoiler "Test" %}
Hello world!
{% endspoiler %}

效果：

添加加密

下载：

1
npm install --save hexo-blog-encrypt

使用方法如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World!
date: ???
tags: ???
categories: ???
top: 1
mathjax: true
abstract: '???'（没解密前显示的内容）
password: ******（密码）
message: QwQ（密码提示）
---

如此使用就完了。

后记

只更新了这么一点，希望能帮上你。