我分别美化了几个不同版本的Next主题，这里把美化代码公布出来，第一种Next版本小于7.3可使用，美化效果如下。
直接修改 \themes\next\source\css\_custom 将以下美化过程复制到custom.styl目录即可。
// ************************************************************************************************
// 全局布局美化代码 (包括,主页背景颜色,主页透明度等全局配置)
// By: lyshark www.blib.cn lyshark.cnblogs.com
// ************************************************************************************************
// 添加主页背景图片与背景颜色
/*body {
// background:url(https://source.unsplash.com/random/1600x900);
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background:#55aaad; // 添加背景颜色
}*/
// 配置全局页面,椭圆化(页面方框变成椭圆的),以及添加透明度(将页面方框透明化)
.header-inner { // 菜单栏
border-radius: 30px 30px 30px 30px;
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); //增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.sidebar-inner { // 头衔栏
border-radius: 30px 30px 30px 30px;
position: absolute;
overflow: hidden;
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); // 增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.post-block { // 主文章页面
border-radius: 30px 30px 30px 30px;
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); // 增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
#posts > article + article .post-block { // 后面的文章
border-radius: 30px 30px 30px 30px;
box-shadow: 10px 10px 3px 0 rgba(0,0,0,0.15), 10px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); //增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.pagination { // 页面分页
border-radius: 30px 80px 30px 80px; // 扁平化,两边非对称
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); //增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
background: #f9f9f99e; // 首页菜单选中后,变成淡白色.
}
// ************************************************************************************************
// 以下代码是针对文章内容的控制 (美化,h2 h3标签,美化代码栏,一二级菜单美化等)
// ************************************************************************************************
// 主标题栏位字体美化
.site-title{
font-family: 'Lato', "PingFang SC", "华文新魏", sans-serif;
font-size: 20px;
}
// 主标题栏位背景颜色美化
.site-meta {
//background-image: linear-gradient(200deg, #e4a0a3, #3F51B5);
background-image: linear-gradient(90deg, #4263c1 0, #ef4ec5 25%, #b255f3 50%, #4eb2ef 75%, #8466ab 100%);
}
// 控制文章中的h2标签颜色
.post-body h2{
font-size: 23px;
font-weight: bold;
background-color: #31a2e4;
border-radius: 20px;
color: #f9f9f9;
padding-left: 8px;
text-shadow: 1px 1px 1px #000;
}
// 控制文章中的h3标签颜色
.post-body h3{
background: #2B6600;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family:"微软雅黑", "宋体", "黑体", Arial;
font-size: 15px;
font-weight: bold;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
border-radius: 20px;
}
// 代码框的美化代码
.highlight {
border-radius: 1px;
background-color: rgb(246, 248, 250);
overflow: auto;
border-width: 1px 1px 1px 2px;
border-style: dashed dashed dashed solid;
border-color: rgb(170, 170, 170) rgb(170, 170, 170) rgb(170, 170, 170) rgb(108, 226, 108);
border-image: initial;
position: relative;
}
// 针对strong标签的美化效果.
strong{
font-weight: bold;
/* background-color: #9f95ff; */
border-radius: 39px;
color: #171be7;
padding-left: 0px;
padding-right: 1px;
text-shadow: 1px 1px 1px #0003;
}
// 针对Code代码标签的美化
code {
padding: 2px 4px;
word-wrap: break-word;
color: #ff7600;
background: #fbf7f8;
border-radius: 3px;
font-size: 15px;
font-weight: bolder;
}
// 一二级菜单美化
blockquote {
padding: 0 15px;
color: #000000;
font-family: cursive;
background-color: #f0faf9;
border-left-color: #42c1b8;
}
// 下划线,美化
hr {
background-color: #86dca3;
}
// 去掉图片的边框,显得更加自然
.posts-expand .post-body img {
border: 1px #6f42c1;
}
// ************************************************************************************************
// 其他美化代码(针对页面标题,文章标题,页面字体颜色,页面控件的美化)
// ************************************************************************************************
// 鼠标选择的段落变成黄色
::selection {
background-color: #59ff83;
color: #555;
}
// 对页面文章的标题的美化
.posts-expand .post-title-link {
color: #d9534f;
}
.posts-expand .post-title {
color: #d9534f;
}
// 针对阅读全文按钮的美化
.post-button .btn {
color: #555!important;
background-color: #fff;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0 0 10px 0 #e346035c;
border: none!important;
transition-property: unset;
padding: 0 15px;
border-radius: 30px 30px 30px 30px;
}
// 当光标放入阅读全文上时,应用下面的配色方案
.post-button .btn:hover{
border-color: #6f42c1;
color: #fff;
background: #e431d3;
background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 光标放到文章列表上面的时候,会变成彩色
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 文章分类页面中,标签的颜色属性.
.category-list a{
color:#6f42c1;
}
// 归档竖线呈现出,彩带效果,包括彩球的美化代码
.posts-collapse::after {
background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
.page-archive .posts-collapse .archive-move-on{
background-color: #fc6423;
}
.posts-collapse .collection-title::before{
background-color: #fc6423;
}
.posts-collapse .post-header::before {
background-color: #f0ffff00;
}
// 美化归档栏整体布局,调整时间日期
.posts-collapse .post-meta {
color: #5073b8;
font-weight: 900;
}
.posts-collapse .post-title {
margin-left: 70px;
}
// 美化标签底部选择按钮(1.2.3.4.5)颜色
.pagination .page-number.current {
background: #a166ab;
border-radius: 20px 20px 20px 20px;
}
.pagination .prev, .pagination .next, .pagination .page-number {
color: blueviolet;
font-weight: 500;
border-radius: 30px 30px 30px 30px;
}
// 顶部进度条的隐藏代码
.headband {
height: 0px;
background: #fc6423;
}
// 归档的美化,设置归档方框美化
.posts-collapse .post-header {
position: relative;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: inherit;
/* padding: 10px; */
/* box-shadow: 0 0 14px #cacbcb; */
/* background: rgba(255,255,255,0.3); */
/* border-radius: 10px; */
/* border-bottom: 1px dashed #f9f9f9; */
box-shadow: 0 1px 3px #6f42c100, 0 1px 2px #6f42c1;
padding: 2px 10px;
margin: 8px;
background: #c1425c00;
border-bottom: none;
border-radius: 20px;
}
// 标签的美化,使用圆形方框美化
.tag-cloud a {
box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
padding: 2px 10px;
margin: 8px;
background: #c1425c00;
border-bottom: none;
border-radius: 20px;
}
next 新版本 7.5以后custom.styl目录消失了，接下来的美化过程针对7.5版本。
修改\themes\NexT\source\css 目录下的main.styl,内容如下。
// CSS Style Guide: http://codeguide.co/#css
$scheme = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';
$variables = base $scheme;
$mixins = base $scheme;
// Variables Layer
// --------------------------------------------------
for $variable in $variables
@import "_variables/" + $variable;
for $inject_variable in hexo-config('injects.variable')
@import $inject_variable;
// Mixins Layer
// --------------------------------------------------
for $mixin in $mixins
@import "_mixins/" + $mixin;
for $inject_mixin in hexo-config('injects.mixin')
@import $inject_mixin;
// Common Layer
// --------------------------------------------------
// Scaffolding
@import "_common/scaffolding";
// Layout
@import "_common/outline";
// Components
@import "_common/components";
// Schemes Layer
// --------------------------------------------------
@import "_schemes/" + $scheme;
// Custom Layer
// --------------------------------------------------
for $inject_style in hexo-config('injects.style')
@import $inject_style;
// ---------------------------------------------------------------------------------------------------
个人定制美化开始步骤
// ---------------------------------------------------------------------------------------------------
body {
// background:url(https://source.unsplash.com/random/1600x900);
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
//background:#55aaad85; // 添加背景颜色
}
// 修改全局字体大小
.post-body {
font-size: 1.0em;
}
// 美化 h2 h3 标签
.post-body h2 {
border-radius: 20px 20px 20px 20px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 9px 2px rgba(10,10,0,0.5);
font-weight: bold;
background-color: #3199e4;
border-radius: 5px;
color: #fff;
padding-left: 8px;
text-shadow: 1px 1px 1px #000;
}
.post-body h3 {
background: #5b9600;
border-radius: 30px 6px 37px 6px;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 2px rgba(10,10,0,0.5);
color: #fff;
font-size: 15px;
line-height: 20px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222;
}
pre, .highlight {
background: #f7f7f7;
color: #5cb85c;
line-height: 1.1;
}
// 归档的美化,设置归档方框美化
.posts-collapse .post-header {
position: relative;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: inherit;
box-shadow: 0 1px 3px #6f42c100, 0 1px 2px #6f42c1;
padding: 2px 10px;
margin: 8px;
background: #c1425c00;
border-bottom: none;
border-radius: 20px;
}
// 顶部进度条的隐藏代码
.headband {
height: 0px;
background: #fc6423;
}
// 标签的美化,使用圆形方框美化
.tag-cloud a {
box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
padding: 2px 10px;
margin: 8px;
background: #c1425c00;
border-bottom: none;
border-radius: 20px;
}
// 美化标签底部选择按钮(1.2.3.4.5)颜色
.pagination .page-number.current {
background: #a166ab;
border-radius: 20px 20px 20px 20px;
}
.pagination .prev, .pagination .next, .pagination .page-number {
color: blueviolet;
font-weight: 500;
border-radius: 30px 30px 30px 30px;
}
// 美化归档栏整体布局,调整时间日期
.posts-collapse .post-meta {
color: #5073b8;
font-weight: 900;
}
.posts-collapse .post-title {
margin-left: 70px;
}
// 归档竖线呈现出,彩带效果,包括彩球的美化代码
.posts-collapse::before {
background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
.page-archive .posts-collapse .archive-move-on{
background-color: #fc6423;
}
.posts-collapse .collection-title::before{
background-color: #fc6423;
}
.posts-collapse .post-header::before {
background-color: #f0ffff00;
}
// 文章分类页面中,标签的颜色属性.
.category-list a{
color:#6f42c1;
}
// 当光标放入阅读全文上时,应用下面的配色方案
.post-button .btn:hover{
border-color: #6f42c1;
color: #fff;
background: #e431d3;
background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 光标放到文章列表上面的时候,会变成彩色
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 针对阅读全文按钮的美化
.post-button .btn {
color: #555!important;
background-color: #fff;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0 0 10px 0 #e346035c;
border: none!important;
transition-property: unset;
padding: 0 15px;
border-radius: 30px 30px 30px 30px;
}
// 鼠标选择的段落变成黄色
::selection {
background-color: #59ff83;
color: #555;
}
// 对页面文章的标题的美化
.posts-expand .post-title-link {
color: #d9534f;
}
.posts-expand .post-title {
color: #d9534f;
}
// 代码框的美化代码
.highlight {
border-radius: 1px;
background-color: rgb(246, 248, 250);
overflow: auto;
border-width: 1px 1px 1px 2px;
border-style: dashed dashed dashed solid;
border-color: rgb(170, 170, 170) rgb(170, 170, 170) rgb(170, 170, 170) rgb(108, 226, 108);
border-image: initial;
position: relative;
}
// 针对strong标签的美化效果.
strong{
font-weight: bold;
/* background-color: #9f95ff; */
border-radius: 39px;
color: #171be7;
padding-left: 0px;
padding-right: 1px;
text-shadow: 1px 1px 1px #0003;
}
// 针对Code代码标签的美化
code {
padding: 2px 4px;
word-wrap: break-word;
color: #ff7600;
background: #fbf7f8;
border-radius: 3px;
font-size: 15px;
font-weight: bolder;
}
// 一二级菜单美化
blockquote {
padding: 0 15px;
color: #000000;
font-family: cursive;
background-color: #f0faf9;
border-left-color: #42c1b8;
}
// 下划线,美化
hr {
background-color: #86dca3;
}
// 去掉图片的边框,显得更加自然
.posts-expand .post-body img {
border: 1px #6f42c1;
}
// 主标题栏位字体美化
.site-title{
/*font-family: 'Lato', "PingFang SC", "华文新魏", sans-serif;*/
/*font-size: 20px;*/
}
// 主标题栏位背景颜色美化
.site-meta {
//background-image: linear-gradient(200deg, #e4a0a3, #3F51B5);
//background-image: linear-gradient(90deg, #4263c1 0, #ef4ec5 25%, #b255f3 50%, #4eb2ef 75%, #8466ab 100%);
}
// ---------------------------------------------------------------------------------------------------------------------------------------------
// 暂时屏蔽全局美化过程
/*
// 配置全局页面,椭圆化(页面方框变成椭圆的),以及添加透明度(将页面方框透明化)
.header-inner { // 菜单栏
border-radius: 30px 30px 30px 30px;
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); //增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.sidebar-inner { // 头衔栏
border-radius: 30px 30px 30px 30px;
position: absolute;
overflow: hidden;
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); // 增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.post-block { // 主文章页面
border-radius: 30px 30px 30px 30px;
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); // 增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
#posts > article + article .post-block { // 后面的文章
border-radius: 30px 30px 30px 30px;
box-shadow: 10px 10px 3px 0 rgba(0,0,0,0.15), 10px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); //增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.pagination { // 页面分页
border-radius: 30px 80px 30px 80px; // 扁平化,两边非对称
box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12); //增加阴影部分
// background: rgba(255,255,255,.5); // 增加透明度
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
background: #f9f9f99e; // 首页菜单选中后,变成淡白色.
}
*/
// ------------------------------------------------------------------------------------------
// 二次深度美化
// ------------------------------------------------------------------------------------------
// 给文章概述与文章内容添加上一个方框。
.content .posts-expand .post-block{
position: relative;
margin-bottom: 30px;
padding: 40px 20px;
font-size: 14px;
box-shadow: rgba(0,0,0,0.1) 0px 15px 35px 0px, rgba(0, 0, 0, 0.31) 6px 6px 10px 0px;
border-radius: 16px;
background-color: #fff;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
transform-style: preserve-3d;
}
.post-expand .post-body{
position: relative;
overflow: visible;
padding: 20px;
color: #666;
font-size: 15px;
word-break: break-word;
}
接着修改\themes\NexT\source\css\_schemes\Mist\index.styl
//
// Mist scheme
// ==================================================
@import '_layout';
@import '_header';
@import '_menu';
@import '_posts-expand';
@import '../Muse/_sidebar';
@import '../Muse/_sub-menu';
// ----------------------------------------------------------------------------------
// 参数微调
.post-block .posts-collapse{
margin-left: 10px;
}
.posts-collapse .collection-year {
margin: 20px 0;
}
.pagination {
margin: 80px 0 0;
}
.sidebar-toggle {
display:none;
}
.content {
padding-top: 40px;
}
.menu {
text-align: right;
}
.post-button {
margin-top: 20px;
text-align: center;
}
.posts-expand .home .post-title, .posts-expand .home .post-meta {
text-align: center;
}
.posts-expand .post-block:not(:first-child) {
margin-top: 6px;
}
.pagination {
margin: 80px 0 0;
text-align: center;
}
.posts-expand .post-tags {
display: none;
}
.main-inner {
//width: 950px;
}
// 鼠标放上去之后呈现出加深的效果
.content .posts-expand .post-block:hover {
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1), 0 4px 8px 0 rgba(0,0,0,.1), 0 8px 16px 0 rgba(0,0,0,.1), 0 16px 32px 0 rgba(0,0,0,.1);
}