基本信息

服务器选择 Hexo+Butterfly主题 博客时间 2023.08.03
搭建结果 修改各种圆角、格式、大小，更符合审美

添加自定义css样式文件的方法，可以参考另一篇文章：自定义css样式文件

首页

首页文章卡片（包括顶部分类栏）

1
2
3
4
#recent-posts > .recent-post-item {
  height: 13em; #高度
  border-radius: 20px; #圆角
}

个人信息栏GitHub按钮圆角

GitHub Follow Me按钮

1
2
3
4
#card-info-btn {
  border-radius: 7px;
  overflow: hidden;
}

侧边栏卡片圆角

1
2
3
#aside-content .card-widget {
  border-radius: 20px;
}

侧边栏标签

1
2
3
4
5
6
7
8
9
10
/*侧边栏标签美化*/
#aside-content .card-tag-cloud a {
  color: var(--heo-fontcolor) !important;
  font-size: 0.8rem;
  border-radius: 9px;
  border-style: dashed;
}
#aside-content .item-headline {
  font-weight: 700;
}

右下角侧边小按钮

1
2
3
4
5
6
7
8
9
10
/* 右侧小按钮圆角 */
#rightside>div>button,#to_comment {
  margin-right: 4px;
  border-radius: 7px;
}

/*侧边滑动颜色*/
:root {
  --btn-bg: #3a87b9;
}

底部切换页面按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
/*底部切换按钮*/
.layout>.recent-posts .pagination>* {
  display: inline-block;
  margin: 0 6px;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
}

/*底部圆角*/
#pagination .page-number.current {
  border-radius: 7px;
}

文章页

文章页信息栏

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
/*文章页信息栏美化*/
#post-info .post-title {
  font-weight: 600; /*字体粗细*/
  font-size: 2.5em; /*字体大小*/
  line-height: 2.2; /*元素高度*/
  letter-spacing: 9px; /*字体间距*/
}

/*信息栏高度调整*/
#page-header.post-bg {
  height: 26rem;
}

/*Web端信息栏适配*/
@media screen and (min-width: 421px){
  #page-header #post-info {
    bottom: 8rem;
  }
}

/*Wap端信息栏适配*/
@media screen and (max-width: 420px){
  #page-header #post-info {
    bottom: 2rem;
  }
}

文章页目录卡片

1
2
3
4
5
/*文章页目录卡片圆角、美化*/
#aside-content .card-widget {
  border-radius: 20px;
  padding: 2rem 1.2rem; /*前者为上下边距，后者为左右边距*/
}

文章页下方版权信息

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
/* 版权信息 */
/* 背景 */
#post .post-copyright {
  background: var(--heo-card-bg);
  padding: 2rem 1.3rem;
  overflow: hidden;
  border: var(--style-border);
  border-width: 1px;
  transition: 0.3s;
  border-radius: 11px;
}

#post .post-copyright:after {
  position: absolute;
  right: 22px;
  top: -77px;
  content: '\f25e';
  font-size: 180px;
  font-family: 'Font Awesome 5 Brands';
  color: var(--heo-fontcolor);
  opacity: 0.4;
  filter: blur(7px);
}

@media screen and (max-width: 768px) {
  #post .post-copyright {
    padding: 1rem 1.3rem;
  }
}

.post-copyright__author {
  display: flex;
  align-items: center;
}

.post-copyright__original {
  background: var(--heo-fontcolor);
  color: var(--heo-card-bg);
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 8px;
  margin-right: 0.5rem;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}

.post-copyright__original:hover {
  background: var(--heo-main);
  color: var(--heo-white);
}

@media screen and (max-width: 768px) {
  #post .post-copyright {
    box-shadow: var(--heo-shadow-border);
  }

  .post-copyright .post-meta-original {
    display: none;
  }

  .post-copyright__original {
    display: none;
  }

  #post .post-copyright:after {
    display: none;
  }
}


/* 作者名 */
#post .post-copyright .post-copyright-info a {
  padding: 0;
  color: var(--heo-fontcolor);
  font-weight: bold;
}

#post .post-copyright .post-copyright__notice .post-copyright-info a {
  padding: 0 4px;
}

#post .post-copyright .post-copyright-info a:hover {
  color: var(--heo-lighttext);
}

#post .post-copyright .post-copyright-info {
  padding-left: 0;
  color: var(--heo-fontcolor);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#post .post-copyright .post-copyright-title {
  padding-left: 0;
  color: var(--heo-fontcolor);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 1rem;
  font-weight: bold;
}

#post .post-copyright .post-copyright-title:hover {
  color: var(--heo-lighttext);
}

#post>div.post-copyright>div.post-copyright__author>span>span {
  padding: 0;
  color: var(--heo-fontcolor);
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.38;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 768px) {
  #post>div.post-copyright>div.post-copyright__author>span>span {
    -webkit-line-clamp: 3;
  }

  #post .post-copyright .post-copyright-info {
    -webkit-line-clamp: 2;
  }

  #post .post-copyright .post-copyright-title {
    -webkit-line-clamp: 3;
    line-height: 1.2;
  }
}

/* 链接 */
#post>div.post-copyright>div.post-copyright__type {
  line-height: 16px;
  display: flex;
  margin-top: 8px;
}

#post>div.post-copyright>div.post-copyright__type>span>a {
  font-size: 14px;
  opacity: 0.6;
  line-height: 16px;
}

#post>div.post-copyright>div.post-copyright__type>span>a:hover {
  opacity: 1;
  background: none;
  }

  #post-copyright-url a {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  }
  /* 提示 */
  #post>div.post-copyright>div.post-copyright__notice {
  font-size: 0.7rem;
  line-height: 1rem;
  margin: 0.5rem 0;
  }
  /*装饰圈*/
  #post .post-copyright:before {
  display: none;
  }

  #post .post-copyright .post-copyright-meta {
  color: #5a7ed7;
  font-weight: bold;
  }
  #post .post-copyright {
  padding: 2rem 1.3rem;
  border-radius: 11px;
  border-style: solid;
  }

文章页上一篇、下一篇圆角

1
2
3
4
/*文章上下篇圆角*/
#pagination.pagination-post{
    border-radius: 20px;
}

文章页相关推荐圆角

1
2
3
4
5
6
7
8
9
/*文章相关推荐卡片美化*/
.relatedPosts > .relatedPosts-list > div {
  border-radius: 20px;
}

#aside-content #card-toc .toc-content .toc-link.active {
  background: #669cbe;
  border-radius: 5px;
}

参考链接

Hexo博客Butterfly主题魔改美化