Skip to content

Commit af4f22c

Browse files
author
Coco Nalea
committed
增加一篇文章，似乎没了。。。。
1 parent 3f797d5 commit af4f22c

File tree

10 files changed

+485
-94
lines changed

10 files changed

+485
-94
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
/部署.bat
22
/测试.bat
3+
/node-new-article.js
4+
/README-article.md
5+
/.gitignore

‎index.html‎

Lines changed: 70 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,33 +25,83 @@ <h1 data-typewriter>欢迎访问我的网站</h1>
2525
<a href="/src/pages/about.html" class="btn">了解更多</a>
2626
</section>
2727

28-
<section class="features">
29-
<div class="card">
30-
<i class="fas fa-bolt"></i>
31-
<h3>123</h3>
32-
<p>456</p>
33-
</div>
34-
<div class="card">
35-
<i class="fas fa-mobile-alt"></i>
36-
<h3>响应式设计</h3>
37-
<p>适配手机、平板和桌面设备</p>
38-
</div>
39-
<div class="card">
40-
<i class="fas fa-paint-brush"></i>
41-
<h3>现代设计</h3>
42-
<p>简洁美观的界面设计</p>
43-
</div>
28+
<section class="features" id="articles-container">
29+
<!-- 文章卡片将通过JavaScript动态生成 -->
4430
</section>
4531

32+
<!-- 全局配置 -->
33+
<script src="/src/config/workspace.js"></script>
34+
35+
<!-- 文章数据 -->
36+
<script src="/src/essay/essay.js"></script>
37+
38+
<script>
39+
// 动态加载文章
40+
document.addEventListener('DOMContentLoaded', () => {
41+
try {
42+
const container = document.getElementById('articles-container');
43+
44+
// 调试：检查数据加载情况
45+
console.log('文章数据:', window.articles);
46+
47+
// 检查数据是否加载
48+
if (!window.articles || !Array.isArray(window.articles)) {
49+
console.error('文章数据未正确加载，请检查:',
50+
'1. /src/essay/essay.js路径是否正确',
51+
'2. essay.js是否正确定义window.articles');
52+
return;
53+
}
54+
55+
// 清空容器避免重复
56+
container.innerHTML = '';
57+
58+
// 生成文章卡片
59+
window.articles.forEach(article => {
60+
const card = document.createElement('a');
61+
card.href = `/src/essay/article_template.html?md=${article.filename}&id=${articles.indexOf(article)}`;
62+
card.className = 'card';
63+
card.style.background = article.colorClass || '';
64+
card.innerHTML = `
65+
<div class="card-content" data-filename="${article.filename}">
66+
<h3>${article.title}</h3>
67+
<p>${article.description}</p>
68+
</div>
69+
`;
70+
container.appendChild(card);
71+
});
72+
73+
} catch (error) {
74+
console.error('加载文章失败:', error);
75+
}
76+
});
77+
</script>
78+
4679
</main>
4780

4881
<!-- 动态插入页脚 -->
4982
<div id="footer"></div>
5083

51-
<!-- 主JS脚本 -->
52-
<script src="/src/scripts/main.js"></script>
53-
<!-- 可选功能脚本 -->
54-
<script src="/src/scripts/optional.js"></script>
84+
<!-- 链接调试与跳转 -->
85+
<script>
86+
document.addEventListener('click', (e) => {
87+
if (e.target.closest('.card')) {
88+
const card = e.target.closest('.card');
89+
// 仅记录不阻止跳转
90+
console.group('文章跳转调试');
91+
console.log('目标URL:', card.href);
92+
console.log('文件状态:',
93+
fetch(card.href)
94+
.then(res => res.statusText)
95+
.catch(e => e.message));
96+
console.groupEnd();
97+
}
98+
});
99+
</script>
100+
101+
<!-- 主JS脚本 -->
102+
<script src="/src/scripts/main.js"></script>
103+
<!-- 可选功能脚本 -->
104+
<script src="/src/scripts/optional.js"></script>
55105
</body>
56106

57107
</html>

‎src/assets/styles/base.css‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* 重置默认样式 */
21
* {
32
margin: 0;
43
padding: 0;
@@ -25,7 +24,6 @@
2524
background-size: cover;
2625
}
2726

28-
/* 添加遮罩层确保文字可读性 */
2927
body::before {
3028
content: '';
3129
position: fixed;
@@ -48,7 +46,6 @@
4846
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
4947
}
5048

51-
/* 头部样式 */
5249
.site-header {
5350
background-color: rgba(255, 255, 255, 0.729);
5451
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
@@ -98,7 +95,6 @@
9895
cursor: pointer;
9996
}
10097

