【hexo】基础界面美化

发表于 更新于 分类于 阅读次数： 本文字数： 11k 阅读时长 ≈ 10 分钟

修改主题

这里使用next主题，将从next发布页面下载的hexo-theme-next-5.1.4.zip解压到工程目录\themes文件夹下，并将其改名为next。

打开工程配置文件，设置如下。

1
theme: next

打开主题配置文件，设置如下。

1
scheme: Pisces

此时主题变为博主最喜欢的双栏next主题，读者也可以尝试其他主题与风格。

全局设置

全局布局宽度

为了追求合理性与专业性，这里采用了csdn上的宽度大小。

侧栏 -- 300px

主栏 -- 900px

间隔 -- 17px

总宽度 -- 1217px

第一步，我们打开工程目录\themes\next\source\css\_variables文件夹，然后打开此文件夹下的base.styl，找到下面的几行代码，这几行代码设置了一些默认的宽度信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Layout sizes
// --------------------------------------------------

$main-desktop                   = 960px		# 总宽度
$main-desktop-large             = 1200px	# 宽屏时

$content-desktop                = 700px		# 主栏宽度
$content-desktop-large          = 900px

$content-desktop-padding        = 40px
$content-tablet-padding         = 10px
$content-mobile-padding         = 8px

$sidebar-desktop                = 240px		# 侧栏宽度

$footer-height                  = 50px

$gap-between-main-and-footer    = 100px

目前来说我们只需要上面打了注释的四行代码，我们再打开工程目录\themes\next\source\css\_custom文件夹下的custom.styl文件，复制上面的代码并修改其值如下。

1
2
3
4
5
6
7
8
9
10
11
// Layout sizes
// --------------------------------------------------

$main-desktop                   = 1217px
$main-desktop-large             = 1217px

$content-desktop                = 900px
$content-desktop-large          = 900px

$sidebar-desktop                = 300px

第二步，我们接着打开工程目录\themes\next\source\css\_custom文件夹下的custom.styl文件，增加如下代码。

1
2
3
4
5
6
7
8
// 设置侧栏宽度
.sidebar-inner { width: 300px; }
.header-inner {
	width: 300px;
	+desktop-large() {
		.container & { width: 300px; }
	}
}

至此，我们的宽度和csdn博客上的就保持高度一致了。

字体

字体需要在主题配置文件中设置，可用的字体如下。

consolas

Menlo

PingFang SC

Microsoft YaHei

monospace

PingFang SC

Microsoft YaHei

sans-serif

个人比较喜欢consolas和微软雅黑(\5FAE\8F6F\96C5\9ED1)。

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
font:
	enable: true

# 外链字体库地址，例如 //fonts.googleapis.com (默认值)
host:

# 全局字体，应用在 body 元素上
global:
	external: true    
	family: consolas，"Times New Roman"，Arial，"\5FAE\8F6F\96C5\9ED1"，Helvetica，sans-serif;
	size: 18

# 标题字体 (h1，h2，h3，h4，h5，h6)
headings:
	external: true
	family: consolas
	size: 

# 文章字体
posts:
	external: true
	family: consolas

# Logo 字体
logo:
	external: true
	family: consolas
	size:

# 代码字体，应用于 code 以及代码块
codes:
	external: true
	family: consolas
	size: 14

我们需要设置一下整个网站显示的字体大小。

首先，我们打开工程目录\themes\next\source\css\_custom文件夹下的custom.styl，添加如下代码。

1
2
3
4
// 设置侧栏字体大小
.menu .menu-item a { font-size: 16px; }
.sidebar-nav li { font-size: 16px; }
.post-toc ol { font-size: 16px; }

然后再打开工程目录\themes\next\source\css\_variables文件夹下的custom.styl，添加如下代码。

1
2
3
4
5
6
# 以下内容都是在`base.styl`中得到的
$font-size-headings-base    = 30px
$btn-default-font-size      = 20px
$logo-font-size             = 30px
$subtitle-font-size         = 20px
$b2t-font-size              = 20px

至此字体大小设置完成。

背景

背景图片

在工程目录\themes\next\source\css\_custom文件夹下打开custom.styl，添加如下代码。

1
2
3
4
5
6
7
// 背景图片
body { 
	background-image: url(/images/background.png);
	background-attachment: fixed;	// 不随屏幕滚动而滚动
	background-repeat: no-repeat;	// 不重复铺
	background-size: cover;		// 铺满屏幕
}

然后在工程目录\themes\next\source\images文件夹下添加你所准备好的图片，并改名为background.png即可 与代码中的路径保持一致。

