#first update
This commit is contained in:
jkboy
parent
89a63a9115
commit
f209c144b4
454
css/styles.css
Normal file
454
css/styles.css
Normal file
@ -0,0 +1,454 @@
|
||||
/* General Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* --- Sticky Navigation Bar --- */
|
||||
.sticky-nav-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FADADD; /* 保持截图中的粉色背景 */
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
transition: background-color 0.3s ease; /* 新增：平滑过渡效果 */
|
||||
}
|
||||
/* .sticky-nav-wrapper .container 的 padding: 0 20px; 会保持内容居中 */
|
||||
|
||||
/* 新增：导航栏滚动后的样式 */
|
||||
.sticky-nav-wrapper.scrolled-nav {
|
||||
background-color: rgba(250, 218, 221, 0.85); /* 半透明粉色，可调整透明度 (0.85) */
|
||||
}
|
||||
|
||||
.header-top-bar-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0; /* 导航栏的垂直内边距 */
|
||||
}
|
||||
|
||||
.logo a {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main-nav li {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-nav a:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* --- Hero Area --- */
|
||||
.site-hero-area {
|
||||
background-color: #FADADD; /* 粉色背景，现在只用于英雄图片区域 */
|
||||
/* padding-top 将由 JS 设置，以避免被固定导航栏遮挡 */
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
background-color: #FEC5D6; /* 英雄图占位符的备用背景色 */
|
||||
height: 300px; /* 英雄图高度 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #864659; /* 英雄图上文字颜色 */
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-image: url('placeholder-hero.jpg'); /* 替换为您的英雄图片URL */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.hero-image-placeholder .hero-text {
|
||||
background-color: rgba(250, 218, 221, 0.6); /* 文字背景，增加可读性 */
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* --- Main Content Area --- */
|
||||
.main-content-area { /* 用于包裹博客主要内容，方便整体控制 */
|
||||
/* 如果需要，可以在这里添加额外的上边距，但目前由 .site-hero-area 的 padding-top 控制 */
|
||||
}
|
||||
|
||||
.blog-main-title {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
margin: 40px 0 20px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
margin: 0 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
/* --- Post Card Styles (Corrected and Improved) --- */
|
||||
.post-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
height: 200px;
|
||||
background-color: #333; /* 图片加载失败时的备用背景 */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-card-image .play-icon {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
font-size: 0; /* 隐藏原始的 "►" 字符 */
|
||||
border: none; /* 确保没有额外的边框 */
|
||||
}
|
||||
|
||||
.post-card-image .play-icon::before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 10px 0 10px 15px; /* TopHeight RightWidth BottomHeight LeftWidth */
|
||||
border-color: transparent transparent transparent rgba(255, 255, 255, 0.95); /* 三角形颜色 */
|
||||
display: block;
|
||||
margin-left: 3px; /* 根据实际效果微调此值以使三角形视觉居中 */
|
||||
}
|
||||
|
||||
.post-card-image .play-icon:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7); /* 悬停时背景变暗 */
|
||||
}
|
||||
|
||||
.post-card-image .image-title-overlay {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: white;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
padding: 5px 15px;
|
||||
border-radius: 3px;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.post-card-image .image-subtitle-overlay {
|
||||
position: absolute;
|
||||
top: 48px; /* 示例值，请根据 image-title-overlay 的实际高度和间距调整 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #eee;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.polytopia-watermark {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-card-content {
|
||||
padding: 20px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-card-content h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.3em;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post-card-content .date {
|
||||
font-size: 0.85em;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-card-content p {
|
||||
font-size: 0.95em;
|
||||
color: #444;
|
||||
margin-bottom: 15px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.post-card-content .go-there-link {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.95em;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.post-card-content .go-there-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* --- Footer Styles --- */
|
||||
footer {
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
padding: 40px 20px 20px 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.footer-top-social {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-top-social a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 1.3em;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.footer-top-social a:hover {
|
||||
color: #00A2FF;
|
||||
}
|
||||
|
||||
footer .footer-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 30px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
footer .footer-column {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
margin: 10px 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
footer .footer-column h4 {
|
||||
color: #fff;
|
||||
border-bottom: none;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
footer .footer-column ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer .footer-column ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
footer .footer-column ul li a {
|
||||
color: #bbb;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
footer .footer-column ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.community-channels-title {
|
||||
font-size: 1.4em;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-bottom-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.footer-bottom-social a {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2em;
|
||||
margin: 8px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-bottom-social a:hover {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
footer .copyright {
|
||||
font-size: 0.9em;
|
||||
color: #888;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* --- Responsive Adjustments --- */
|
||||
@media (max-width: 768px) {
|
||||
.header-top-bar-content { /* 调整固定导航栏在小屏幕上的表现 */
|
||||
flex-direction: column;
|
||||
padding: 10px 0; /* 减少垂直内边距 */
|
||||
}
|
||||
.logo {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.main-nav ul {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.main-nav li {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.site-hero-area {
|
||||
/* padding-top will be dynamically adjusted by JS */
|
||||
}
|
||||
.hero-image-placeholder {
|
||||
height: 200px; /* 减小英雄图高度 */
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.blog-main-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.filter-button {
|
||||
padding: 8px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.posts-grid {
|
||||
grid-template-columns: 1fr; /* 单列博文 */
|
||||
}
|
||||
.container { /* 全局 container 调整 */
|
||||
width: 95%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* 固定导航栏内的 .container 也继承此处的 padding */
|
||||
|
||||
footer .footer-columns {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
footer .footer-column {
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
footer .footer-column h4 {
|
||||
text-align: center;
|
||||
}
|
||||
.footer-top-social {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.community-channels-title {
|
||||
margin-top: 20px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.footer-bottom-social a {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.1em;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
104
index.html
Normal file
104
index.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>POLYTOPIA - The Battle of Polytopia Official Blog (复刻版)</title>
|
||||
<meta name="description" content="Official Polytopia blog featuring the latest news, updates, skin releases, lore, and community events for The Battle of Polytopia game.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 固定导航栏 -->
|
||||
<div class="sticky-nav-wrapper" id="stickyNavWrapper">
|
||||
<div class="container">
|
||||
<div class="header-top-bar-content">
|
||||
<div class="logo">
|
||||
<a href="#">POLYTOPIA</a>
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Polynews</a></li>
|
||||
<li><a href="#">Shop</a></li>
|
||||
<li><a href="#">Press</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 英雄图片区域 -->
|
||||
<header class="site-hero-area" id="siteHeroArea">
|
||||
<div class="hero-image-placeholder">
|
||||
<span class="hero-text">POLYTOPIA ILLUSTRATION</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main-content-area">
|
||||
<div class="container">
|
||||
<h1 class="blog-main-title">POLYTOPIA BLOG POSTS</h1>
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-button">Android</button>
|
||||
<button class="filter-button">iPhone</button>
|
||||
</div>
|
||||
<div class="posts-grid" id="postsGrid">
|
||||
<!-- 博文卡片将由 JavaScript 动态插入这里 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-top-social">
|
||||
<a href="#" title="Facebook">F</a>
|
||||
<a href="#" title="Instagram">I</a>
|
||||
<a href="#" title="Twitter">T</a>
|
||||
<a href="#" title="Youtube">Yt</a>
|
||||
</div>
|
||||
<div class="footer-columns">
|
||||
<div class="footer-column">
|
||||
<h4>Contact</h4>
|
||||
<p>Midjiwan AB<br>Magnus Ladulåsgatan 65<br>118 27 Stockholm<br>Sweden<br><a href="http://www.midjiwan.com" target="_blank" rel="noopener noreferrer">www.midjiwan.com</a></p>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Useful Polytopia Links</h4>
|
||||
<ul>
|
||||
<li><a href="#">Tournaments</a></li>
|
||||
<li><a href="#">Wikia</a></li>
|
||||
<li><a href="#">Game Graphics</a></li>
|
||||
<li><a href="#">Game Asset Guidelines</a></li>
|
||||
<li><a href="#">Foldables</a></li>
|
||||
<li><a href="#">Unifund (University Sponsorship)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>More Useful Polytopia Links</h4>
|
||||
<ul>
|
||||
<li><a href="#">Community Works</a></li>
|
||||
<li><a href="#">Calendar</a></li>
|
||||
<li><a href="#">Ringtones</a></li>
|
||||
<li><a href="#">Music (Full versions)</a></li>
|
||||
<li><a href="#">Music Stems</a></li>
|
||||
<li><a href="#">Giphys</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="community-channels-title">Polytopia Community Channels</h3>
|
||||
<div class="footer-bottom-social">
|
||||
<a href="#" title="Discord">D</a>
|
||||
<a href="#" title="Facebook">F</a>
|
||||
<a href="#" title="Instagram">I</a>
|
||||
<a href="#" title="Twitter">T</a>
|
||||
<a href="#" title="Youtube">Yt</a>
|
||||
<a href="#" title="Reddit">R</a>
|
||||
<a href="#" title="TikTok">Tk</a>
|
||||
</div>
|
||||
<p class="copyright">© <script>document.write(new Date().getFullYear())</script> Midjiwan AB. All rights reserved. (复刻版)</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript 文件引用 -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
119
js/blog-data.json
Normal file
119
js/blog-data.json
Normal file
@ -0,0 +1,119 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Solaris – The Polaris Skin",
|
||||
"date": "May 7, 2025",
|
||||
"description": "New Skin Release: Solaris start with powers to turn water into lava and enemies into ashes. Master Heatwork, Geothermics, Explosives, and more. Get it in the Tribe Picker on mobile or as DLC on Steam. (50% on the main game on Steam). Tap to get it.",
|
||||
"imageUrl": "solaris_skin.jpg",
|
||||
"imageTitleOverlay": "SOLARIS",
|
||||
"imageSubtitleOverlay": "Polaris Skin",
|
||||
"watermark": "THE BATTLE OF POLYTOPIA",
|
||||
"hasPlayIcon": false,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Solaris – Pyro",
|
||||
"date": "May 6, 2025",
|
||||
"description": "Tap to learn how to create perfect barbecue conditions.",
|
||||
"imageUrl": "pyro_skin.jpg",
|
||||
"imageTitleOverlay": "PYRO",
|
||||
"imageSubtitleOverlay": "Polaris Skin",
|
||||
"watermark": "THE BATTLE OF POLYTOPIA",
|
||||
"hasPlayIcon": true,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Luxidoor Tribe Moon",
|
||||
"date": "May 2, 2025",
|
||||
"description": "Some shackles are gilded. The Aumux have built this empire as much as we have. But if this path continues… (Tap to read more).",
|
||||
"imageUrl": "luxidoor_moon.jpg",
|
||||
"imageTitleOverlay": "LUXIDOOR",
|
||||
"imageSubtitleOverlay": "Tribe Moon",
|
||||
"watermark": "THE BATTLE OF POLYTOPIA",
|
||||
"hasPlayIcon": false,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "Xin-Xi Lore",
|
||||
"date": "May 1, 2025",
|
||||
"description": "High in the mountains, the Xin-xi endure — disciplined, silent, and unshakable. Lean everything about the Xin-xi and Sha-po",
|
||||
"imageUrl": "xinxi_lore.jpg",
|
||||
"imageTitleOverlay": "MOUNTAINS SPIRIT STEEL",
|
||||
"imageSubtitleOverlay": "LORE",
|
||||
"watermark": "XIN-XI SHA-PO",
|
||||
"hasPlayIcon": true,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "Walpurgis Night",
|
||||
"date": "April 30, 2025",
|
||||
"description": "Today we celebrate Walpurgis Night in Sweden. This means we light bonfires and welcome the arrival of spring. Tap for info on what's coming up next.",
|
||||
"imageUrl": "walpurgis_night.jpg",
|
||||
"imageTitleOverlay": "WALPURGIS NIGHT",
|
||||
"imageSubtitleOverlay": "",
|
||||
"watermark": "THE BATTLE OF POLYTOPIA",
|
||||
"hasPlayIcon": true,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "∑∫ỹriȱŋ Week",
|
||||
"date": "April 21, 2025",
|
||||
"description": "50% on ∑∫ỹriȱŋ on Steam & Mobile. The Shard of D'Naeh calls to those who can hear it, a torrent of insidious promises and lies. Tap to view full ₼idŋighţ Skin Lore.",
|
||||
"imageUrl": "elyrion_week.jpg",
|
||||
"imageTitleOverlay": "∑∫ỹriȱŋ",
|
||||
"imageSubtitleOverlay": "Tribe Week",
|
||||
"watermark": "THE BATTLE OF POLYTOPIA",
|
||||
"hasPlayIcon": false,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"title": "Cosmic Observations",
|
||||
"date": "April 20, 2025",
|
||||
"description": "There have been observations of cosmic eggs. Tap to view more.",
|
||||
"imageUrl": "cosmic_observations.jpg",
|
||||
"imageTitleOverlay": "COSMIC OBSERVATIONS",
|
||||
"imageSubtitleOverlay": "",
|
||||
"watermark": "POLYTOPIA NEWS",
|
||||
"hasPlayIcon": false,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"title": "Xin-Xi Polysseum",
|
||||
"date": "April 11, 2025",
|
||||
"description": "The Xin-Xi like to turn mountains into their greatest weapon, make sure you do the same in this month's Polysseum. Tap to join.",
|
||||
"imageUrl": "xinxi_polysseum.jpg",
|
||||
"imageTitleOverlay": "XIN-XI POLYSSEUM",
|
||||
"imageSubtitleOverlay": "",
|
||||
"watermark": "TOURNAMENT",
|
||||
"hasPlayIcon": false,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "Xin-Xi Tribe Moon",
|
||||
"date": "April 1, 2025",
|
||||
"description": "Faceless ghosts, nameless shadows—the Sha-po live only to serve the Xin-xi throne. Tap to read more.",
|
||||
"imageUrl": "xinxi_tribe_moon_april.jpg",
|
||||
"imageTitleOverlay": "XIN XI",
|
||||
"imageSubtitleOverlay": "Tribe Moon",
|
||||
"watermark": "LORE",
|
||||
"hasPlayIcon": false,
|
||||
"linkUrl": "#",
|
||||
"linkText": "Go There"
|
||||
}
|
||||
]
|
||||
90
js/main.js
Normal file
90
js/main.js
Normal file
@ -0,0 +1,90 @@
|
||||
// 主要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);
|
||||
Loading…
x
Reference in New Issue
Block a user