记录在设置hexo过程中踩过的坑
Quoteblock美化
参考 https://blog.eson.org/pub/fc959554/
Tag
参考 https://hexo.io/docs/tag-plugins.html
所有标签的使用及其自定义美化
强烈推荐参考 https://zenreal.github.io/posts/44730/
Next 主题配置
自定义背景及其美化
自定义背景网上有很多教程，但是大多数都跑不通，我的方法是：
主题目录 .../hexoblog/themes/next/source/css 下添加自定义文件夹 _custom/ 及style文件 styles.styl，完整路径为1
.../hexoblog/themes/next/source/css/_custom/styles.styl
背景图片放到主题目录下1
.../hexoblog/themes/next/source/images/
文件 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//网页背景图片
body {
background:url(/images/20230211205210.png);
background-repeat: no-repeat;
background-attachment:fixed; //不重复
background-size: cover; //填充
background-position:50% 50%;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
}
//博客内容透明化
//###### 博客内容透明化 ######
//方法一：一键透明 #ffffffe6等价于效果等同于 rgba(255, 255, 255, 0.9)
//:root {
// --content-bg-color:#ffffffe6;
//}
//方法二：###### 博客内容透明化 ######
//文章内容的透明度设置
.post-block {
background: rgba(255,255,255,1) none repeat scroll ;
}
//分页(主页最下面的那一小块)
.pagination {
background: rgba(255,255,255,0.9);
}
//菜单栏背景
.header-inner {
background: rgba(255,255,255,0.9);
}
//侧边框的透明度设置
.sidebar-inner {
background: rgba(255,255,255,0.9) none repeat scroll ;
}
//搜索框（local-search）的透明度设置
.popup {
opacity: 0.9;
}
//评论区
.comments {
background: rgba(255,255,255,0.9);
}
然后，需要到 .../hexoblog/themes/next/source/css/main.styl 去引用我们的修改1
2
3
4
5// Custom Layer
// --------------------------------------------------
//for $inject_style in hexo-config('injects.style')
//@import $inject_style;
@import "_custom/styles.styl";
参考博文
https://www.blog.lasai.com.tw/2020/07/05/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/
↑ 这一篇很大佬！
其余美化教程
显示圆角
很多博客的方法都不可行，我的方式为：
确认自己的Next主题为Gemini后，到以下路径修改style文件 Gemini.styl1
.../hexoblog/themes/next/source/css/_variables/Gemini.styl
修改内容为1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18// Variables of Gemini scheme
// ==================================================
@import 'Pisces';
// Settings for some of the most global styles.
// --------------------------------------------------
//$body-bg-color = #eee;
$body-bg-color = transparent;
// Borders.
// --------------------------------------------------
$box-shadow-inner = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12);
$box-shadow = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09);
//$border-radius-inner = initial;
//$border-radius = initial;
$border-radius-inner = 20px;
$border-radius = 15px;
参考博文
- https://github.com/next-theme/hexo-theme-next/issues/51
- https://cs-cshi.github.io/hexo-blog/Hexo-NexT%20%E8%AE%BE%E7%BD%AE%E5%9C%86%E8%A7%92/
添加自定义页面
参考 https://www.playpi.org/2017050701.html
注意显示大小写。
fa图标见 https://fontawesome.com/icons/code?s=solid&f=classic
鼠标美化
鼠标图标
素材见 https://www.cursors-4u.com/cursor/2008/12/08/family-guy-peter-griffin.html
鼠标点击特效
参考 https://yfx2012.top/2022/01/17/hexo/mouse-click-fireworks/