|
|
<?php
|
|
|
/**
|
|
|
* 文章内容页
|
|
|
*/
|
|
|
?>
|
|
|
<?php get_header(); ?>
|
|
|
<section class="mt-[80px] relative w-full h-[45vh] min-h-[400px] max-h-[500px] flex flex-col justify-center overflow-hidden bg-slate-50 border-b border-slate-200/60">
|
|
|
|
|
|
<!-- 背景网格特效 -->
|
|
|
<div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: linear-gradient(#10b981 1px, transparent 1px), linear-gradient(90deg, #10b981 1px, transparent 1px); background-size: 32px 32px;"></div>
|
|
|
|
|
|
<!-- 左上角光晕 -->
|
|
|
<div class="absolute top-0 left-0 w-[600px] h-[600px] bg-primary-light/40 rounded-full mix-blend-multiply filter blur-[100px] opacity-70 -translate-x-1/2 -translate-y-1/2 pointer-events-none"></div>
|
|
|
|
|
|
<!-- 右下角光晕 -->
|
|
|
<div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent-light/20 rounded-full mix-blend-multiply filter blur-[80px] opacity-60 translate-x-1/3 translate-y-1/3 pointer-events-none"></div>
|
|
|
|
|
|
<!-- 核心内容区 -->
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8 w-full text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
|
|
|
|
|
|
<!-- 标签栏 -->
|
|
|
<div class="inline-flex items-center justify-center gap-2 px-4 py-1.5 rounded-full bg-white shadow-sm border border-primary/10 text-primary-dark text-sm font-bold tracking-widest mb-6">
|
|
|
<span class="material-symbols-outlined text-[16px] text-primary">newspaper</span>
|
|
|
最新资讯
|
|
|
</div>
|
|
|
|
|
|
<!-- 主标题 -->
|
|
|
<h1 class="font-display text-[2.66rem] md:text-5xl font-black text-slate-800 tracking-wide leading-tight mb-4">
|
|
|
新闻中心
|
|
|
</h1>
|
|
|
|
|
|
<!-- 描述文本 -->
|
|
|
<p class="text-slate-500 text-[1rem] max-w-2xl mx-auto leading-relaxed font-medium mb-10">
|
|
|
关注企业最新动态、行业前沿资讯及重大活动报道，与您分享我们的成长与洞察。
|
|
|
</p>
|
|
|
|
|
|
<!-- 整合的 WordPress 搜索表单 -->
|
|
|
<div class="search-form-wrapper max-w-3xl mx-auto">
|
|
|
<?php
|
|
|
$form_action = home_url('/');
|
|
|
if (is_page()) {
|
|
|
$form_action = get_permalink(get_queried_object_id());
|
|
|
} elseif (is_category()) {
|
|
|
$form_action = get_category_link(get_queried_object_id());
|
|
|
}
|
|
|
?>
|
|
|
<form class="news-search-form relative" method="get" action="<?php echo esc_url($form_action); ?>">
|
|
|
<!-- 添加了 Tailwind 样式构建一体式圆角搜索栏 -->
|
|
|
<div class="search-controls flex items-center bg-white rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 border border-slate-200/60 p-1.5">
|
|
|
|
|
|
<!-- 分类选择下拉菜单 -->
|
|
|
<div class="category-selector relative flex-shrink-0 border-slate-200 ">
|
|
|
<?php
|
|
|
$current_cat = isset($_GET['category']) ? $_GET['category'] : '';
|
|
|
if (empty($current_cat) && is_category()) {
|
|
|
$current_cat = get_queried_object()->slug;
|
|
|
}
|
|
|
?>
|
|
|
<select name="category" id="news-category" class="category-dropdown w-38 bg-transparent border-none text-slate-600 text-sm font-medium focus:ring-0 cursor-pointer pl-5 pr-8 py-3 appearance-none outline-none">
|
|
|
<option value="" data-url="<?php echo esc_url(home_url('/category/news-center/')); ?>" <?php selected(empty($current_cat) || $current_cat === 'news-center', true); ?>>显示全部</option>
|
|
|
<?php
|
|
|
$categories = get_categories(array(
|
|
|
'hide_empty' => false,
|
|
|
'orderby' => 'name',
|
|
|
'order' => 'ASC'
|
|
|
));
|
|
|
foreach ($categories as $category) {
|
|
|
if ($category->slug === 'news-center') continue;
|
|
|
$cat_link = get_category_link($category->term_id);
|
|
|
echo '<option value="' . esc_attr($category->slug) . '" data-url="' . esc_url($cat_link) . '" ' . selected($current_cat, $category->slug, false) . '>' . esc_html($category->name) . '</option>';
|
|
|
}
|
|
|
?>
|
|
|
</select>
|
|
|
<!-- 自定义下拉箭头图标 -->
|
|
|
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索输入框 -->
|
|
|
<div class="search-input-wrapper relative flex-grow">
|
|
|
<input type="text" name="search_keyword" id="news-search"
|
|
|
class="search-input w-full bg-transparent border-none text-slate-700 text-[15px] placeholder-slate-400 focus:ring-0 px-5 py-3 outline-none"
|
|
|
placeholder="输入关键词搜索新闻资讯..."
|
|
|
value="<?php echo isset($_GET['search_keyword']) ? esc_attr($_GET['search_keyword']) : ''; ?>"
|
|
|
autocomplete="off">
|
|
|
<div class="search-suggestions absolute top-full left-0 w-full mt-2 bg-white rounded-xl shadow-xl z-50" id="search-suggestions"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索按钮 -->
|
|
|
<button type="submit" class="search-button flex items-center justify-center w-12 h-12 bg-primary hover:bg-primary-dark active:scale-95 text-white rounded-full transition-all duration-200 flex-shrink-0 group">
|
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="group-hover:scale-110 transition-transform duration-200">
|
|
|
<path d="M19 19L13 13M15 8C15 11.866 11.866 15 8 15C4.134 15 1 11.866 1 8C1 4.134 4.134 1 8 1C11.866 1 15 4.134 15 8Z" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
|
</button>
|
|
|
</div>
|
|
|
<input type="hidden" name="post_type" value="post">
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部渐变线条 -->
|
|
|
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-primary/40 to-transparent"></div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 新闻搜索功能模块 -->
|
|
|
|
|
|
<div class="single-page-container">
|
|
|
<!-- 左侧文章列表侧边栏 -->
|
|
|
<aside class="sidebar-left" role="complementary" aria-label="相关文章">
|
|
|
<header class="sidebar-header">
|
|
|
<nav aria-label="返回导航">
|
|
|
<a href="/category/news-center"
|
|
|
class="back-link"
|
|
|
aria-label="返回新闻中心">
|
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
|
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
|
<span>返回新闻</span>
|
|
|
</a>
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<section class="recent-articles" aria-label="最新文章">
|
|
|
<h2 class="screen-reader-text">最新文章列表</h2>
|
|
|
<?php
|
|
|
// 优化查询参数
|
|
|
$recent_posts = new WP_Query(array(
|
|
|
'post_type' => 'post',
|
|
|
'posts_per_page' => 6,
|
|
|
'post_status' => 'publish',
|
|
|
'post__not_in' => array(get_the_ID()),
|
|
|
'no_found_rows' => true, // 性能优化：不计算总数
|
|
|
'update_post_meta_cache' => false, // 性能优化：不缓存meta
|
|
|
'update_post_term_cache' => false, // 性能优化：不缓存terms
|
|
|
'fields' => 'ids' // 只获取ID，减少内存使用
|
|
|
));
|
|
|
|
|
|
if ($recent_posts->have_posts()) :
|
|
|
// 重新获取完整文章数据（只针对需要的字段）
|
|
|
$post_ids = $recent_posts->posts;
|
|
|
$posts_data = get_posts(array(
|
|
|
'include' => $post_ids,
|
|
|
'post_type' => 'post',
|
|
|
'post_status' => 'publish',
|
|
|
'orderby' => 'post__in'
|
|
|
));
|
|
|
|
|
|
foreach ($posts_data as $post) :
|
|
|
setup_postdata($post);
|
|
|
?>
|
|
|
<article class="article-item">
|
|
|
<div class="article-content">
|
|
|
<h3 class="article-title">
|
|
|
<a href="<?php echo esc_url(get_permalink($post->ID)); ?>"
|
|
|
aria-label="阅读文章：<?php echo esc_attr(get_the_title($post->ID)); ?>">
|
|
|
<?php echo get_the_title($post->ID); ?>
|
|
|
</a>
|
|
|
</h3>
|
|
|
<time class="article-date" datetime="<?php echo get_the_date('c', $post->ID); ?>">
|
|
|
<?php echo get_the_date('Y-m-d', $post->ID); ?>
|
|
|
</time>
|
|
|
</div>
|
|
|
</article>
|
|
|
<?php
|
|
|
endforeach;
|
|
|
wp_reset_postdata();
|
|
|
else :
|
|
|
?>
|
|
|
<p class="no-articles">暂无相关文章</p>
|
|
|
<?php endif; ?>
|
|
|
</section>
|
|
|
</aside>
|
|
|
|
|
|
<!-- 右侧主要内容区域 -->
|
|
|
<main class="main-content" role="main">
|
|
|
<article class="article-content">
|
|
|
<header class="article-header">
|
|
|
<h1 class="article-title"><?php the_title(); ?></h1>
|
|
|
<div class="article-meta">
|
|
|
<time class="article-time" datetime="<?php echo get_the_date('c'); ?>">
|
|
|
<span class="screen-reader-text">发布时间：</span>
|
|
|
<?php the_time('Y-m-d H:i:s'); ?>
|
|
|
</time>
|
|
|
<?php if (get_the_category()) : ?>
|
|
|
<div class="article-categories">
|
|
|
<span class="screen-reader-text">分类：</span>
|
|
|
<?php the_category(', '); ?>
|
|
|
</div>
|
|
|
<?php endif; ?>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<div class="article-body">
|
|
|
<?php the_content(); ?>
|
|
|
</div>
|
|
|
|
|
|
<?php if (get_the_tags()) : ?>
|
|
|
<footer class="article-footer">
|
|
|
<div class="article-tags">
|
|
|
<span class="tags-label">标签：</span>
|
|
|
<?php the_tags('', ', ', ''); ?>
|
|
|
</div>
|
|
|
</footer>
|
|
|
<?php endif; ?>
|
|
|
</article>
|
|
|
</main>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
var categorySelect = document.getElementById('news-category');
|
|
|
var searchForm = document.querySelector('.news-search-form');
|
|
|
var searchInput = document.getElementById('news-search');
|
|
|
|
|
|
if (categorySelect && searchForm) {
|
|
|
// 处理表单提交
|
|
|
searchForm.addEventListener('submit', function(e) {
|
|
|
var keyword = searchInput ? searchInput.value.trim() : '';
|
|
|
var selectedOption = categorySelect.options[categorySelect.selectedIndex];
|
|
|
|
|
|
// 如果没有关键词，但选择了分类，则跳转到分类页
|
|
|
if (!keyword && selectedOption && selectedOption.dataset.url) {
|
|
|
e.preventDefault();
|
|
|
window.location.href = selectedOption.dataset.url;
|
|
|
}
|
|
|
// 如果有关键词，正常提交，WordPress会自动处理到search.php
|
|
|
});
|
|
|
|
|
|
// 下拉框改变时
|
|
|
categorySelect.addEventListener('change', function() {
|
|
|
var keyword = searchInput ? searchInput.value.trim() : '';
|
|
|
var selectedOption = this.options[this.selectedIndex];
|
|
|
|
|
|
// 如果没有关键词，直接跳转到分类页
|
|
|
if (!keyword && selectedOption && selectedOption.dataset.url) {
|
|
|
window.location.href = selectedOption.dataset.url;
|
|
|
} else {
|
|
|
// 如果有关键词，或者没有分类url（比如"显示全部"且没配置url），则提交表单
|
|
|
searchForm.submit();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<?php get_footer(); ?>
|
