Hexo的next主题美化

一、主题安装
打开站点根目录，右键打开Git Bash

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

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

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

改为

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

二，使用须知

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

三、个性化配置

（一）基础配置

语言修改
打开站点配置文件，查找language，改为zh-CN（简体中文）
```
language: zh-CN
```

2.主题切换

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

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

效果如下
muse
muse

mist

pisces

gemini

自定义样式

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,在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;
 
}

（二）导航区域配置

新建标签页

打开主题配置文件，查找menu,去掉需要的导航页前的#

menu:
  home: / || home                      #首页
  archives: /archives/ || archive      #归档
  categories: /categories/ || th       #分类
  tags: /tags/ || tags                 #标签
  about: /about/ || user               #关于
  #schedule: /schedule/ || calendar    #日历
  #sitemap: /sitemap.xml || sitemap    #站点地图，供搜索引擎爬取
  #commonweal: /404/ || heartbeat      #腾讯公益404

“||”前面的是目标链接，后面的是图标名称，next使用的图标是图标库 - Font Awesome 中文网上的，有想用的图标直接在fontawesome上面找图标的名称就行.
新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在menu下设置：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索

在根目录下打开Git Bash，输入如下代码：

hexo new page "categories"
hexo new page "tags"
hexo new page "about"

若想自己添加别的选项,参考上面的
此时在根目录的sources文件夹下会生成categories、tags、about、三个文件，每个文件中有一个index.md文件，修改内容分别如下：

---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---

---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---

---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---

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

菜单栏鼠标悬浮颜色

打开主题配置文件，查找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);

248, 105, 129, .4前三行为颜色.第四个是透明度,可以上这个网站自己选择

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

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

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

星标

打开GitHub角落,复制喜欢的样式
打开themes/next/layout/_layout.swig，在.

<div class="headband"></div>

下添加复制的内容

5.留言板

留言板使用的前提是，已经设置了评论插件

根目录右键打开Git Bash，输入以下指令新建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

（三）侧边区域配置

头像设置

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

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

浏览进度显示

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

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

本地搜索Local Search

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

npm install hexo-generator-searchdb --save

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

搜索功能
# 
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

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

local_search:
  enable: true
  # -1列出所有，此处设置列出3
  top_n_per_article: 3