Next主题
Hexo博客 Next主题
(1) Next主题
Next主题有多个版本
| 时间 | 版本 | 仓库地址 | 对应官网 |
|---|---|---|---|
| 2014 ~ 2017 | 0.1.0 ~ 5.1.4 | https://github.com/iissnan/hexo-theme-next | - |
| 2018 ~ 2019 | 6.0.0 ~ 7.8.0 | https://github.com/theme-next/hexo-theme-next | https://theme-next.org/index.html |
| 2020 ~ 至今 | 8.0.0 ~ | https://github.com/next-theme/hexo-theme-next | https://theme-next.js.org/ |
https://github.com/next-theme/hexo-theme-next/issues/4
https://github.com/next-theme/hexo-theme-next/issues/4#issuecomment-626205848
(1.1) Next主题配置文件
Next主题 6.x 7.x 8.x的配置在 blog/_config.next.yml，目的是为了和next主题的_config.yml解耦，同时解决每次merge合并代码冲突的烦恼。
(2) 主题通用配置
配置文件使用 blog/_config.next.yml
(2.1) 主题风格
NexT主题 风格为 Muse
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini(2.2) 侧边栏标题配置
# 侧边栏中的目录(标题)配置
toc:
enable: true
# 自动将列表(标题)编号添加到目录中。
number: false
# 如果为 true，则当标题宽度长于侧边栏宽度时，所有单词都将放置在下一行。
wrap: false
# 如果为 true，则将显示帖子中所有级别的目录，而不是其中激活的部分。
expand_all: false
# 生成目录(标题)的最大深度。 最多支持6级标题 ######
max_depth: 6(3) 个性化设置
修改blog的 $blog/_config.next.yml 文件
修改后如下
# filepath: blog/_config.next.yml
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.stylv6.x v7.x v8.x 都支持上面这种方法
(3.1) style配置
(3.1.1) 设置背景
修改 blog/source/_data/styles.styl 文件，添加以下配置
// source/_data/styles.styl
// background
body {
background-image:url(../images/background.jpg);
height:100%;
width:100%;
background-repeat:repeat-x;
background-attachment:fixed; //不滚动
background-size:100% 100%; //填充
}(3.1.2) 设置透明度
修改 blog/source/_data/styles.styl 文件，添加以下配置
//###### 博客内容透明化 ######
//文章内容的透明度设置
//文章内容的透明度设置+文章边框设置
.post-block {
margin-top: 60px; // 内容
margin-bottom: 60px;
padding: 35px; // 内容边框
background: rgba(255,255,255,0.9) none repeat scroll !important; // 内容不透明
}
//分页(主页最下面的那一小块)
.pagination {
background: rgba(255,255,255,0.9);
}
//菜单栏背景
.header-inner {
background: rgba(255,255,255,0.9);
}
//侧边框的透明度设置
.sidebar-inner {
background: rgba(255,255,255,0.9) none repeat scroll !important;
}
//搜索框（local-search）的透明度设置
.popup {
opacity: 0.9;
}
//评论区
.comments {
background: rgba(255,255,255,0.9);
}(3.2) variables配置
(3.2.1) 设置页面内容宽度
next主题默认配置在 blog/themes/next/source/css/_variables/base.styl
// Layout sizes
// --------------------------------------------------
$content-desktop = 700px;
$content-desktop-large = 800px;
$content-desktop-largest = 900px;
$content-desktop-padding = 40px;
$content-tablet-padding = 10px;
$content-mobile-padding = 8px; 需要添加自定义配置 source/_data/variables.styl
$content-desktop = 80%
$content-desktop-large = 85%
$content-desktop-largest = 90% 并且修改配置文件，blog的 blog/_config.next.yml
把 variable: source/_data/variables.styl 前面的#去掉
Hexo Next 主题优化
How-to-Change-Content-Width
(4) Next插件
(4.1) Next主题添加Waline评论系统
npm install @waline/hexo-next# Waline 评论
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:
enable: true #是否开启
serverURL: xxx # Waline #服务端地址，我们这里就是上面部署的 Vercel 地址
placeholder: 欢迎评论 # #评论框的默认文字
avatar: mm # 头像风格
meta: [nick, mail, link] # 自定义评论框上面的三个输入框的内容
pageSize: 10 # 评论数量多少时显示分页
lang: zh-cn # 语言, 可选值: en, zh-cn
# Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.
visitor: false # 文章阅读统计
comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
requiredFields: [] # 设置用户评论时必填的信息，[nick,mail]: [nick] | [nick, mail]
libUrl: # Set custom library cdn url(4.2) Next主题添加3d小地球实时访客统计工具
Revolver Maps 是一个交互式的网站访客地图。每一个浏览者的位置都会实时在由 Canvas 渲染的地球上标记出来。
官网 https://www.revolvermaps.com/
改动点：
在 $blog/themes/next/layout/_partials/sidebar/site-overview.njk 文件尾部添加以下代码
<div class="revolvermaps">
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5rcgvdncuwu&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&rs=80" async="async"></script>
</div> 参考文章
一行代码为你的网站添加一个3d小地球实时访客统计工具
Hexo5-在博客主页侧边栏添加网易云音乐外链&访问者地图
个人博客网站搭建与优化
参考资料
[1] Next主题自定义文件
[2] hexo-next主题优化
[3] Hexo之Next主题美化代码
[4] Hexo Next 主题优化
[5] How-to-Change-Content-Width
[6] 一行代码为你的网站添加一个3d小地球实时访客统计工具
[7] Hexo5-在博客主页侧边栏添加网易云音乐外链&访问者地图
[8] 个人博客网站搭建与优化