hexo+next博客美化——自定义样式

我们调整样式的时候也不要直接操作next主题下的样式文件，将自定义文件与主题文件分开无疑是个很好的选择，我们在博客目录下的source新增一个_data目录，在该目录下新建styles.styl，这个文件将存放我们自定义的样式，然后在备用主题配置文件中custom_file_path选项里面讲style那一行取消注释。以下样式作参考，需要的大佬可以拷贝过去自行尝试！

//背景图片
body {
  background :url(https://xxxx);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:100% 100%;
}
//首页文章描述
blockquote p{
 font-size: 16px;
}
//阅读全文按钮样式
.post-button .btn{
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.35);
    border: none  !important;
    transition-property: unset;
    padding: 0px 15px;

}
.post-button .btn:hover{
    color: rgb(255,255,255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.35);
    background-image: linear-gradient(90deg,#5587CE 0%,#21487a 25%,#3537a5 50%,#21487a 75%,#5587CE 100%);
    

}
//修改链接选中样式
a,span.exturl{
  border-bottom: none;
  &:hover {
     color: #ff106c;  
}
}



//修改选中字符的颜色
::selection {
  background: #26a69a;
  color: #ffffff;
  font-weight: 900;
  font-size: 32px;
}
::-moz-selection {
  background: #26a69a;
  color: #ffffff;
  font-weight: 900;
  font-size: 32px;
}


//去掉顶部黑线
.headband{
  display: none;
}

//修改选中字符的颜色
::selection {
  background: #26a69a;
  color: #ffffff;
  font-weight: 900;
  font-size: 32px;
}
::-moz-selection {
  background: #26a69a;
  color: #ffffff;
  font-weight: 900;
  font-size: 32px;
}

//博客内容透明化
//菜单栏的透明度设置
.header .header-inner {
  background: rgba(255,255,255,0.85);
  margin-top: 20px;
  overflow: hidden;
}
//文章内容的透明度设置
.main-inner {
  opacity: 0.9;
}
//侧边框的透明度设置
.sidebar {
  background rgba(255,255,255,0)
}
.sidebar-inner{
  background: rgba(255,255,255,0.85);
}

.site-brand-container{
   
   opacity: 0.8;
}

//页面内容框样式
.post-block{
margin-top: 40px;
margin-bottom: 30px;
margin-left: 20px;
}

hr{
  margin-top: 10px;
  margin-bottom: 10px;
}
.posts-expand .post-meta {
margin-bottom: 10px;
}

.back-to-top{
background: rgba(255,255,255,0)
}


//标签页面样式
.tag-cloud a{
    box-shadow: 0 1px 3px  #5587CE,0 1px 2px  #5587CE;
    padding: 2px 10px;
    margin: 8px;
    background: rgba(193, 66, 92, 0);
    border-bottom: none;
    border-radius: 20px;

}

// 分类&&标签 页面样式
.post-block.page {
    margin-top: 40px;
}

.category-list {
    overflow: auto;
}
.category-list li {
    height: 100%;
    float: left;
    border-right: 3px solid #222;
    padding: 0 20px;
}
.category-list li a:hover {
    color: black;
}
.category-list li.active a {
    font-weight: bold;
    color: black;
}
//页脚文字颜色
.footer-inner{

  color: #ffffff;
}

样式大概就这些，这些在我博客已经是调整好的了，但是我不敢保证在其他的博客网站上可以完全正常，所以拷贝的话需要做测试才行！
我的博客：https://blog.z7sz.top