101-
/* 页脚样式 */
10298
.site-footer {
10399
background-color: var(--light-gray);
104100
padding: 2rem 0;
@@ -148,74 +144,86 @@
148144
.social-links {
149145
display: flex;
150146
gap: 1rem;
151-
margin-top: 1rem;
152147
}
153148

154149
.social-links a {
150+
color: var(--text-color);
155151
font-size: 1.2rem;
152+
transition: color 0.3s;
153+
}
154+
155+
.social-links a:hover {
156+
color: var(--primary-color);
156157
}
157158

158159
.copyright {
159160
text-align: center;
160161
margin-top: 2rem;
161-
padding-top: 1rem;
162-
border-top: 1px solid #ddd;
163162
color: var(--dark-gray);
163+
font-size: 0.9rem;
164164
}
165165

166-
/* 关于页面样式 */
167166
.about-section h1 {
168-
margin-bottom: 1rem;
167+
margin-bottom: 2rem;
169168
color: var(--primary-color);
170169
}
171170

172171
.about-content {
173-
margin-bottom: 3rem;
172+
max-width: 800px;
173+
margin: 0 auto;
174174
}
175175

176176
.about-content h2 {
177177
margin: 1.5rem 0 1rem;
178-
color: var(--secondary-color);
178+
color: var(--primary-color);
179179
}
180180

181181
.values-list {
182-
list-style: none;
183-
margin-top: 1rem;
182+
margin: 2rem 0;
184183
}
185184

186185
.values-list li {
187-
margin-bottom: 0.5rem;
186+
margin-bottom: 1rem;
187+
display: flex;
188+
align-items: center;
188189
}
189190

190191
.values-list i {
191-
color: var(--secondary-color);
192-
margin-right: 0.5rem;
192+
margin-right: 1rem;
193+
color: var(--primary-color);
194+
font-size: 1.5rem;
193195
}
194196

195197
.team-showcase h2 {
196-
margin-bottom: 2rem;
198+
margin: 2rem 0 1rem;
197199
color: var(--primary-color);
198200
}
199201

200202
.team-grid {
201203
display: grid;
202204
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
203205
gap: 2rem;
206+
margin: 2rem 0;
204207
}
205208

206209
.team-member {
207-
text-align: center;
210+
background-color: white;
211+
border-radius: 8px;
212+
overflow: hidden;
213+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
214+
transition: transform 0.3s;
215+
}
216+
217+
.team-member:hover {
218+
transform: translateY(-5px);
208219
}
209220

210221
.member-photo {
211-
width: 150px;
212-
height: 150px;
213-
margin: 0 auto 1rem;
214-
border-radius: 50%;
215-
background-color: var(--light-gray);
222+
width: 100%;
223+
height: 200px;
224+
object-fit: cover;
216225
}
217226

218-
/* 打字机动画样式 */
219227
@keyframes typing {
220228
from { width: 0 }
221229
to { width: 100% }
@@ -236,35 +244,27 @@
236244
}
237245

238246
@keyframes gentle-blink {
239-
0%, 100% { opacity: 1; }
240-
50% { opacity: 0.3; }
247+
0%, 100% { opacity: 1 }
248+
50% { opacity: 0.5 }
241249
}
242250

243251
.blink-after-typing {
244-
animation: gentle-blink 2s ease-in-out infinite !important;
252+
animation: gentle-blink 1.5s infinite;
245253
}
246254

247-
/* 响应式设计 */
248255
@media (max-width: 768px) {
249-
.main-nav {
250-
position: fixed;
251-
top: 70px;
252-
left: 0;
253-
width: 100%;
254-
background-color: white;
255-
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
256-
max-height: 0;
257-
overflow: hidden;
258-
transition: max-height 0.3s ease-out;
256+
.header-container {
257+
flex-direction: column;
258+
align-items: flex-start;
259259
}
260260

261-
.main-nav.show {
262-
max-height: 300px;
261+
.main-nav {
262+
width: 100%;
263+
margin-top: 1rem;
263264
}
264265

265266
.main-nav ul {
266267
flex-direction: column;
267-
padding: 1rem;
268268
}
269269

270270
.main-nav li {
@@ -275,7 +275,11 @@
275275
display: block;
276276
}
277277

278-
.footer-container {
279-
flex-direction: column;
278+
.main-nav {
279+
display: none;
280280
}
281-
}
281+
282+
.main-nav.show {
283+
display: block;
284+
}
285+
}

‎src/assets/styles/layout.css‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,71 @@
11
/* 卡片布局 */
22
.card {
3-
background: var(--content-bg);
43
border-radius: 8px;
54
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
65
padding: 1.5rem;
7-
transition: transform 0.3s, box-shadow 0.3s;
8-
backdrop-filter: blur(5px);
6+
transition: all 0.3s ease;
7+
position: relative;
8+
overflow: hidden;
9+
text-decoration: none !important;
10+
}
11+
12+
.card * {
13+
text-decoration: none !important;
14+
}
15+
16+
.card::before {
17+
content: "";
18+
position: absolute;
19+
top: -50%;
20+
left: -50%;
21+
width: 200%;
22+
height: 200%;
23+
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
24+
transform: rotate(30deg);
25+
transition: all 0.5s ease;
926
}
1027

1128
.card:hover {
12-
transform: translateY(-5px);
13-
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
29+
transform: translateY(-5px) scale(1.02);
30+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
31+
}
32+
33+
.card:hover::before {
34+
transform: rotate(30deg) translateX(50px);
35+
}
36+
37+
.card a {
38+
text-decoration: none;
39+
color: inherit;
40+
display: block;
41+
height: 100%;
42+
}
43+
44+
.card-content {
45+
color: inherit;
1446
}
1547

48+
.card-content h3,
49+
.card-content p {
50+
text-decoration: none;
51+
}
52+
53+
.card h3 {
54+
margin: 1rem 0;
55+
color: var(--primary-color);
56+
}
57+
58+
/* 图标样式 */
1659
.card i {
1760
font-size: 2rem;
1861
color: var(--primary-color);
1962
margin-bottom: 1rem;
2063
}
2164

22-
.card h3 {
23-
margin: 1rem 0;
65+
.article i {
66+
font-size: 1.5rem;
2467
color: var(--primary-color);
68+
margin-right: 0.5rem;
2569
}
2670

2771
/* 按钮样式 */

0 commit comments

Comments
 (0)