网上很多关于主题美化的教程都是老版本 next 5.1 的,最近更新到 next 7 之后摸索了好久才找到简单有效的自定义主题方式,下面是具体的操作。
修改主题下 _config.yml
文件,找到下面这一部分,也即注释掉最后一行
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
然后在博客根目录下创建文件 your_blog/source/_data/styles.styl
,注意是博客根目录下的 source/
而不是主题下的目录 source/
,然后我们就可以在这个文件里边添加自定义配置。
注意想自定义博客外观的话尽量都在这个文件里修改,不要修改其他原始文件,毕竟这个修改坏了删掉就是了,后面所有的修改都是在这一个文件里边添加内容,是不是很简单呢?
// 修改背景图片
body {
background: url(/images/background/blue.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
// 修改主体透明度
// 这个设置并不好使,会使整个页面蒙上一层不透明白色图层,不建议使用
// 建议使用下面的 .post-block 与 .comments
//.main-inner {
// background: #fff;
// opacity: 0.8;
//}
// 修改文章块透明度
.post-block {
padding: $content-desktop-padding;
background: rgba(255,255,255,0.9); //white;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
}
// Comments blocks.
.comments {
padding: $content-desktop-padding;
margin: initial;
margin-top: sboffset;
background: rgba(255,255,255,0.9); //white;
box-shadow: $box-shadow;
border-radius: $border-radius;
}
// 修改菜单栏透明度
.header-inner {
opacity: 0.8;
}
// 设置主页面宽度
.header{
width: 90%;
+tablet() {
width: 100%;
}
+mobile() {
width: 100%;
}
}
.container .main-inner {
width: 90%;
+tablet() {
width: 100%;
}
+mobile() {
width: 100%;
}
}
.content-wrap {
width: calc(100% - 260px);
+tablet() {
width: 100%;
}
+mobile() {
width: 100%;
}
}
下面是我的个人博客,就是修改后的外观
https://glooow1024.github.io/
https://glooow.gitee.io/