{include file="header.tpl"}

<!-- 首页横幅 -->
<div class="hero-banner mb-4" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: white; padding: 60px 40px; border-radius: var(--border-radius);text-align: center;">
    <h1 style="font-size: 2.5rem; margin-bottom: 20px;">{$config.site.name}</h1>
    <p style="font-size: 1.2rem; opacity: 0.9; max-width: 600px; margin: 0 auto;">
        分享文学创作，品味文字之美
    </p>
    <div style="margin-top: 25px;">
        <a href="#article-list" class="read-more" style="background: rgba(255,255,255,0.2); color: white; border-color: white;">开始阅读</a>
    </div>
</div>

<!-- 网站公告 -->
{if $announcements}
<div class="sidebar-widget mb-4">
    <div class="widget-title">
        <span>📢</span>网站公告
    </div>
    <div style="display: flex; flex-direction: column; gap: 15px;">
        {foreach $announcements as $announcement}
        <div style="padding: 15px; background: var(--light-color); border-radius: var(--border-radius); border-left: 3px solid var(--primary-color);">
            <h6 style="margin: 0 0 8px 0; font-size: 1rem; color: var(--dark-color);">{$announcement.title}</h6>
            <p style="margin: 0 0 8px 0; color: var(--text-color); font-size: 0.9rem;">{$announcement.content}</p>
            <small class="text-muted">📅 {$announcement.time}</small>
        </div>
        {/foreach}
    </div>
</div>
{/if}

<!-- 分类列表前自定义数据钩子 -->
{display_custom_data position='before_category' page_type=$mod}

<!-- 文章列表 -->
<div id="article-list">
{if $posts}
{foreach $posts as $post}
<article class="article-card">
    <h2 class="article-title">
        <a href="{build_url mod='post' id=$post.id}">{$post.title nofilter}</a>
    </h2>

    <div class="article-meta">
        <div class="meta-item">
            <span>👤</span> {$post.author}
        </div>
        <div class="meta-item">
            <span>📁</span> {$post.category}
        </div>
        <div class="meta-item">
            <span>📅</span> {$post.create_time|date_format:'Y-m-d H:i'}
        </div>
        <div class="meta-item">
            <span>👁️</span> {$post.views} 阅读
        </div>
        {if $post.comments}
        <div class="meta-item">
            <span>💬</span> {$post.comments} 评论
        </div>
        {/if}
    </div>

    <div class="article-excerpt">
        {$post.content|truncate:200}
    </div>

    {if $post.tags_array}
    <div class="article-tags">
        {foreach $post.tags_array as $tag}
        {if $tag}
        <a href="{build_url mod='search' keyword=$tag}" class="tag">#{$tag}</a>
        {/if}
        {/foreach}
    </div>
    {/if}

    <div class="article-footer">
        <a href="{build_url mod='post' id=$post.id}" class="read-more">阅读全文 →</a>
    </div>
</article>
{/foreach}

<!-- 分类列表后自定义数据钩子 -->
{display_custom_data position='after_category' page_type=$mod}

<!-- 分页 -->
{if $pagination.total_pages > 1}
<nav class="pagination">
    {if $pagination.has_prev}
    <a href="{build_url mod='index' page=$pagination.page_prev}" class="page-link">上一页</a>
    {/if}

    {foreach $pagination.display_pages as $p}
    {if $p == $pagination.page}
    <span class="page-link page-current">{$p}</span>
    {else}
    <a href="{build_url mod='index' page=$p}" class="page-link">{$p}</a>
    {/if}
    {/foreach}

    {if $pagination.has_next}
    <a href="{build_url mod='index' page=$pagination.page_next}" class="page-link">下一页</a>
    {/if}
</nav>
{/if}
{else}
<div class="article-card text-center">
    <div style="font-size: 3rem; margin-bottom: 20px; color: var(--text-light);">📝</div>
    <h2 style="color: var(--text-light);">暂无文章</h2>
    <p style="color: var(--text-light);">这里还没有发布任何文章。</p>
</div>
{/if}
</div>

{include file="footer.tpl"}