-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (117 loc) · 4.08 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creme</title>
<!-- 引入站点图标 -->
<link rel="icon" href="https://drive.almondcloud.cn/f/Jw9NHR/IMG_3314.ico" type="image/x-icon">
<style>
/* 之前已有的样式代码保持不变，此处省略重复样式代码 */
.page-content {
display: flex;
justify-content: center;
}
.loader {
width: 100%;
height: 20px;
background-color: #f3f3f3;
border-radius: 5px;
}
.loader-progress {
width: 0%;
height: 100%;
background-color: #4CAF50;
border-radius: 5px;
}
/* 新增样式，将图片设置为背景 */
#bingImage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* 加载蒙版样式 */
.loading-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- 新增加载蒙版元素 -->
<div class="loading-mask">
<div class="loader">
<div class="loader-progress"></div>
</div>
</div>
<div class="mask"></div>
<div class="page-content">
<h1 style="text-align: center;">Creme</h1>
<div id="giscus-container" class="main-content"></div>
</div>
<!-- 新增用于显示背景图的 img 元素 -->
<img id="bingImage" />
<script>
const loaderProgress = document.querySelector('.loader-progress');
const loadingMask = document.querySelector('.loading-mask');
const url = 'your_resource_url_here'; // 替换为实际资源的URL，比如图片、文本等
fetch(url).then(response => {
const reader = response.body.getReader();
const contentLength = response.headers.get('Content-Length');
let receivedLength = 0;
const read = () => {
return reader.read().then(({ done, value }) => {
if (done) {
// 资源读取完毕后的处理，隐藏加载蒙版、加载条，显示页面内容
loadingMask.style.display = 'none';
document.querySelector('.loader').style.display = 'none';
document.querySelector('.page-content').style.display = 'block';
document.querySelector('.mask').style.display = 'none';
return;
}
receivedLength += value.length;
const percentComplete = (receivedLength / contentLength) * 100;
loaderProgress.style.width = Math.round(percentComplete) + '%';
return read();
});
};
return read();
});
</script>
<script src="https://giscus.app/client.js"
data-repo="awaidea/blog-1"
data-repo-id="R_kgDONTjesg"
data-category="Announcements"
data-category-id="DIC_kwDONTjess4ClN4X"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="1"
data-input-position="top"
data-theme="cobalt"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
<script>
fetch('https://bing.com/HPImageArchive.aspx?format=js&idx=0&n=1')
.then(response => response.json())
.then(data => {
const imgUrl = `https://www.bing.com${data.images[0].url}`;
document.getElementById('bingImage').src = imgUrl;
})
.catch(error => console.error('Error fetching Bing image:', error));
</script>
</body>
</html>