前两天说要使自己的博客变得更加简洁,今天就花了半天时间修改nexT主题,改的花里胡哨的,打脸了···
哈哈哈,不过个人觉得改的还是蛮好看的,于是就给大家出个教程吧。
博客展示
可以通过小栈访问。
基本配置
修改作者头像并旋转
打开\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;
- 更改头部site-title的字体颜色
- 底部文字颜色
底部文字颜色的修改就显得很简单了,还是在
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