动态效果

在主题配置文件中找到如下代码。

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

总共4种效果，个人喜欢第一个。

点击红心

在工程目录\themes\next\source\js\src文件夹下，新建文件love.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);

此段代码可从http://7u2ss1.com1.z0.glb.clouddn.com/love.js复制(貌似链接已失效，可直接复制此处的代码)。

然后打开工程目录\themes\next\layout文件夹下的_layout.swig，在最后的</html>之前，添加如下代码。

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

标签栏小图标

将favicon_16.ico放在工程目录\themes\next\source\images下，然后打开主题配置文件修改如下。

1
2
3
favicon:
	small: /images/favicon_16.ico
	medium: /images/favicon_32.ico

侧栏

打开主题配置文件，侧栏的配置主要在sidebar字段下。

标题

打开全局配置文件，设置如下。

1
2
title: XXXXX	# 标题
subtitle: XXX	# 副标题

作者

作者名字

打开全局配置文件。

1
author: dua	# 作者

作者图片

将图片文件保存为avatar.png放到工程目录\themes\next\source\images下，然后打开主题配置文件。

1
avatar: /images/avatar.png

除此之外，我们还可以给图片增加样式和动画。

打开工程目录\themes\next\source\css\_custom下的custom.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
// 头像动画
.site-author-image {
	display: block;
	margin: 0 auto;
	padding: $site-author-image-padding;
	max-width: $site-author-image-width;
	height: $site-author-image-height;
	border: $site-author-image-border-width solid $site-author-image-border-color;
	/* 头像圆形 */
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	box-shadow: inset 0 -1px 0 #333sf;
	/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
	(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/

	/* 鼠标经过头像旋转360度 */
	-webkit-transition: -webkit-transform 1.0s ease-out;
	-moz-transition: -moz-transform 1.0s ease-out;
	transition: transform 1.0s ease-out;
}
img:hover {
	/* 鼠标经过停止头像旋转 
	-webkit-animation-play-state:paused;
	animation-play-state:paused;*/
	/* 鼠标经过头像旋转360度 */
	-webkit-transform: rotateZ(360deg);
	-moz-transform: rotateZ(360deg);
	transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
	0% {
		-webkit-transform: rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateZ(-360deg);
	}
}
@-moz-keyframes play {
	0% {
		-moz-transform: rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateZ(-360deg);
	}
}
@keyframes play {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(-360deg);
	}
}

归档

打开主题配置文件。

1
archives: /archives/ || archive

标签

打开主题配置文件。

1
tags: /tags/ || tags

在工程目录下，输入以下命令。

1
$ hexo new page "tags"

会在工程目录\source文件夹下生成tags\index.md。打开tags\index.md，修改为如下内容。

1
2
3
4
5
---
title: 标签
date: 2018-06-05 12:47:55
type: "tags"
---

编辑文章时，只需要在文件头使用如下属性即可。

1
2
3
4
---
tags: 
	- tag_name
---

其中tag_name为此文章的标签，可以有多个。

分类

打开主题配置文件。

1
categories: /categories/ || th

在工程目录下，输入以下命令。

1
$ hexo new page "categories"

会在工程目录\source文件夹下生成categories\index.md。打开categories\index.md，修改为如下内容。

1
2
3
4
5
---
title: 分类
date: 2018-06-05 12:47:55
type: "categories"
---

编辑文章时，只需要在文件头使用如下属性即可。

1
2
3
4
---
categories: 
	- categories_name
---

其中categories_name为此文章的分类，可以有多个。

分隔线

打开主题配置文件，在menu菜单下添加如下属性。

1
=====: / || angle-double-right

子分类

这里以hexo分类为例。打开主题配置文件，在menu菜单下添加如下项即可。

1
hexo: /categories/hexo/ || html5

||后面的为font-awesome图标。

去掉文章目录的自动编号

打开主题配置文件，修改toc字段下的number值为false。

1
2
toc:
	number: false

主栏

首页

显示概要

打开主题配置文件，找到并修改如下代码。

1
2
3
auto_excerpt:
	enable: true
	length: 15

或者在文摘的头部增加如下代码。

1
description: xxx

也可以在文章的正文中，使用<!-- more -->手动截断，这是博主采用的做法。

文章分割线加长

打开themes\next\source\css\_custom文件夹下的custom.styl文件，添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
// 首页加长文章分割线 -- 隐藏
.posts-expand {
	.post-eof {
		display: none;			// 这里直接隐藏了账
		margin: 60px auto 50px;		// 文章间距
		width:0%;			// 分割线长度 -- 这里直接去掉了
		height: 1px;
		background: $grey-light;
		text-align: center;
	}
}

