Skip to content

Commit 74f0ee7

Browse files
Muchili-codeMuchili-code
committed
Major update(Homepage beautification)
首页美化： 1. 新增home.css 2. 新增home.js 3. 增加背景图片 4. 增加模板home.html 5. 套用模板和css文件 ------ 这一套下来，我直接从11点干到凌晨2点半，我的妈呀好有成就感。这一下子下来就让我舒服死了。实现了首页的背景图片+正文的完美过渡
1 parent 55d2a7d commit 74f0ee7

7 files changed

Lines changed: 379 additions & 28 deletions

File tree

‎docs/css/home.css‎

Lines changed: 185 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,193 @@
1-
/* 主页 */
2-
.homepage {
3-
display: flex;
4-
flex-direction: column;
5-
justify-content: center;
1+
/* =========================================
2+
1. 变量定义
3+
========================================= */
4+
:root {
5+
/* 亮色模式背景图 */
6+
--home-bg-image: url('../images/home_bg_light.png');
7+
--hero-height: 100vh;
8+
}
9+
10+
/* 暗黑模式适配 */
11+
[data-md-color-scheme="slate"] {
12+
--home-bg-image: url('../images/home_bg_dark.png');
13+
}
14+
15+
/* =========================================
16+
2. 导航栏透明化处理 (强力版)
17+
========================================= */
18+
.transparent-header {
19+
background-color: transparent !important;
20+
background: transparent !important;
21+
box-shadow: none !important;
22+
border-bottom: none !important;
23+
backdrop-filter: none !important;
24+
-webkit-backdrop-filter: none !important;
25+
}
26+
27+
.transparent-header .md-tabs {
28+
background-color: transparent !important;
29+
background: transparent !important;
30+
}
31+
32+
.transparent-header .md-header__title,
33+
.transparent-header .md-tabs__link,
34+
.transparent-header .md-header__button {
35+
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
36+
color: #fff !important;
37+
}
38+
39+
/* =========================================
40+
3. 修复“返回顶部”按钮层级 (Bug Fix)
41+
========================================= */
42+
.md-top {
43+
/* 关键修复：原主题 z-index 较低，被我们的 hero 和 container 盖住了。
44+
这里设置为 100，确保它永远在最上层，可点击且可见。 */
45+
z-index: 100 !important;
46+
47+
/* 可选：为了让它在图片上更明显，可以加一点阴影 */
48+
box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
49+
}
50+
51+
/* =========================================
52+
4. Hero 区域
53+
========================================= */
54+
.mdx-hero {
55+
position: fixed;
56+
top: 0;
57+
left: 0;
58+
width: 100%;
59+
height: var(--hero-height);
60+
z-index: 0;
61+
overflow: hidden;
62+
display: flex;
663
align-items: center;
7-
margin-top: 5%;
8-
font-size: 120%
9-
}
64+
justify-content: center;
65+
will-change: transform;
66+
}
1067

