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.styl

v6.x v7.x v8.x 都支持上面这种方法

Next主题个性化文件

Hexo + NexT8主题配置透明背景过程踩坑小记


(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&amp;m=7&amp;c=e63100&amp;cr1=ffffff&amp;f=arial&amp;l=0&amp;bv=90&amp;lx=-420&amp;ly=420&amp;hi=20&amp;he=7&amp;hc=a8ddff&amp;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] 个人博客网站搭建与优化