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

发表评论

电子邮件地址不会被公开。 必填项已用*标注