Hexo-Next主题博客个性化配置

Hexo版本：6.2.0、NextT版本：7.8.0

一、主题安装

打开Git Bash，cd到站点根目录，输入

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

打开站点根目录下的_config.yml文件，landscape修改为next

## Themes: https://hexo.io/themes/
theme: next

二、使用须知

Hexo根目录下的配置文件_config.yml，以下称作站点配置文件

Hexo根目录/theme/next下的配置文件_config.yml，以下称作主题配置文件

站点配置文件修改后，一定需要以下指令才能生效
若是其他配置文件修改后，没有生效，也可以先尝试上面的指令

hexo clean && hexo g && hexo

最终效果，可以来我的博客看看。

三、个性化配置

（一）基础配置

1. 语言修改

打开站点配置文件，查找language，添加zh-CN

language: zh-CN

2. 主题切换

next主题自带四种样式

打开主题配置文件，查找scheme，选择自己喜欢的样式，去掉#

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

3. 主题配置文件修改（推荐）

Hexo 在合并主题配置时，Hexo 配置文件_config.yml中的 theme_config 配置项的优先级最高，其次是 _config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件。

打开站点根目录，添加_config.next.yml，将themes/next/_config.yml里的内容复制进去

3. 自定义样式

打开主题配置文件，查找custom_file_path，去掉style前面的#

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

在source/_data下面新建styles.styl，后文会在该文件中添加样式

4. 样式修改示例

打开source/_data/styles.styl，添加以下内容

//网站背景图片设置
body {
    background:url(/images/background.png);
    background-repeat: no-repeat;
    background-attachment: fixed; //不重复
    background-size: cover;       //填充
    background-position: 50% 20%; //缩放设置，百分比越小则图片被放大
}
//文章的透明度
.content-wrap {
  opacity: 0.9;
}
//主页标题的背景颜色
.site-brand-container {
    background: #50616d;
}
//主页标题的颜色和字体
.site-meta .site-title {
    font-weight: bold;
}
//网页顶部的进度栏
.headband {
    background: #eea2a4;
}
//菜单栏透明度
.header-inner {
  background: rgba(255,255,255,0.9);
}
//侧边栏的透明度
.sidebar {
    opacity: 0.9;
}

（二）导航区域配置

1. 新建标签页

以新建标签页tags为例，其余页面类似。

打开主题配置文件，查找menu，去掉tags前的#，其余可按此方法自行选择添加

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

打开Git Bash，cd到站点根目录，输入以下指令新建文件夹

hexo n page tags

打开source/tags/index.md，配置type。以上指令生成的文件夹会有默认的文件

---
title: tags
type: "tags"
---

menu中 tags，对应 source/tags/

例如：留言: /guestbook/ || fa fa-book，对应source/guestbook/

2. 菜单栏鼠标悬浮颜色

打开主题配置文件，查找custom_file_path，去掉variables前面的#

custom_file_path:
  variable: source/_data/variables.styl

在source/_data下新建variables.swig，并添加以下内容

//更改菜单栏鼠标悬浮的颜色//236, 155, 173
$menu-item-bg-color           = rgba(248, 105, 129, .4);

效果截图

3. 标签/分类/归档的数量显示

打开主题配置文件，查找menu_settings

menu_settings:
  icons: true # 是否显示图标
  badges: true # 是否显示数量

效果截图见上菜单栏鼠标悬浮颜色

4. 星标

打开https://tholman.com/github-corners/ ，复制喜欢的样式

打开themes/next/layout/_layout.swig，在<div class="headband"></div>下添加复制的内容

效果截图

4. 留言板

留言板使用的前提是，已经设置了评论插件-valine或者其他评论插件

打开Git Bash，cd到站点根目录，输入以下指令新建page

hexo new page guestbook

打开source/guestbook/index.md，配置type。

---
title: 给我留言吧
date: 2022-02-18 20:04:25
type: "guestbook"
---
# 欢迎来到我的博客！

> 欢迎在这里留言！

打开主题配置文件，查找menu，添加留言板

menu:
  留言: /guestbook/ || fa fa-book

效果截图

（三）侧边区域配置

1. 头像设置

打开主题配置文件，查找avatar

avatar:
  url: /images/avatar.jpg
  # 是否设置为圆形
  rounded: false
  # 是否鼠标悬浮时旋转
  rotated: false

效果截图

2. 浏览进度显示

打开主题配置文件，查找scrollpercent，改为true

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

3. 本地搜索Local Search

打开Git Bash，cd到站点根目录，安装hexo-generator-searchdb

npm install hexo-generator-searchdb --save

打开站点配置文件，末尾添加以下内容

# 搜索功能
search:
  path: search.xml
  field: p