这几天对博客做了一次大更新，换了、添加了挺多东西的，打算做个记录。以下所有更改，都基于NexT主题
将背景从原本的自动更换的图片背景更改为动态背景。
方法很简单，只需要在主题配置文件中，找到以下内容，将false改成true即可。
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true //false->true
# canvas_sphere
canvas_sphere: false同时，对于原本的图片背景，只需这样处理:
- body {
- background:url(https://unsplash.it/1600/900?random);
- background-repeat: no-repeat;
- background-attachment:fixed;
- background-position:50% 50%;
- }替换顶部加载进度条
将原本的进度条替换为NexT自带的进度条。 在主题的配置文件中找到下面这一段，将pace改为true，并在pace_theme处选择自己喜欢的进度条样式。
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal加入"fork me on github"的标签
到这个网站上找到自己喜欢的样式，然后 粘贴到themes/next/layout/_layout.swig中。具体来说就是
<div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>
+ <a href="your_github_url" class="github-corner" ...修改鼠标指针样式
在custom.styl中加入以下代码
添加“关于”页面，并使用居中引用来引用句子
居中引用的HTML使用方法：
效果：
在回到顶部按钮上加入显示当前阅读进度的功能,同时对该按钮的样式进行修改
在主题配置文件中做如下修改：
这个按钮原本的形状是方形的，同时里面的三条线是白色的，我将它的形状改成了圆角方形，线的颜色改成了淡蓝色,另外还增加了阴影效果。这也只需要在custom.styl中修改
.back-to-top {
line-height: 1.5;
right: 29px;
color: rgb(255,255,255);
padding-right: 5px;
padding-left: 5px;
padding-top: 2.5px;
padding-bottom: 2.5px;
background-color: rgb(0,0,0);
border-radius: 3px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}为文章边框加入阴影效果。
方法还是修改custom.styl
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
+ box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.35);
opacity: 0.75;
min-height: 500px;
}取消页面上方黑边
默认情况下，NexT会在页面的上方加一条黑边到底为什么要做这种没用的事，取消黑边的方法是在custom.styl中加入以下代码：
修改侧边滚动条
在custom.styl中加入以下代码：
//侧边滚动条
::-webkit-scrollbar {
width: 9px;
height: 10px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
display: none;
}
::-webkit-scrollbar-corner {
display: block;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-button:start {
width: 10px;
height: 10px;
background: url(../images/scrollbar_arrow.png) no-repeat 0 0;
}
::-webkit-scrollbar-button:start:hover {
background: url(../images/scrollbar_arrow.png) no-repeat -15px 0;
}
::-webkit-scrollbar-button:start:active {
background: url(../images/scrollbar_arrow.png) no-repeat -30px 0;
}
::-webkit-scrollbar-button:end {
width: 10px;
height: 10px;
background: url(../images/scrollbar_arrow.png) no-repeat 0 -18px;
}
::-webkit-scrollbar-button:end:hover {
background: url(../images/scrollbar_arrow.png) no-repeat -15px -18px;
}
::-webkit-scrollbar-button:end:active {
background: url(../images/scrollbar_arrow.png) no-repeat -30px -18px;
}修改网站标题为 -xGeminix- ;修改网站副标题为 TayE's Blog
在blog_config.yml中找到title和subtitle修改即可。
这两项修改都需要部署后才能看到效果！
加入了分享功能
方法是在主题的配置文件中找到下面这一段，然后把enable的false改为true，再根据自己想要的样式将float或postbottom中的enable改为true
因为微信分享有点问题(二维码图片无法加载)，而我又不会修复，所以就删掉了这一功能
保存当前阅读进度，下次阅读时直接从上次结束阅读的位置开始
方法是将主题配置文件的save_scroll改为true