hexo博客界面样式优化 | Jason Hao's Blog

Jason Hao's Blog
0%

hexo博客界面样式优化

Posted on Edited on In Views: Valine: 6.1k 6 mins.

修改分类页面样式

在 hexo/source/_data/styles.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
// 分类&&标签 页面样式
.post-block.page {
    margin-top: 10px;
}
// 分类页面page
.category-all-page {
    //box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    //background-color: none;
    padding: 20px 30px 60px 30px;
    border-radius: 20px 20px 20px 20px;
}
.category-all-title {
    //font-family: Impact;
    font-size: 24px;
    color: white;
}
.category-list {
    overflow: auto;
}
.category-list li {
    height: 100%;
    float: left;
    border-right: 3px solid #fcfcfc;
    padding: 0 20px;
}
.category-all ul li {
    list-style: none!important;
}
.category-list li:last-child {
    border-right: none;
}
.category-list li a {
    font-size: 16px;
    text-decoration: none;
    color: $red;
    font-family: Helvetica, Verdana, sans-serif;
    // text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.category-list li a:hover {
    color: white;
}
.category-list li.active a {
    font-weight: bold;
    color: white;
}

标签页面样式

在 hexo/source/_data/styles.styl 文件加入下面样式。(只使用于黑色主题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.tag-cloud-title {
    font-size: 24px;
    color: white;
}

.tag-cloud a {
    //box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    //font-size: 16px;
    color: $red;
    padding: 2px 10px;
    margin: 8px;
    //background: rgba(193,66,92,0);
    border-bottom: none;
    border-radius: 20px;
}

阅读全文按钮样式

next 在需要显示摘要的地方加上 ，就不会显示全文，在 hexo/source/_data/styles.styl 中写入下面内容，修改默认的 Read More 按钮样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

修改Markdown分割线样式

在blog/themes/next/source/css/_common/scaffolding/base.styl中寻找：

1
2
3
4
5
6
//hr {
//  background-image: repeating-linear-gradient(-45deg, $grey-lighter, $grey-lighter 4px, //transparent 4px, transparent 8px);
//  border: 1;
//  height: 3px;
//  margin: 40px 0;
//}

按照上面的方式注释掉即可

修改博客背景

参考网上办法跃跃欲试时发现没有了custom.styl这个文件，查看主题_config.xml后发现可以换个方式实现，于是在根目录source下新建 _data/styles.style

1
2
3
4
5
6
7
body {
 	background:url(/images/background.jpg);
 	background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:100% 100%;
}

将主题hexo/themes/next/_config.xml中对应的#去掉后就可以了

1
2
3
4
5
6
7
8
9
10
11
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

文章透明阴影和直角圆润

html结构

1
2
3
4
5
6
7
8
9
10
container
- header-inner
- main
	- main-inner
		- content-wrap
			- post-block

		- sidebar
			-sidebar-inner

在根目录hexo/source下新建 _data/styles.style，在其中添加

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
65
66
67
68
69
70
71
72
//在styles.styl里自定义post, 添加背景图象
body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    //background-size:100% 100%;
    //background-color: rgba(0, 0, 0, 0.8);
}

// next自身设置的背景有个main-inner的属性，颜色是继承post content color，所以我们的思路是自定义main-inner的background-color
.main-inner {
    background-color: rgba(255, 255, 255, 0);
    padding: 0px 40px 40px 40px;
}

.post-block{
    background-color: rgba(255, 255, 255, 1);
    //margin-top: 24px;
    //margin-bottom: 24px;
    padding: 20px;
    border-radius: 20px 20px 20px 20px;
    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);
}

//组件椭圆化
.header-inner {
    border-radius: 20px 20px 20px 20px;
    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);
}
.sidebar-inner{
    border-radius: 20px 20px 20px 20px;
    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);    
}
.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);
}


//侧边框的透明度设置
//.sidebar-inner {background: rgba(255,255,255,0.85);}

//菜单栏的透明度设置
//.header-inner {background: rgba(255,255,255,0.85);}

//搜索框（local-search）的透明度设置
//.popup {opacity: 0.9;}

//文章的圆角设置
.content {
	border-radius: 20px; //文章背景设置圆角
	padding: 0px 0px 30px 0px;
	background:rgba(255,255,255, 0.0) none repeat scroll !important;
}

//文章内容的透明度设置
.content-wrap {
  opacity: 0.95;
}

.sidebar {
  opacity: 0.7;
}

.header-inner {
  background: rgba(255,255,255,0.7);
}

.popup {
  opacity: 0.7;
}

菜单栏和预览文章对齐

  1. 去掉 headbar 的的颜色，修改文件 hexo/themes/next/source/css/_common/outline/header/headerband.styl 中的内容
1
2
3
4
5
.headband {
  //background: $headband-bg;	//注释这一行
  height: $headband-height;
}

  1. 把上面的 20px 空出来
1
2
3
4
5
.container {
  min-height: 100%;
  position: relative;
  margin-top:20px;    // 添加这一行
}

  1. 然后对齐左边菜单栏和右边的预览 blog，在 hexo/source/_data/style.styl 中添加
1
2
3
4
5
.content {
	border-radius: 20px; 
	padding: 0px 30px 30px 30px;		//原来的设置 30px 30px 30px 30px;
	background:rgba(255,255,255, 0.0) none repeat scroll !important;
}

  1. 对齐 article 和 comment 区域左右的边距
1
2
3
4
5
.content {
	border-radius: 20px; 
	padding: 0px 0px 30px 0px;		//原来的设置 0px 30px 30px 30px;
	background:rgba(255,255,255, 0.0) none repeat scroll !important;
}

  1. 去掉菜单下面的的 siderbar-inner 颜色，习惯 hexo/themes/next/source/css/_common/outline/sidebar/sidebar.styl 文件，如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sidebar {
  //background: $black-deep; //注释这行
  bottom: 0;
  if (!hexo-config('back2top.sidebar')){
    box-shadow: inset 0 2px 6px black;
  }
  position: fixed;
  top: 0;

  +tablet-mobile() {
    if (!hexo-config('sidebar.onmobile')) {
      display: none;
    }
  }
}

去掉博客底部 powered by hexo

1
2
# Powered by Hexo & NexT
  powered: false

网站底部加访问量

Github Following

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/jason-huanghao
  title: Follow me on GitHub

参考 (References)