next优化

hexo next7.80主题


记录一下自己对next主题的修改和优化

为方便阅读,下面将根目录指定为hexo

安装 next主题在 hexo 下执行命令

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

数据文件

自从 NexT-7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。

本文后续修改基于此种方案。

  • hexo/source/_data 目录中创建 next.yml(如果_data 不存在,则创建目录)。
  • 将**所有 NexT 主题选项( hexo/themes/next/_confing.yml )**复制到 hexo/source/_data/next.yml 中。
  • next.yml 搜索 override 将选项改为 true

这样后续更改不必再改动 hexo/themes/next/_confing.yml 直接更改 next.yml 中的选项即可.

  • 数据文件的介绍详见:NexT 中文文档 - 快速入门 - 数据文件

这样做的好处可以直接通过 git pull 平滑更新。

next.yml

NexT分主题设置

next.yml 中搜索 Schemes

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

根据自己喜好选择相应主题默认样式为 Muse

菜单设置

next.yml 中搜索 menu

1
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home //首页
about: /about/ || fa fa-user //关于
tags: /tags/ || fa fa-tags //标签
categories: /categories/ || fa fa-th //分类
archives: /archives/ || fa fa-archive //归档
#schedule: /schedule/ || fa fa-calendar //日程表
#sitemap: /sitemap.xml || fa fa-sitemap //站点地图
#commonweal: /404/ || fa fa-heartbeat //公益404

根据需要取消相应注释

头像设置

next.yml 中搜索 avatar

1
2
3
4
avatar:
url: /images/avatar.jpg # 设置头像资源的位置
rounded: true # 开启圆形头像
rotated: false # 不开启旋转

next.yml 中搜索 favicon

1
2
3
4
5
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

可以看到有四种效果,一般我们只需将medium换成我们自己图标路径就行了。

回到顶部

next.yml 中搜索 back2top

1
2
3
4
5
6
7
back2top:
# 开启右下角的回到顶部箭头
enable: true
# 将回到顶部按钮改到侧边栏下方
sidebar: false
# 回到顶部不止显示箭头,也显示阅读进度百分比
scrollpercent: true

代码风格

next.yml 中搜索 codeblock

1
2
3
4
5
6
7
8
9
10
11
12
13
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: solarized
# Add copy button on codeblock
#若将copy_button.enable设为true,可在代码块右侧开启复制按钮,点击即可复制代码
copy_button:
enable: true
# Show text copy result.
show_result: false
# Available values: default | flat | mac
style:

styles.styl

next.yml 中搜索 #style: source/_data/styles.styl 取消注释,在 hexo/source/_data/ 中新建 styles.styl 要添加什么功能直接复制代码到 styles.styl 中。

1
2
3
4
custom_file_path:

- #style: source/_data/styles.styl
+ style: source/_data/styles.styl

设置背景图片

1
2
3
4
5
6
7
body {
background:url(/images/yourbackground.jpg);
background-repeat: no-repeat;
background-attachment:fixed; //不重复
background-size: cover; //填充
background-position:50% 50%;
}
  • background:url 为图片路径,也可以直接使用链接。
  • background-repeat:若果背景图片不能全屏,那么是否平铺显示,充满屏幕
  • background-attachment:背景是否随着网页上下滚动而滚动,fixed 为固定
  • background-size:图片展示大小,这里设置 100%,100% 的意义为:如果背景图片不能全屏,那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

博客内容透明化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9);
}

//搜索框(local-search)的透明度设置
.popup {
opacity: 0.9;
}

页面局部圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//按钮圆角化
.btn {
border-radius: 20px;
}
//代码块圆角化
.highlight {
border-radius: 5px;
}
//代码块复制按钮圆角
.copy-btn {
border-radius: 5px;
}
//底部页面数字跳转链接圆角化
.page-number {
border-radius: 5px
}
.extend {
border-radius: 5px;
}

参考文章:

  • Hexo-NexT 版本更新记录
  • 使用hexo在github上搭建博客:个性化篇
  • Hexo-NexT 设置博客背景图片