解决Hexo看板娘引起的页面重渲染
原因
由于hexo-helper-live2d的依赖项live2d-widget.js强行修改document.head的内容,增加样式,导致整个头部的资源重新加载了(包括头部引入的css文件),所以造成了页面重渲染.
解决方案
- 进入
/node_modules/live2d-widget/文件夹,安装依赖npm install - 按照下面代码片段修改
/node_modules/live2d-widget/src/dialog/index.js文件 - 打包
npm run build:prod - 重新运行hexo
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// 将以下代码删除
document.head.innerHTML += `
<style>
.live2d-widget-dialog-container {
width: 300px;
height: 120px;
position: absolute;
bottom: 65%;
right: 0px;
transform-origin: right;
padding: 12px;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
.live2d-widget-dialog {
width: 100%;
height: 100%;
color: #917159;
font-size: 16px;
padding: 12px;
border: 2px solid rgb(236, 203, 180);
background: rgb(252, 248, 244);
box-sizing: border-box;
border-radius: 10px;
transform: rotate(-2deg);
opacity: 0;
transition: 200ms opacity;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
animation: live2d-widget-dialog-tingle 4s ease-in-out 0s infinite alternate;
}
@keyframes live2d-widget-dialog-tingle {
0% { transform: translate(-1px, 1.5px) rotate(-2deg); }
100% { transform: translate(1px, -1.5px) rotate(2deg); }
}
</style>
`;
// 增加以下代码
const dialogStyle = document.createElement('style');
dialogStyle.innerHTML = `
.live2d-widget-dialog-container {
width: 300px;
height: 120px;
position: absolute;
bottom: 65%;
right: 0px;
transform-origin: right;
padding: 12px;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
.live2d-widget-dialog {
width: 100%;
height: 100%;
color: #917159;
font-size: 16px;
padding: 12px;
border: 2px solid rgb(236, 203, 180);
background: rgb(252, 248, 244);
box-sizing: border-box;
border-radius: 10px;
transform: rotate(-2deg);
opacity: 0;
transition: 200ms opacity;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
animation: live2d-widget-dialog-tingle 4s ease-in-out 0s infinite alternate;
}
@keyframes live2d-widget-dialog-tingle {
0% { transform: translate(-1px, 1.5px) rotate(-2deg); }
100% { transform: translate(1px, -1.5px) rotate(2deg); }
}`;
document.head.appendChild(dialogStyle);
