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: pos