文章阴影

打开工程目录\themes\next\layout文件夹下的index.swig文件，修改第12行，给posts新添加一个类属性my_post。

1
<section id="posts" class="posts-expand my_post">

然后打开themes\next\source\css\_custom文件夹下的custom.styl文件，添加如下代码。

1
2
3
4
5
6
7
8
// 首页文章添加阴影效果
.my_post .post {
	margin-top: 60px;
	margin-bottom: 0px;
	padding: 25px;
	-webkit-box-shadow: 0 0 20px rgba(202，3，3，.5);
	-moz-box-shadow: 0 0 20px rgba(202，3，4，.5);
}

文章标题与正文的间距

打开themes\next\source\css\_custom文件夹下的custom.styl文件，添加如下代码。

1
2
// 标题与正文的间距
.posts-expand .post-meta { margin: 10px 0 10px 0; }

标题颜色

打开themes\next\source\css\_custom文件夹下的custom.styl文件，添加如下代码。

1
2
3
4
// 标题样式
h1 { color: Brown; }
h2 { color: DarkSlateGray; }
h3 { color: DarkGreen; }

颜色可以自选，参考RGB颜色对照表。

引用格式

打开工程目录\themes\next\source\css\_custom\custom.styl文件，添加如下代码。

1
2
3
4
5
// 引用样式
blockquote { 
	background-color: #FAFAFA;
	border-left-color: orange;
}

代码

显示行号

打开工程配置文件修改lline_number字段。

1
line_number: true #显示行号

配色方案

打开主题配置文件修改highlight_theme字段。

1
2
3
highlight_theme: normal 
# 可选的方案有
#    normal | night | night eighties | night blue | night bright

去掉滚动条

打开themes\next\source\css\_custom文件夹下的custom.styl文件，添加如下代码。

1
2
// 去掉代码行滚动条 -- 但仍然可以滚动
.highlight::-webkit-scrollbar{ display: none; }

顶部加载条

打开主题配置文件，找到pace字段。

1
pace: true

页脚

修改底部的带#号的标签

打开工程目录\themes\next\layout\_macro文件夹下的post.swig，搜索rel="tag">#，将#换成<i class="fa fa-tag"></i>即可。

在每篇文章末尾添加结束语

打开工程目录\themes\next\layout\_macro文件夹，在此文件夹下新建passage-end-tag.swig文件，并输入以下内容。注意position设置为relative是为了让结束语压在分隔线上，比较好看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div style="text-align:center; color: grey; font-size:18px; height: 0px">
	<hr class = hr_end_tag>
	<div class="hr_end_tag_content">
		欲知后事如何 <i class="fa fa-heart"></i> 且听下回分解
	</div>
	<style> 
		.hr_end_tag_content {
			position: relative; 
			top: -55px;  
			left: 40%;  
			text-align: center; 
			vertical-align: middle; 
			background-color: white;
			width: fit-content;
			height: fit-content;
		}	
	</style>
</div>

然后打开此文件夹下的post.swig，在post-body之后，post-footer之前，即END-POST_BODY块的最开始添加如下代码。

1
2
3
4
5
{% if theme.passage_end_tag.enabled and not is_index %}
<div>
	{% include 'passage-end-tag.swig' %} 
</div>
{% endif %}

最后打开主题配置文件，在最后添加如下代码。

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
	enabled: true

需要注意的是，为了让文字可以正好处于分隔线的中央，需要使用js来进一步设置其left属性。打开工程目录\themes\next\source\js\src\utils.js，添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
	end_tag_left_refresh();
});

// 页面大小改变时触发
$(window).resize(function() {
	end_tag_left_refresh();
});

// end tag 位置
function end_tag_left_refresh() {
	var end_tag = $('.hr_end_tag');
	var end_tag_con = $('.hr_end_tag_content');
	var end_tag_len = parseInt(end_tag.css('width'));
	var end_tag_con_len = parseInt(end_tag_con.css('width'));
	var end_tag_con_left = (end_tag_len-end_tag_con_len) / 2;
	end_tag_con.css('left', end_tag_con_left+'px');
}

打开主题配置文件，找到footer字段进行设置即可。

1
2
3
4
5
6
7
8
9
10
11
footer:
	since: 2014	# 显示的年份
	icon: heart	# 显示的图标

	copyright:	# 图标右边的名称 -- 默认为作者名

	# 去掉最后一行
	powered: false
	theme:
		enable: false
		version: true