Next主题允许用户使用自定义样式个性化设置自己网站的主题,本文介绍使用自定义样式的方法。
去掉
主题配置文件
中custom_file_path
字段style
值的注释
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
此时我们已经允许博客运用
source/_data/styles.styl
中的样式,此处要说明的是,此处的source代表的是Hexo根目录的source文件夹,不是next主题中的source
在Hexo -> source文件夹下建立
_data
文件夹,新建文件styles.styl
文件,在文件中设置的css会被应用到站点中:
事实上在Next 7.7 主题中已经放置了用户自定义设置的styl文件,具体位置: themes/next/source/css/custom.styl 将该文件内容复制到刚刚新建的
styles.styl
文件中,此时站点已经发生了一些变化
文件中的注释很友好,用户可以方便地修改成自己喜欢的样式。
我简单按照自己的想法配置了
styles.styl
文件:
// Custom styles.
// 网站最顶部条线的颜色
.headband {
height: 0px;
background: #F2F4EF;
}
// 设置背景图片
body{
background:url(/images/bg.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
// 设置侧边栏左上角网站标题和副标题区颜色
.site-meta {
background: #222222;
}
// 设置侧边栏网站标题样式
.site-title {
color:#fff;
}
// 设置侧边栏网站标题鼠标悬浮样式
.site-title:hover {
letter-spacing: 0.4rem;
}
// 侧边栏网站副标题样式
.site-subtitle {
color:#fff;
}
.site-author-image{
border: 0px;
}
// 文章标题鼠标悬浮下划线样式
.posts-expand .post-title-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #DfA710;
visibility: hidden;
transform: scaleX(0);
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
// 文章标题颜色
.posts-expand .post-title-link {
color:#DfA710;
}
// 阅读全文按钮样式
.btn {
border:2px solid #DfA710;
color:#DfA710;
}
// 阅读全文按钮鼠标悬浮样式
.btn:hover {
border-color: #DfA710;
color: #fff;
background: #DfA710;
}
// 设置文章和侧边栏中链接样式
a:hover,
span.exturl:hover {
color: #DfA710;
border-bottom-color: #DfA710;
}
// 修改文章页侧边栏文章目录下面的第一个标题的鼠标悬浮样式
// 真的有毒,文章目录第一个标题的样式还是单独设置的...一开始还没发现
.post-toc .nav .active-current > a:hover {
color: #DfA710;
}
// 文章页面左边文章标题颜色
.post-toc ol a:hover {
color: #DfA710;
border-bottom-color: #DfA710;
}
// 文章页面左边文章标题active时颜色
.post-toc .nav .active > a {
color: #DfA710;
border-bottom-color: #DfA710;
}
// 文章页侧边栏文章目录和站点概况鼠标悬浮样式
.sidebar-nav li:hover {
color: #DfA710;
}
// 文章页侧边栏文章目录和站点概况active时鼠标悬浮样式
.sidebar-nav .sidebar-nav-active:hover {
color: #DfA710;
}
// 文章页侧边栏文章目录和站点概况active时样式
.sidebar-nav .sidebar-nav-active {
color: #DfA710;
border-bottom-color: #DfA710;
}
// 社交栏鼠标悬浮样式
#sidebar div.links-of-author.motion-element a:hover {
color: #DfA710;
background: rgba(255, 255, 255, 0);
}
// 友链鼠标悬浮样式
.sidebar a:hover,
.sidebar span.exturl:hover {
border-bottom-color: #DfA710;
color: #DfA710;
}
// RSS文字颜色
//#sidebar div.feed-link.motion-element > a {
// color: #DfA710;
//}
// RSS图标颜色
//#sidebar div.feed-link.motion-element > a i{
// color: #DfA710;
//}
// 侧边栏日志、分类、标签 上面的数字的颜色
.site-state-item-count {
color: #DfA710;
}
// 设置底部文章分页数字鼠标悬浮上划线颜色
.pagination .prev:hover,
.pagination .next:hover,
.pagination .page-number:hover {
border-top-color: #DfA710;
}
// 设置文章页上一篇文章和下一篇文章鼠标悬浮样式
.post-nav-item a:hover {
color: #DfA710;
border-bottom: none;
}
// 修改鼠标选中字符的颜色
/* webkit, opera, IE9 */
::selection {
background: #DfA710;
color: #f7f7f7;
}
/* firefox */
::-moz-selection {
background: #DfA710;
color: #f7f7f7;
}
// 侧边栏返回顶部按钮鼠标悬浮样式
.back-to-top:hover {
background: #eee;
color: #DfA710;
}
// 当页面处于 首页、标签、分类、归档、关于页面其中之一时,处于哪个页面哪个选项就变蓝
#menu > li.menu-item-active > a {
color: #DfA710;
}
// 侧边栏导航小圆点颜色
.menu-item-active a:after,
.menu .menu-item a:hover:after,
.menu .menu-item span.exturl:hover:after {
background-color: #DfA710;
}
// 侧边栏上半部分设置为透明
.menu-item-active a,
.menu .menu-item a:hover,
.menu .menu-item span.exturl:hover {
background: rgba(242, 242, 242, 0.30);
border-bottom-color: rgba(255, 255, 255, 0.2);;
}
// 侧边栏下半部分设置为透明
.sidebar{
background: rgba(255, 255, 255, 0.0);
}
.sidebar-inner{
background: rgba(255, 255, 255, 0.2);
}
// 设置底部文章分页部分为透明
.pagination{
background: rgba(255, 255, 255, 0.0);
}
.pagination .page-number.current {
color: #fff;
background: #DfA710;
}
// 导航栏底部百分比透明
.back-to-top,
.back-to-top:hover
{
background: rgba(255, 255, 255, 0.3);
}
// 设置文章背景透明度
.post-block{
background: rgba(255, 255, 255, 0.2);
}
// 这里需要完全透明,不然就会在上面的0.2基础上再进行透明度计算
.btn{
background: rgba(255, 255, 255, 0);
}
.header-inner{
background: rgba(255, 255, 255, 0.2);
}
.main-inner {
background: rgba(255, 255, 255, 0.2);
}
.site-brand-container
{
background: #222222;
}
// 代码区背景
.table-container{
background: rgba(240, 240, 222, 0.2);
}
.table-container :hover {
background: rgba(237,237, 225, 0.03);
}
// 代码背景
table > tbody > tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.0);
}
table > tbody > tr:hover {
background-color: rgba(233,230, 230, 0.0);
}
pre,
.highlight {
background: rgba(200, 31, 33, 0);
}
//代码行标背景
.highlight .gutter pre {
background: rgbargba(227, 235, 227, 0.3);
}
.highlight .code pre {
background: rgba(29, 31, 100, 0);
}
// 评论
.comments {
background: rgba(255, 255, 255, 0.2);
}
// 文章页内作者信息
.post-copyright {
border-left: 3px solid #DfA710;
background: rgba(255, 255, 255, 0.3);
}
/* 行内代码块的自定义样式 */
code {
color: #FFFFFF;
background: rgba(239, 183, 48, 0.4);
margin: 2px;
border: 0px solid #DfA710;
}
// 底部动态的叶子图标
.with-love{
color: red;
}
// 去掉文章白色背景
.main-inner {
background: rgba(255,255,255,0.0);
}
// 标签页链接下划线颜色
a,
span.exturl {
border-bottom: 1px solid #DfA710;
}
// 标签页链接鼠标悬浮颜色
.tag-cloud a:hover {
color: #DfA710 !important;
}
其中背景图像 bg.jpg 存放在主题source中的images文件夹内 初步效果:
当我们想修改页面的某个地方时,具体该添加哪个样式表呢? 解决这个问题可以用浏览器的调试工具(一般浏览器
F12
可以调出),查看感兴趣内容的名称,建立同名css可以覆盖原有样式,例如我要修改侧边栏导航部分的背景颜色
确定了元素名为
header-inner
,在styles.styl中配置相应的css:
.header-inner{
background: rgba(255, 0, 0, 1);
}
然后,可以明显地看到效果
妈耶,赶紧改回来。 反正就是这么改的啦。