After all lch is just a kid!

Hexo主题Next进阶美化

发表于 更新于 分类于 阅读次数： 评论次数：

前言

之前换了Next主题后又改了一些简单的设置，不过对有一些样式还是不满意，但是官方的_config.yml文件并没有提供这些选项，只能通过修改CSS的方式来改了。先是去网上搜了一些教程，因为版本原因很多教程都失效了，还得靠自己摸索。

不同版本文件路径或者具体属性都不完全一样，本文基于NexT 7.7.2，食用本文需要一点点点CSS基础:D。

Next进阶美化

添加背景图片

先将大小合适的图片放到./source/image/目录中。

打开./themes/next/source/css/_common/scaffolding/base.styl，找到body，增加以下代码：

1
2
background: url("/images/bg.png") fixed;  //自己更改图片url
background-position: 0 -100px;  //微调背景图片位置

鼠标点击爱心

下载以下js文件放到./themes/next/source/js/目录中。

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

打开./themes/next/layout/_layout.swig，在末尾</html>前增加以下代码：

1
2
<!-- click love -->
<script src="/js/clickLove.js"></script>

动态背景Canvas-nest

在./source/新建一个_data目录，新建footer.swig文件，输入以下代码：

1
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

打开主题配置文件_config.yml，找到custom_file_path，去掉行首#使以下代码生效：

1
footer: source/_data/footer.swig

设置透明度

打开./themes/next/source/css/_schemes/Pisces/_layout.styl，找到.header-inner和.content-wrap，

打开./themes/next/source/css/_schemes/Pisces/_sidebar.styl ，找到.sidebar，增加以下代码：

1
opacity: .8;

修改code样式

打开./themes/next/source/css/_common/scaffolding/highlight/highlight.styl，找到code，修改以下代码：

1
2
3
4
5
background: #颜色;
border-radius: 2px;
color: #颜色;
padding: 1px 2px;
word-wrap();

修改超链接样式

打开./themes/next/source/css/_common/scaffolding/base.styl，找到a, span.exturl和&:hover，修改以下代码：

1
2
3
4
5
border-bottom: 1px solid #颜色;
color: #颜色;

border-bottom-color: #颜色;
color: #颜色;

修改阅读全文按钮样式

打开./themes/next/source/css/_common/scaffolding/buttons.styl，找到.btn和&:hover，修改以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
background: #颜色;
border: 2px solid #颜色;
border-radius: 圆角;
color: #颜色;
display: inline-block;
font-size: 字体大小;
line-height: 2;
padding: 0 20px;
text-decoration: none;
transition-property: background-color;
the-transition();

background: #颜色;
border-color: #颜色;
color: #颜色;

修改底部文字样式

打开./themes/next/source/css/_common/outline/footer/footer.styl，找到.footer，修改以下代码：

1
2
3
color: #颜色;
opacity: .8;
border: none;

合并某些样式

如果觉得上述方法改起来麻烦，可以将他们合并在一个文件中。

打开./themes/next/source/css/_common/components/post/post.styl，在最下方新增以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// code样式
code {
  background: #fffcd7;
  color: #ff6060;
  padding: 1px 2px;
}

// 超链接样式
.post-body p a {
  color: #6097ff;
  border-bottom: none;
  border-bottom: 1px solid #6097ff;
  &:hover {
    color: #ff6060;
    border-bottom: none;
    border-bottom: 1px solid #ff6060;
  }
}


// 阅读全文样式
.btn {
  color: #ff6060;
  background-color: #fff;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #ff6060;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:hover {
    color: #fff;
    background-color: #ff6060;
    border-color: #ff6060;
  }
}

// 底部文字样式
.footer, .footer a {
  color: #ffffff;
  opacity: .8;
  border: none;
  
  &:hover {
    border: none;
  }
}

// and so on...

2020-03-21更新

修改侧边栏和正文圆角

打开./themes/next/source/css/_schemes/Pisces/_layout.styl，找到.header-inner，修改以下代码：

1
border-radius: 0 0 6px 6px;

找到.content-wrap，修改以下代码：

1
border-radius: 6px;

打开./themes/next/source/css/_schemes/Pisces/_sidebar.styl ，找到.sidebar，修改以下代码：

1
border-radius: 6px;

