新版首页样式

This commit is contained in:
2026-03-01 23:39:08 +08:00
parent c9ff0c0901
commit 16b0ad38f3
8 changed files with 1846 additions and 537 deletions
+90 -77
View File
@@ -1,29 +1,35 @@
<?php get_header(); ?>
<main class="site-main">
<canvas class="hero-waves" aria-hidden="true"></canvas>
<section class="hero-section">
<main class="site-main home-landing">
<?php
$announcement_archive_url = get_post_type_archive_link('announcement');
if (!$announcement_archive_url) {
$announcement_archive_url = home_url('/announcements');
}
$posts_page_id = (int) get_option('page_for_posts');
$blog_archive_url = $posts_page_id ? get_permalink($posts_page_id) : '';
if (!$blog_archive_url) {
$blog_archive_url = home_url('/blog');
}
?>
<section class="landing-hero">
<canvas class="landing-hero-canvas" aria-hidden="true"></canvas>
<div class="container">
<div class="hero-content">
<h1 class="hero-title">
<span class="hero-title-svg" aria-hidden="true"></span>
<span class="hero-title-text" data-cn="爱特工作室" data-en="IT STUDIO"></span>
</h1>
<div class="landing-hero-content">
<h1 class="landing-hero-title" data-cn="爱特工作室" data-en="IT STUDIO"></h1>
<p class="landing-hero-subtitle" data-cn="中国海洋大学信息技术与工程实践团队" data-en="Technology and Engineering Practice Team at OUC"></p>
<a class="landing-hero-btn" href="<?php echo esc_url(home_url('/about')); ?>" data-cn="了解更多" data-en="Learn More"></a>
</div>
</div>
<div class="hero-scroll-indicator" aria-hidden="true">
<span class="scroll-arrow"></span>
<span class="scroll-text" data-cn="向下滑动开始" data-en="Scroll to begin"></span>
</div>
</section>
<section class="services-section">
<div class="container">
<!-- 服务提供模块 -->
<div class="services-provided">
<h2 data-cn="# 服务提供" data-en="# Our Services"></h2>
<h2 data-cn="@ 服务提供" data-en="@ Services"></h2>
<div class="services-grid-box">
<a href="#" class="service-item">
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 14L24 14L28 20H54C56.2091 20 58 21.7909 58 24V50C58 52.2091 56.2091 54 54 54H10C7.79086 54 6 52.2091 6 50V18C6 15.7909 7.79086 14 10 14Z" stroke="#ccd6f6"/>
@@ -33,9 +39,8 @@
</svg>
</div>
<span data-cn="资源站" data-en="Resources"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="32" cy="32" r="24" stroke="#ccd6f6"/>
@@ -48,9 +53,8 @@
</svg>
</div>
<span data-cn="校内镜像站" data-en="Mirror Site"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="16" y1="12" x2="16" y2="52" stroke="#ccd6f6"/>
@@ -62,9 +66,8 @@
</svg>
</div>
<span data-cn="代码托管" data-en="Git Hosting"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M32 8L54 20V44L32 56L10 44V20L32 8Z" stroke="#ccd6f6"/>
@@ -75,9 +78,8 @@
</svg>
</div>
<span data-cn="Minecraft服务器" data-en="Minecraft Server"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 16H42V40H20L12 48V16Z" stroke="#ccd6f6"/>
@@ -87,9 +89,8 @@
</svg>
</div>
<span data-cn="OUC论坛" data-en="OUC Forum"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M46 14L50 18L26 42L22 38L46 14Z" stroke="#ccd6f6"/>
@@ -101,9 +102,8 @@
</svg>
</div>
<span data-cn="电脑维修" data-en="PC Repair"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="10" y="12" width="44" height="40" rx="4" stroke="#ccd6f6"/>
@@ -116,9 +116,8 @@
</svg>
</div>
<span data-cn="五八工坊预约" data-en="Workshop Booking"></span>
</a>
<a href="#" class="service-item">
</div>
<div class="service-item">
<div class="service-icon">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M32 56C32 56 56 44 56 26C56 16 46 10 38 16C35 18 32 22 32 22C32 22 29 18 26 16C18 10 8 16 8 26C8 44 32 56 32 56Z" stroke="#ccd6f6"/>
@@ -129,86 +128,100 @@
</svg>
</div>
<span data-cn="OUC便民服务" data-en="OUC Services"></span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="content-section">
<section class="landing-updates">
<div class="container">
<div class="content-grid">
<div class="announcements-column">
<h2 data-cn="# 公告通知" data-en="# Announcements"></h2>
<div class="post-list">
<div class="landing-updates-grid">
<article class="landing-feed-box">
<header class="landing-feed-head">
<h2 data-cn="@ 公告通知" data-en="@ Announcements"></h2>
<a href="<?php echo esc_url($announcement_archive_url); ?>" data-cn="更多" data-en="More"></a>
</header>
<ul class="landing-feed">
<?php
$announcements = new WP_Query(array(
'post_type' => 'announcement',
'post_status' => 'publish',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC'
'order' => 'DESC',
'ignore_sticky_posts' => true,
'no_found_rows' => true
));
if ($announcements->have_posts()) :
while ($announcements->have_posts()) : $announcements->the_post();
$announcement_excerpt = get_the_excerpt();
if ('' === trim($announcement_excerpt)) {
$announcement_excerpt = wp_trim_words(wp_strip_all_tags(get_the_content()), 40, '...');
}
?>
<article class="post-item">
<div class="post-content-wrapper">
<h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="post-meta">
<span class="post-author"><?php echo get_the_author(); ?></span>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('Y年m月d日'); ?></time>
</div>
<li class="landing-feed-item">
<h3 class="landing-feed-title">
<a class="landing-feed-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="landing-feed-meta">
<span class="landing-feed-author"><?php echo esc_html(get_the_author()); ?></span>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('Y-m-d'); ?></time>
</div>
</article>
<p class="landing-feed-excerpt"><?php echo esc_html($announcement_excerpt); ?></p>
</li>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p data-cn="暂无公告" data-en="No announcements found."></p>
<li class="landing-feed-empty" data-cn="暂无公告" data-en="No announcements found."></li>
<?php endif; ?>
</div>
</div>
</ul>
</article>
<div class="blog-column">
<h2 data-cn="# 技术博客" data-en="# Blog"></h2>
<div class="post-list">
<article class="landing-feed-box">
<header class="landing-feed-head">
<h2 data-cn="@ 技术博客" data-en="@ Blog"></h2>
<a href="<?php echo esc_url($blog_archive_url); ?>" data-cn="更多" data-en="More"></a>
</header>
<ul class="landing-feed">
<?php
$blogs = new WP_Query(array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC'
'order' => 'DESC',
'ignore_sticky_posts' => true,
'no_found_rows' => true
));
if ($blogs->have_posts()) :
while ($blogs->have_posts()) : $blogs->the_post();
$blog_excerpt = get_the_excerpt();
if ('' === trim($blog_excerpt)) {
$blog_excerpt = wp_trim_words(wp_strip_all_tags(get_the_content()), 40, '...');
}
?>
<article class="post-item">
<div class="post-content-wrapper">
<h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="post-meta">
<span class="post-author"><?php echo get_the_author(); ?></span>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('Y年m月d日'); ?></time>
</div>
<li class="landing-feed-item">
<h3 class="landing-feed-title">
<a class="landing-feed-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="landing-feed-meta">
<span class="landing-feed-author"><?php echo esc_html(get_the_author()); ?></span>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date('Y-m-d'); ?></time>
</div>
</article>
<p class="landing-feed-excerpt"><?php echo esc_html($blog_excerpt); ?></p>
</li>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p data-cn="暂无博客文章" data-en="No blog posts found."></p>
<li class="landing-feed-empty" data-cn="暂无博客文章" data-en="No blog posts found."></li>
<?php endif; ?>
</div>
</div>
</ul>
</article>
</div>
</div>
</section>