sakura主题美化（本站作者前博客，已经不再使用）
本站正在积极优化中，优化完成后将贴出心得
优化参考链接：
感谢以上大佬代码的开源，枣糕也备受开源精神的感染
感谢在本站优化过程中为枣糕提供帮助的小伙伴：
更新日志
2021/4/24 23:58 关于-我？
今日更新:
“关于—我”下的botui
- BOTUI:
一款自动回复文字、图片、视频的JS聊天机器人框架BotUI，可以自由设置多种选项、触发关键词、输入框等内容，聊天内容或范围也可以自由设置，回复内容可以是文字、图片（GIF亦可）、视频，我在博客中引用了此框架。
优化后图片:
详情跳转至关于—我
本次优化参考了cungudafa姐姐的教程教程链接
修改了主目录\source\about\index.md及sakura/js/botui.js, 具体修改内容参考cungudafa的教程链接
- 修改了各分类页的图片和内容框架，不过不是很满意，仍在施工中
2021/4/25 23:58 添加视频
HEXO添加视频
2021/10/17 22:26 给文字标题添加css动画
博客搁置了好久了，今天来更新一下主题美化
首先看看效果：
1.给文章标题添加css动画横线
修改 themes\Sakura\layout\_widget\common-article.ejs
编辑文章通用属性目录themes\Sakura\layout\_widget\common-article.ejs 找到如下部分
在<p class="entry-census">前添加：
1
| <span class="toppic-line"></span>
|
添加自定义CSS
将添加到style.css里头的自定义 CSS 样式就好啦~
直接复制下列代码粘贴到style.css
1
2
3
4
5
| /*标题横线动画*/
.single-center header.single-header .toppic-line{position:relative;bottom:0;left:0;display:block;width:100%;height:2px;background-color:#fff;animation:lineWidth 2.5s;animation-fill-mode:forwards;}
@keyframes lineWidth{0%{width:0;}
100%{width:100%;}
}
|
2.给标题文字添加CSS动画
这部分比较简单直接添加自定义css即可
添加自定义CSS
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
| /*标题动画*/
.entry-title {
-moz-animation: fadeInUp 2s;
-webkit-animation:fadeInUp 2s;
animation: fadeInUp 2s;
}
@-moz-keyframes fadeInUp {
0% {
-moz-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
50% {
-moz-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
100% {
-moz-transform: translateY(0%);
transform: translateY(0%);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
0% {
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
50% {
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1
}
}
@keyframes fadeInUp {
0% {
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
50% {
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-webkit-transform: translateY(200%);
transform: translateY(200%);
opacity: 0
}
100% {
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1
}
}
|