打开./themes/next/source/css/_common/components/back-to-top-sidebar.styl，找到&.back-to-top-on，插入以下代码：

1
border-radius: 6px;

找到&:hover，插入以下代码：

1
2
border-radius: 6px;
color: #ff6060;

修改侧边栏链接样式

打开./themes/next/source/css/_common/outline/header/menu.styl，找到.menu-item-active a，插入以下代码：

1
color: #ff6060;

打开./themes/next/source/css/_schemes/Pisces/_menu.styl，找到.menu-item-active a::after，修改以下代码：

1
background: #ff6060;

添加博客标题动画

打开./themes/next/source/css/_common/outline/header/site-meta.styl，找到.site-title，在前面插入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@-webkit-keyframes shake{
	0% {
		-webkit-transform:translateX(9px) rotate(9deg);
    }
    20% {
        -webkit-transform:translateX(-7px) rotate(-7deg);
    }
    40% {
        -webkit-transform:translateX(5px) rotate(5deg);
    }
    60% {
        -webkit-transform:translateX(-3px) rotate(-3deg);
    }
    80% {
        -webkit-transform:translateX(1px) rotate(1deg);
    }
    100% {
        -webkit-transform:translateX(0) rotate(0);
    }
}

在.site-title插入以下代码：

1
2
3
4
5
6
transition: color 0.5s ease-in-out;

&:hover {
  animation: shake 0.5s ease-in-out 1;
  color: #ff6060;
}

可以实现鼠标移到标题后左右晃动并变色效果。

修改右上角github标签

打开./themes/next/source/css/_common/outline/header/github-banner.styl，找到svg，修改以下代码：

1
2
3
color: #ff6060;
fill: transparent;
position: fixed;

有兴趣的也可以去 https://github.com/blog/273-github-ribbons 找别的SVG来替换。

修改全局超链接文字颜色

打开./themes/next/source/css/_common/scaffolding/base.styl，找到a, span.exturl下的&:hover，修改以下代码：

1
2
border-bottom-color: #ff6060;
color: #ff6060;

修改正文样式

打开./themes/next/source/css/_schemes/Pisces/_layout.styl，找到.content-wrap，修改以下代码：

1
2
// background: var(--content-bg-color);
padding: 0 $content-desktop-padding;

打开./themes/next/source/css/_common/components/post/post-expend.styl，找到.posts-expand，修改以下代码：

1
// padding-top: 40px;

打开./themes/next/source/css/_common/components/post/post-eof.styl，注释以下代码：

1
2
3
4
5
6
7
8
9
10
11
/*.post-eof {
  background: $grey-light;
  height: 1px;
  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
  text-align: center;
  width: 8%;

  .post-block:last-child & {
    display: none;
  }
}*/

打开./themes/next/source/css/_common/components/post/post.styl，在最下方新增以下代码：

1
2
3
4
5
6
7
// 正文和评论样式
.post-block {
  background: var(--content-bg-color);
  padding: 40px;
  margin-bottom: 13px;
  border-radius: 5px;
}

打开./themes/next/source/css/_common/scaffolding/comments.styl，找到.comments，插入以下代码：

1
2
3
4
margin: 60px 0 20px 0;
background: var(--content-bg-color);
padding: 40px;
border-radius: 5px;

修改正文标题下方线条动画

打开./themes/next/source/css/_common/components/post/post-header.styl，找到.posts-expand .post-title-link增加以下代码：

1
2
3
&:hover {
  color: #ff6060;
}

找到&::before，修改以下代码：

1
background: #ff6060;

修改归档页面超链接样式

打开./themes/next/source/css/_common/components/post/post-collapse.styl，找到.post-header，插入以下代码：

1
2
3
&:hover span {
  color: #ff6060;
}

修改标签列表颜色

打开主题配置文件_config.yml，找到tagcloud，修改以下内容：

1
2
3
4
5
6
7
tagcloud:
  # All values below are same as default, change them by yourself.
  min: 12 # Minimun font size in px
  max: 30 # Maxium font size in px
  start: "#EE7AE9" # Start color (hex, rgba, hsla or color keywords)
  end: "#FFD700" # End color (hex, rgba, hsla or color keywords)
  amount: 200 # Amount of tags, change it if you have more than 200 tags

TO DO LIST

  • 增加下拉浮动导航栏