hexo-next主题博客个性化汇总

更新于 分类于 阅读次数： 本文字数： 6.9k 阅读时长 ≈ 6 分钟

除去next官方文档的个性化配置和各种功能，还修改了一些样式~现做一个汇总

前言

在hexo目录下的source文件夹下创建_data文件夹，在里面创建styles.styl文件，没有特殊说明，本文说的修改均是在styles.styl文件里添加内容。

其实大部分内容都可以通过F12+右键检查，再查找css语法来修改~

背景图片和透明度

1
2
3
4
5
6
7
8
9
10
11
body {
  background: url("/images/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -webkit-font-smoothing: antialiased;
  -webkit-background-size: cover;
  -o-background-size: cover;                
  background-size: cover;
  opacity: 0.9
}

其中url中是背景图片路径，像上面那样写完整路径是themes/next/source/images/background.png，opacity是透明度。

博客标题处的背景图片

1
2
3
4
5
6
7
8
9
10
.site-brand-container{
	background: url("/images/a.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 100% 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-background-size: cover;
	-o-background-size: 100% 100%;                
}

文章样式

注：颜色可以通过rgb(x,x,x)，#xxxxxx，和#black这样来表示

标题颜色

1
2
3
h1.post-title{
	color: rgb(7, 6, 95);
}

选中字符颜色

1
2
3
4
5
6
7
8
9
10
/* webkit, opera, IE9 */
::selection {
    background: #FFF1C0;
    color: black;
}
/* firefox */
::-moz-selection {
    background: #FFF1C0;
    color: black;
}

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
table {
	border = "0";
	cellpadding="0";
	cellspacing="0";
}
table>thead { // 表头颜色
	background-color: #FDFBBA;
}
table>tbody>tr { // 偶数行底色
    &:nth-of-type(even) {
        background-color: #D8E4F5;
    }
}
table>tbody>tr { // 表格每一行鼠标经过时的颜色
    &:hover {
        background-color: #CDC9C9;
    }
}

文章内链接样式

1
2
3
4
5
6
7
8
9
10
.post-body p a, .post-copyright a{
    color: #0593d3;
    border-bottom: none;
    border-bottom: 1px solid #0593d3;
    &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
    }
}

删除线样式

1
2
3
4
5
.post-body p s{
  color: #989898;
  background: #F0F0F0;
  margin: 2px;
}

文章一级二级……标题样式（左边竖线）

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
.post-body h1{
    border-left: 4px solid #FF201D;
    margin-left: -10px;
    padding-left: 12px;
	border-bottom: 1px solid #eee;
	padding-left: 1.7%;
    color: #2e405b;
    position: relative;
}
.post-body h2{
    border-left: 4px solid #FF6A33;
    margin-left: -10px;
    padding-left: 12px;
    color: #2e405b;
	border-bottom: none;
}
.post-body h3{
    border-left: 4px solid #FFCB5C;
    margin-left: -10px;
    padding-left: 12px;
    color: #2e405b;
	border-bottom: none;
}
.post-body h4{
    border-left: 4px solid #FFF8A4;
    margin-left: -10px;
    padding-left: 12px;
    color: #2e405b;
	border-bottom: none;
}

文章内短代码样式

1
2
3
code {
	background: rgb(207,207,209);
}

博客顶部彩色线条

1
2
3
4
.headband {
    height: 2px;
    background-image: linear-gradient(90deg, #cc0033 0%, #ff3300 14%, #ffff00 28%, #33cc99 43%, #99cccc 57%, #3366cc 71%, #9933cc 86%);
}

分类页面样式

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
.category-list {
    overflow: auto;
    list-style:none outside;
}
.category-list li {
    height: 100%;
    float: left;
    padding: 0px 10px;
}
.category-list-child {
    list-style: "<" outside;
}
.category-list li a {
    font-size: 20px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.category-list-link:hover {
	transform: scale(1.5, 1.5);
	background-color: #EBDEFF;
    color: black;
    border-radius: 20px
    padding: 6px 10px;
}

标签页面样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.tag-cloud-tags{
    text-align: center;
    counter-reset: tags;
}
.tag-cloud-tags a {
	border-radius: 40px;
	border: hidden;
	background-color: #F0E7FF;
    color: black;
    padding-right: 5px;
    padding-left: 5px;
}
.tag-cloud-tags a:hover{
     transform: scale(1.1);
     transition-duration: 0.3s;
}

鼠标移到文章标题时的下划线

1
2
3
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg, #9933cc 0%, #3366cc 67%, #0097FF 80%);
}

TOC的样式

1
2
3
4
.post-toc .nav .active > a , .sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview{
	color: #8315D3;
	border-bottom-color: #8315D3;
}

文末结束分割线

在hexo根目录/source/_data创建post-body-end.njk文件，输入以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px; padding-top: 10px;">--------------------------------------- <i class="fa fa-heart"></i> The End <i class="fa fa-heart"></i> ---------------------------------------  </div>
    {% endif %}
</div>

鼠标点击小爱心效果

在hexo根目录下的\themes\next\source\js文件夹中添加clicklove.js，内容如下：

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
60
61
62
63
64
! 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.njk中添加一行内容：

1
<script type="text/javascript" src="/js/clicklove.js"></script>

添加豆瓣

安装插件：

1
npm install hexo-douban

在hexo配置文件中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
  user: mythsman
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000

user：豆瓣网页打开，个人中心，网址中有个/people/…/xxxxx，就是省略号的部分

builtin：是否将生成页面的功能嵌入hexo s和hexo g中

title：页面标题

quote：页面开头的话，支持html

timeout：爬虫的限制时间

注意不能够再使用hexo d，因为hexo douban也是hexo d

参考文章

Hexo NexT主题7.8.0新版本美化

hexo 主题 next7.8 版本配置美化