Hexo_更换主题（Next）

---

Hexo_更换主题（Next）

Hexo更换主题，只需要将主题文件拷贝到自己博客根目录下的themes子目录内，然后修改配置文件，即可将hexo默认的主题更换为自己想要的主题。

下载Next

打开git bash here命令提示符，执行

cd 博客根目录

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

Note: 最近github非常卡顿经常出现clone失败，最好直接上述网址直接下载，解压到themes子目录下。

---

启用Next

与所有Hexo主题启用的模式一样，当Next下载完毕后，打开博客根目录下的配置文件，找到

theme: landscape

将其修改为

theme: next

到此，NexT主题更换完成了。

---

Next主题配置

进行themes子目录下的next目录，找到next的主题配置文件，进行一定参数的修改满足自身的使用。

设置外观

Next默认支持四种外观，分别是

1. Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
2. Mist - Muse 的紧凑版本，整洁有序的单栏外观
3. Pisces - 双栏 Scheme，小家碧玉似的清新
4. Gemini - 新增 Scheme，类似Pisces

在配置文件中搜索Schemes，根据个人爱好进行选择

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

Note: 外观只能四选一

---

设置菜单栏

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。具体设置可参考[1]。（我使用的是默认参数）

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

Note: ||之前不能有空客，否则会出现点击菜单栏下的首页、归档、分类会出现乱码错误。

添加分类页面

分类和标签其实大同小异，我这里暂时只需要分类就可以将文章进行整理了，所以只用到了分类。

新建分类页面

在vscode终端中执行

hexo new page categories

设置分类页面

在刚刚新建的categories子目录下打开index.md文件，并将type设置为categories，主题将自动为这个页面显示分类。

---
title: categories
date: 2022-03-30 13:00:52
type: "categories"
---

修改主题配置文件

打开主题配置文件，并在菜单中添加分类（categories）链接。我的菜单参数如下：

menu:
  home: /|| home
  categories: /categories/|| th
  archives: /archives/|| archive

将文章添加到分类中去

打开自己新建的文章或已编写好的文章，添加

categories:
- 分类名称

例如：

---
title: FPGA通信第一篇--USB2.0
date: 2022-04-01 09:08:47
categories:
- FPGA通信技术
tags:
---

---

更换背景图片

1.在\themes\next\source\images目录下新建文件夹Background，并将需要的背景图片添加到此文件夹下
2.打开\themes\next\source\css_custom目录下的custom.styl文件，添加代码

    //背景图片设置
    body {
        background-image: url(/images/Background/1.1.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed; //CSS属性
        background-size: 100% 100%;
    }

其中

background-image:url 为图片路径，可以直接使用链接，也可以是图片路径。

background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕。

background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定。

background-size：图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

设置页面透明度

打开\themes\next\source\css_custom目录下的custom.styl文件，添加代码

.content-wrap {
  opacity: 0.9;
}

.sidebar {
  opacity: 0.9;
}

.header-inner {
  background: rgba(255,255,255,0.9);
}

.popup {
  opacity: 0.9;
}

---

参考

[1]next官方教程
[2] hexo next踩坑侧边栏菜单链接乱码问题
[3] next主题添加背景图片
[4] next设置页面透明度
[5] CSS属性
[6] hexo-next的翻页按钮不正常显示
[7] 个人博客地址

---