hexo nexT主题下博客的美化及进阶设置

04 06, 2019 教程

hexo nexT主题下博客的美化及进阶设置

前两天说要使自己的博客变得更加简洁，今天就花了半天时间修改nexT主题，改的花里胡哨的，打脸了···

哈哈哈，不过个人觉得改的还是蛮好看的，于是就给大家出个教程吧。

博客展示

可以通过小栈访问。

blog

blog2

基本配置

修改作者头像并旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

修改文章内链接文本样式

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

给页面添加背景图片

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

body{   
        background:url(图片链接);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
     }

其中的css样式属性都可以根据你的自定义图片来更改，以达到最佳的效果。

文字背景以及透明度

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

.content {
            border-radius: 10px;
            margin-top: 60px;
            background:rgba(颜色rgb,透明度) none repeat scroll !important;
         }

其中border-radius是给文章背景设置圆角，margin-top是设置文章到顶部的距离，其中属性可根据自己的需要进行调整。

在修改完文章背景色之后，文字颜色可能和背景色不能很好的搭配，这时候我们就需要修改文章字体的颜色了。打开theme/next/source/css/_common/scaffolding文件夹下的base.styl文件，找到body{}，将其中的color:$text-color更改为你想要的颜色即可。代码如下：

body {
  position: relative; /* Required by scrollspy */
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: 颜色代码;
  background: $body-bg-color;

  +mobile() { padding-right: 0 !important; }
  +tablet() { padding-right: 0 !important; }
  +desktop-large() { font-size: $font-size-large; }
}

文章页面宽度设置

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

.main-inner {width: 页面宽度;}

文章内单行代码的样式设置

在上面的设置中如果更改了网页底色，单行代码的颜色可能与背景色不搭配，这时就需要我们自己设置了。具体步骤：
在theme/next/source/css/_custom文件夹下打开custom.styl文件，向里面添加以下代码：

#posts code {color: 颜色代码;background-color:颜色代码;}

其中为code的字体颜色，后者为背景颜色。

其他文章内的颜色可以看一下theme/next/source/css/_common/scaffolding文件夹下的base.styl文件，有需要直接更改即可。

页面头部和底部栏的背景色修改

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

.header {
          background:rgba(颜色rgb,透明度) none repeat scroll !important;
        }

.footer {
          background:rgba(颜色rgb,透明度（0-1之间）) none repeat scroll !important;
        }

头部和底部也可以加入自定义的背景图。只需要在其中加入background:url(图片的链接);即可。

网页顶部和底部的文字颜色修改

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

头部文字颜色
- 更改头部site-title的字体颜色
  在theme/next/source/css/_common/components/header文件夹下打开site-meta.styl文件，找到.brand{}向里面添加以下代码：
```
color: 颜色代码 !important;
```
- 更改头部menu的字体颜色
  在相同的文件夹下打开menu.styl文件，找到a{}，向里面添加以下代码：
```
color: 颜色代码 !important;
```
底部文字颜色
底部文字颜色的修改就显得很简单了，还是在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：
```
.footer-inner {color: 颜色代码;}
```

侧栏背景图以及内部文字颜色的修改

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

#sidebar {
            background:url(图片链接);
            background-size: cover;
            background-position:center;
            background-repeat:no-repeat;
            p,span,a {color: 颜色代码;}
}

其中设置p,span,a{color:颜色代码}，即可修改侧边栏内部文字的颜色。

总结

用过好多的hexo主题，最后还是归于next,究其原因，next非常人性化，给我们这些喜欢折腾的用户留了好多可以修改的“漏洞”。而且，next集成了好多插件，可以直接拿来用，非常方便，总之，next是一款容易上手且适合后期折腾的主题，一些简单的配置可看官方文档.

参考文章

https://segmentfault.com/a/1190000009544924#articleHeader21
http://blog.csdn.net/MasterAnt_D/article/details/56839222#t50
https://thief.one/2017/03/03/Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/><http://mashirosorata.vicp.io/HEXO-NEXT%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE.html

马同学的BLOG