90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
// 主要JavaScript功能
|
|
|
|
// --- 动态调整英雄区上内边距 ---
|
|
function adjustHeroAreaPadding() {
|
|
const stickyNav = document.getElementById('stickyNavWrapper');
|
|
const heroArea = document.getElementById('siteHeroArea');
|
|
if (stickyNav && heroArea) {
|
|
const navHeight = stickyNav.offsetHeight;
|
|
heroArea.style.paddingTop = navHeight + 'px';
|
|
}
|
|
}
|
|
|
|
// --- 新增：处理导航栏滚动时的背景变化 ---
|
|
function handleStickyNavScroll() {
|
|
const stickyNav = document.getElementById('stickyNavWrapper');
|
|
const scrollThreshold = 10; // 滚动多少像素后改变背景 (可调整)
|
|
|
|
if (stickyNav) {
|
|
if (window.scrollY > scrollThreshold) {
|
|
stickyNav.classList.add('scrolled-nav');
|
|
} else {
|
|
stickyNav.classList.remove('scrolled-nav');
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- 博文卡片生成逻辑 ---
|
|
function createPostCard(post) {
|
|
const card = document.createElement('article');
|
|
card.className = 'post-card';
|
|
let imageOverlayHTML = '';
|
|
if (post.imageTitleOverlay) {
|
|
imageOverlayHTML += `<div class="image-title-overlay">${post.imageTitleOverlay}</div>`;
|
|
}
|
|
if (post.imageSubtitleOverlay) {
|
|
imageOverlayHTML += `<div class="image-subtitle-overlay">${post.imageSubtitleOverlay}</div>`;
|
|
}
|
|
card.innerHTML = `
|
|
<div class="post-card-image" style="background-image: url('${post.imageUrl}');">
|
|
${imageOverlayHTML}
|
|
${post.hasPlayIcon ? '<span class="play-icon">►</span>' : ''}
|
|
${post.watermark ? `<span class="polytopia-watermark">${post.watermark}</span>` : ''}
|
|
</div>
|
|
<div class="post-card-content">
|
|
<h2>${post.title}</h2>
|
|
<span class="date">${post.date}</span>
|
|
<p>${post.description}</p>
|
|
<a href="${post.linkUrl}" class="go-there-link">${post.linkText}</a>
|
|
</div>
|
|
`;
|
|
return card;
|
|
}
|
|
|
|
// --- 显示博文 ---
|
|
function displayPosts() {
|
|
const postsGrid = document.getElementById('postsGrid');
|
|
if (postsGrid) {
|
|
// 从JSON文件加载博客数据
|
|
fetch('./js/blog-data.json')
|
|
.then(response => response.json())
|
|
.then(blogPostsData => {
|
|
blogPostsData.forEach(post => {
|
|
const postCard = createPostCard(post);
|
|
postsGrid.appendChild(postCard);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading blog data:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
// --- 初始化函数 ---
|
|
function initializeApp() {
|
|
// 调整英雄区域内边距
|
|
adjustHeroAreaPadding();
|
|
|
|
// 显示博文
|
|
displayPosts();
|
|
|
|
// 新增：处理导航栏初始滚动状态
|
|
handleStickyNavScroll();
|
|
}
|
|
|
|
// --- 事件监听器 ---
|
|
// 页面加载时和窗口大小改变时调整
|
|
window.addEventListener('DOMContentLoaded', initializeApp);
|
|
window.addEventListener('resize', adjustHeroAreaPadding);
|
|
// 新增：监听滚动事件以改变导航栏背景
|
|
window.addEventListener('scroll', handleStickyNavScroll); |