Hexo-Next主题优化

• 添加动态背景
• 添加背景图片
• 侧边栏设置
• 头像设置（圆形+旋转）
• 浏览页面显示当前浏览进度
• 添加顶部加载条
• Hexo-Next代码复制功能

1. 添加动态背景

动态背景就是我的博客背景中动的那些粒子。

只需修改主题配置文件 /themes/next/_config.yml

# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: true

上面三个，想开哪个背景，就把哪个改为true。

2. 添加背景图片

1>. 首先，找一张大一点的图片，

建议在Bing引擎B上找。比如我找到这么一张，分辨率是1920*1080,在此给它命名为bk1.jpg

把这张图片存在/themes/next/source/images,然后配置程序，

2>. \themes\next\source\css_custom中，加入以下代码，

body {
    background: url(/https/blog.csdn.net/images/bk1.jpg);       //https://source.unsplash.com/random
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:cover;
}

• background: url(/images/bk1.jpg); //这里是图片的路径 我后面给的网址填进去可以让每次打开博客都有不同的背景图片。
• background-repeat: no-repeat;//让图片不重复出现。比如，如果你的图片比较小，网页又比较短，这个背景图就会生成多个同样的图片去覆盖整个页面，样式很丑。💩
• background-position:50% 50%; //这里是设置图片大小，默认设置最合适不过了，不用修改。
• background-size:cover; //完美覆盖。👍

3>. 修改透明度

背景图片遮盖文章内容，让阅读者很难受，所以需要调整文章背景的透明度。

到\themes\next\source\css_custom，在里面加入以下代码

.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #FFFFF0;
    opacity: 0.8;
    min-height: 500px;
}

• margin-top: 60px; padding: 60px 60px 60px 60px; //文章背景框框的大小这样挺合适的，不用改。（针对一般用户）
• background: #FFFFF0;//修改文章背景框内部颜色。
• opacity: 0.8; //设置透明度，博主调了很多数值，个人认为0.8最合适。（0是全透明，1是不透明）
• min-height: 500px; //顾名思义，背景高度。

效果你现在就可以看到我的博客背景及文章样式，在此就不脱裤子放p（–多此一举）了呢！😁

3. 侧边栏设置

1>. 修改合适的主题方案

首先打开主题配置文件

/themes/next/_config.yml，找到以下代码，

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

需要哪个方案就把哪个主题前面的“#”去掉，这里需要强调的是有些主题方案是不带侧边栏的，所以选择时需要注意。

2>. 修改侧边栏参数

（contrl+F）在主题配置文件搜索sidebar，找到以下代码段

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/icon.jpg                    #设置你的头像的图片
#rounded: true
#opacity: 0.5
#rotated: true
# Table Of Contents in the Sidebar
toc:
  enable: true                               #文章打开时显示目录

  # Automatically add list number to toc.
  number: false

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero