hexo美化 | 关于 界面魔改教程

前言

本文主要基于两位大佬的教程，原文链接如下

https://anzhiy.cn/posts/e62b.html#添加-css
https://anzhiy.cn/posts/sdxhu.html
https://opeach.cn/posts/dab4.html

问题

按安知鱼大佬的原教程走，有可能遇到以下问题：

  • 部分颜色、边框无法显示
  • 致谢板块的打赏按钮无法使用
  • 图片无法显示
  • helo模块显示异常

原因和解决办法

建议跟着HiPeach教程走，做出以下调整

部分颜色边框无法显示

我在HiPeach大佬的教程中找到了原因：

安知鱼在他的博客中引入了颜色css文件，如果没有引入过他的颜色css文件，颜色就无法正常显示。

解决方案是：

在themes\butterfly\source\css目录新建一个anzhiyu.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
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
/* 颜色 */
:root {
    --HiPeach-theme-op: #4259ef23;
    --HiPeach-gray-op: #9999992b;
    --HiPeach-theme-top: var(--HiPeach-theme);
    --HiPeach-white: #fff;
    --HiPeach-white-op: rgba(255, 255, 255, 0.2);
    --HiPeach-black: #000;
    --HiPeach-black-op: rgba(0, 0, 0, 0.2);
    --HiPeach-none: rgba(0, 0, 0, 0);
    --HiPeach-gray: #999999;
    --HiPeach-yellow: #ffc93e;
    --HiPeach-border-radius: 8px;
    --HiPeach-main: var(--HiPeach-theme);
    --HiPeach-main-op: var(--HiPeach-theme-op);
    --HiPeach-shadow-theme: 0 8px 12px -3px var(--HiPeach-theme-op);
    --HiPeach-shadow-main: 0 8px 12px -3px var(--HiPeach-main-op);
    --HiPeach-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
    --HiPeach-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
    --HiPeach-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
    --HiPeach-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
    --HiPeach-shadow-red: 0 8px 12px -3px #ee7d7936;
    --HiPeach-shadow-green: 0 8px 12px -3px #87ee7936;
    --HiPeach-shadow-border: 0 8px 16px -4px #2c2d300c;
    --HiPeach-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
    --HiPeach-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
    --style-border: 1px solid var(--HiPeach-card-border);
    --HiPeach-blue-main: #3b70fc;
    --style-border-hover: 1px solid var(--HiPeach-main);
    --style-border-dashed: 1px dashed var(--HiPeach-theme-op);
    --style-border-avatar: 4px solid var(--HiPeach-background);
    --style-border-always: 1px solid var(--HiPeach-card-border);
    --HiPeach-white-acrylic1: #fefeff !important;
    --HiPeach-white-acrylic2: #fcfdff !important;
    --HiPeach-black-acrylic2: #08080a !important;
    --HiPeach-black-acrylic1: #0b0b0e !important;
    --HiPeach-main-none: #b8b8b800 !important;
  }
  
  [data-theme="light"] {
    --HiPeach-theme: #3b70fc;
    --HiPeach-theme-op: #4259ef23;
    --HiPeach-blue: #3b70fc;
    --HiPeach-red: #d8213c;
    --HiPeach-pink: #ff7c7c;
    --HiPeach-green: #57bd6a;
    --HiPeach-fontcolor: #363636;
    --HiPeach-background: #f7f9fe;
    --HiPeach-reverse: #000;
    --HiPeach-maskbg: rgba(255, 255, 255, 0.6);
    --HiPeach-maskbgdeep: rgba(255, 255, 255, 0.85);
    --HiPeach-hovertext: var(--HiPeach-theme);
    --HiPeach-ahoverbg: #f7f7fa;
    --HiPeach-lighttext: var(--HiPeach-main);
    --HiPeach-secondtext: rgba(60, 60, 67, 0.6);
    --HiPeach-scrollbar: rgba(60, 60, 67, 0.4);
    --HiPeach-card-btn-bg: #edf0f7;
    --HiPeach-post-blockquote-bg: #fafcff;
    --HiPeach-post-tabs-bg: #f2f5f8;
    --HiPeach-secondbg: #edf0f7;
    --HiPeach-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --HiPeach-card-bg: #fff;
    --HiPeach-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --HiPeach-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --HiPeach-card-border: #c0c6d8;
  }
  
  [data-theme="dark"] {
    --global-bg: #191919;
    --HiPeach-theme: #0084ff;
    --HiPeach-theme-op: #0084ff23;
    --HiPeach-blue: #0084ff;
    --HiPeach-red: #ff3842;
    --HiPeach-pink: #ff7c7c;
    --HiPeach-green: #57bd6a;
    --HiPeach-fontcolor: #f7f7fa;
    --HiPeach-background: #18171d;
    --HiPeach-reverse: #fff;
    --HiPeach-maskbg: rgba(0, 0, 0, 0.6);
    --HiPeach-maskbgdeep: rgba(0, 0, 0, 0.85);
    --HiPeach-hovertext: #0a84ff;
    --HiPeach-ahoverbg: #fff;
    --HiPeach-lighttext: #f2b94b;
    --HiPeach-secondtext: #a1a2b8;
    --HiPeach-scrollbar: rgba(200, 200, 223, 0.4);
    --HiPeach-card-btn-bg: #30343f;
    --HiPeach-post-blockquote-bg: #000;
    --HiPeach-post-tabs-bg: #121212;
    --HiPeach-secondbg: #30343f;
    --HiPeach-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --HiPeach-card-bg: #1d1b26;
    --HiPeach-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --HiPeach-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --HiPeach-card-border: #42444a;
  }

在主题配置文章_config.butterfly.yml中引用

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/anzhiyu.css" media="defer" onload="this.media='all'"> # 安知鱼颜色

由于我们使用的是HiPeach的教程中的代码，他使用的颜色也是相同方式引入css，经过我的比对，发现他们的颜色模板一致。因此在VSCode里打开刚刚创建的anzhiyu.css，将anzhiyu批量替换为HiPeach

致谢板块的打赏按钮无法使用

HiPeach 的教程已经解决了这个问题，照常用他的代码就ok

图片无法显示

按 HiPeach 的教程一路进行你会发现图片无法显示，这是因为他图片引用地址在本地，而并非像安知鱼一样引用了图床链接。

图片的代码主要有两类，结合二人的代码比对替换即可

  • url([链接])
  • src='[链接]'

helo显示异常

这部分是hello-about.css文件的问题，使用安知鱼的代码即可

个性化调整

修改图片

经过上述操作，可以发现引用的图片一部分在about.css中，头像、生涯部分在about.pug中，收款码在reward.js中。替换成自己的链接就ok

修改创造力

在creativity.yml上修改