11-
.md-typeset a {
12-
border-bottom: none;
68+
/* 背景图片层 */
69+
.mdx-hero__layer--bg {
70+
position: absolute;
71+
top: 0;
72+
left: 0;
73+
width: 100%;
74+
height: 100%;
75+
background-image: var(--home-bg-image);
76+
background-size: cover;
77+
background-position: center;
78+
z-index: 1;
79+
will-change: transform, opacity;
1380
}
1481

15-
[data-md-color-scheme="slate"] {
16-
background-attachment: fixed;
17-
background-repeat: no-repeat;
18-
background-position: center center;
19-
background-image: url('../assets/images/home_background_dark.jpg');
82+
/* =========================================
83+
5. 统一蒙版效果 (Dark & Light)
84+
========================================= */
85+
86+
/* --- 暗黑模式 (Slate) --- */
87+
[data-md-color-scheme="slate"] .mdx-hero__layer--bg {
88+
/* 底部羽化：80%处开始变透明，100%完全透明 */
89+
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
90+
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
2091
}
2192

93+
/* --- 浅色模式 (Default) - 现已启用蒙版 --- */
94+
[data-md-color-scheme="default"] .mdx-hero__layer--bg {
95+
/* 同样启用底部羽化，效果统一 */
96+
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
97+
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
98+
}
2299

23-
[data-md-color-scheme="default"] {
24-
background-attachment: fixed;
25-
background-repeat: no-repeat;
26-
background-position: center center;
27-
background-image: url('../assets/images/home_background_light.png');
28-
background-color: rgba(0, 0, 0, 0.3); /* 设置半透明背景色 */
29-
background-size: cover
30-
/* position: relative; 使伪元素相对定位 */
100+
/* 彻底移除旧的覆盖层 */
101+
.mdx-hero__overlay {
102+
display: none !important;
31103
}
104+
105+
/* 首页大字内容 */
106+
.mdx-hero__content {
107+
position: relative;
108+
z-index: 3;
109+
text-align: center;
110+
color: #fff;
111+
text-shadow: 0 4px 20px rgba(0,0,0,0.8);
112+
will-change: transform, opacity;
113+
margin-top: -5vh;
114+
}
115+
116+
.hero-title {
117+
font-size: 3.5rem;
118+
font-weight: 800;
119+
margin-bottom: 1rem;
120+
line-height: 1.2;
121+
}
122+
.hero-subtitle {
123+
font-size: 1.5rem;
124+
opacity: 0.95;
125+
font-weight: 500;
126+
}
127+
128+
/* 跳动箭头 */
129+
.mdx-hero__scroll-down {
130+
position: absolute;
131+
bottom: 50px;
132+
left: 50%;
133+
transform: translateX(-50%);
134+
color: #fff;
135+
z-index: 10;
136+
cursor: pointer;
137+
animation: bounce 2s infinite;
138+
opacity: 0.9;
139+
text-shadow: 0 2px 5px rgba(0,0,0,0.5);
140+
}
141+
142+
@keyframes bounce {
143+
0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
144+
40% {transform: translateX(-50%) translateY(-10px);}
145+
60% {transform: translateX(-50%) translateY(-5px);}
146+
}
147+
148+
/* =========================================
149+
6. Content 区域 (正文)
150+
========================================= */
151+
.mdx-container {
152+
position: relative;
153+
z-index: 10;
154+
margin-top: 100vh;
155+
width: 100%;
156+
min-height: 100vh;
157+
margin-top: 99.8vh;
158+
}
159+
160+
/* --- 浅色模式：改为透明背景 --- */
161+
[data-md-color-scheme="default"] .mdx-container {
162+
/* 之前是白色，现在改为透明，配合上面的蒙版，
163+
让图片自然淡出到底部的背景色（通常是浅灰色）中 */
164+
background-color: transparent;
165+
box-shadow: none;
166+
}
167+
168+
/* --- 暗黑模式：透明背景 --- */
169+
[data-md-color-scheme="slate"] .mdx-container {
170+
background-color: transparent;
171+
}
172+
173+
.content-wrapper {
174+
padding: 4rem 1rem;
175+
padding-bottom: 8rem;
176+
background: transparent;
177+
}
178+
179+
/* =========================================
180+
7. 动画相关
181+
========================================= */
182+
.scroll-animate-item {
183+
opacity: 0;
184+
transform: translateY(30px);
185+
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
186+
}
187+
188+
.scroll-animate-item.is-visible {
189+
opacity: 1;
190+
transform: translateY(0);
191+
}
192+
193+
.md-sidebar { display: none !important; }

‎docs/images/home_bg_dark.png‎

2.52 MB
Loading

‎docs/images/home_bg_light.png‎

1.2 MB
Loading

‎docs/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ title: " ⭐星河璀璨，志凌九霄🚀 "
33
author: "Muchili"
44
date: "2025-07-31"
55
description: "这是一个文档的简短描述"
6+
template: home.html
67
statistics: True
78
comments: true
89
---
910

10-
<div markdown="1" class="homepage">
11-
<h1 style="font-size: 2rem; margin-left: 10%"> <span id="typed"> </span> </h1>
12-
</div>
11+
<link rel="stylesheet" href="./css/home.css">
12+
<script defer src="./javascripts/home.js"></script>
1313

14+
<!--
1415
<div id="rcorners2">
1516
<div id="rcorners1"class="date-display">
1617
<p class="p1"> </p>
@@ -58,7 +59,6 @@ comments: true
5859
</div>
5960
<br>
6061
61-
<!--
6262
<center>
6363
<font color="#788bb8" size="6" class="ml3"> 星河璀璨，志凌九霄</font>
6464
</center>

‎docs/javascripts/home.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
3+
// ============================================
4+
// 0. 初始化变量
5+
// ============================================
6+
const heroBg = document.getElementById("heroBg");
7+
const heroContent = document.getElementById("heroContent");
8+
const header = document.querySelector(".md-header");
9+
// 适配 MkDocs Material 的 Tabs 导航栏（如果有）
10+
const tabs = document.querySelector(".md-tabs");
11+
let ticking = false;
12+
13+
// 只有在首页且存在 hero 元素时才执行
14+
const isHomePage = document.querySelector(".mdx-hero");
15+
16+
// ============================================
17+
// 1. 导航栏透明控制 (核心逻辑)
18+
// ============================================
19+
function updateHeaderStyle() {
20+
if (!isHomePage || !header) return;
21+
22+
const scrollY = window.scrollY;
23+
// 阈值：滚动超过 50px 就开始变色，避免一直透明导致看不清内容
24+
const threshold = 50;
25+
26+
if (scrollY < threshold) {
27+
// 在顶部：添加透明类
28+
header.classList.add("transparent-header");
29+
if (tabs) tabs.classList.add("transparent-header");
30+
// 移除阴影
31+
header.style.boxShadow = "none";
32+
} else {
33+
// 滚下来了：移除透明类，恢复默认样式
34+
header.classList.remove("transparent-header");
35+
if (tabs) tabs.classList.remove("transparent-header");
36+
// 恢复阴影（可选）
37+
header.style.removeProperty("box-shadow");
38+
}
39+
}
40+
41+
// 初始化执行一次
42+
if (isHomePage) {
43+
header.classList.add("transparent-header");
44+
if (tabs) tabs.classList.add("transparent-header");
45+
}
46+
47+
// ============================================
48+
// 2. 视差滚动逻辑
49+
// ============================================
50+
function updateParallax() {
51+
const scrollY = window.scrollY;
52+
const heroHeight = window.innerHeight;
53+
54+
// 更新导航栏状态
55+
updateHeaderStyle();
56+
57+
// 只有在首屏附近才计算动画
58+
if (scrollY < heroHeight * 1.5) {
59+
60+
const progress = scrollY / heroHeight;
61+
62+
// --- 背景图效果 ---
63+
if (heroBg) {
64+
// 放大效果：1 -> 1.1 (稍微放大一点点即可)
65+
const scaleValue = 1 + (progress * 0.1);
66+
67+
// 位移效果：向上移动 (负值)
68+
// 浅色模式下，我们希望它被这一层“白纸”盖住，所以让它移动慢一点，
69+
// 这样“白纸”滚上来的时候就能自然覆盖它。
70+
const translateValue = -(scrollY * 0.3);
71+
72+
// 透明度：
73+
// 深色模式：配合 CSS mask-image，这里可以不用动透明度，或者动得很慢
74+
// 浅色模式：也可以不用动，因为会被盖住。
75+
// 为了统一效果，我们让它滚到一半时开始稍微变淡
76+
const opacityValue = 1 - (progress * 0.8);
77+
78+
heroBg.style.transform = `translate3d(0, ${translateValue}px, 0) scale(${scaleValue})`;
79+
heroBg.style.opacity = Math.max(0, opacityValue);
80+
}
81+
82+
// --- 文字效果 ---
83+
if (heroContent) {
84+
// 文字飞得快一点
85+
const textTranslate = -(scrollY * 0.5);
86+
const textOpacity = 1 - (progress * 2.0);
87+
88+
heroContent.style.transform = `translate3d(0, ${textTranslate}px, 0)`;
89+
heroContent.style.opacity = Math.max(0, textOpacity);
90+
}
91+
}
92+
93+
ticking = false;
94+
}
95+
96+
// ============================================
97+
// 3. 事件监听
98+
// ============================================
99+
if (isHomePage) {
100+
window.addEventListener("scroll", function () {
101+
if (!ticking) {
102+
window.requestAnimationFrame(updateParallax);
103+
ticking = true;
104+
}
105+
});
106+
// 初始运行
107+
updateParallax();
108+
}
109+
110+
// ============================================
111+
// 4. 内容块渐显 (Staggered Animation)
112+
// ============================================
113+
const contentWrapper = document.querySelector(".content-wrapper");
114+
if (contentWrapper) {
115+
// 选取需要动画的元素
116+
const children = contentWrapper.querySelectorAll(".grid, h2, h3, p, ul, .admonition");
117+
118+
children.forEach((child) => {
119+
child.classList.add("scroll-animate-item");
120+
});
121+
122+
const observer = new IntersectionObserver((entries) => {
123+
entries.forEach((entry) => {
124+
if (entry.isIntersecting) {
125+
entry.target.classList.add("is-visible");
126+
observer.unobserve(entry.target);
127+
}
128+
});
129+
}, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });
130+
131+
children.forEach((child, index) => {
132+
// 延迟逻辑
133+
const delay = (index % 10) * 0.1;
134+
child.style.transitionDelay = `${delay}s`;
135+
observer.observe(child);
136+
});
137+
}
138+
139+
// 平滑滚动修正
140+
const scrollLink = document.querySelector('a[href="#start-content"]');
141+
if (scrollLink) {
142+
scrollLink.addEventListener('click', function(e) {
143+
e.preventDefault();
144+
const target = document.querySelector("#start-content");
145+
if(target) {
146+
target.scrollIntoView({ behavior: 'smooth' });
147+
}
148+
});
149+
}
150+
});

0 commit comments

Comments
 (0)