{include file="common/header" /}
<main class="container">
    <section class="hero">
        <div class="hero-copy">
            <span class="hero-eyebrow">CORE + PLUGIN + THEME</span>
            <h1>让内容管理<br>回归简单</h1>
            <!-- 站点配置标签：读取站点描述。 -->
            <p>{pycms:config name="site_description" default="盘云CMS 采用核心、插件、主题三层架构，开箱即用，几分钟完成部署与扩展。" /}</p>
            <div class="hero-actions">
                <!-- 栏目标签：type="top" 读取顶级栏目，num=1 只取第一个栏目作为“了解更多”入口。 -->
                {pycms:channel type="top" num="1" id="first"}
                <a class="btn-primary" href="{$first.href}">{:__('home.read_more')}</a>
                {/pycms:channel}
                <!-- 站内 URL 标签：输出站内搜索页地址，自动兼容动态/伪静态模式。 -->
                <a class="btn-ghost" href="{pycms:url path="/search" /}">{:__('nav.search')}</a>
            </div>
            <div class="hero-stats">
                <div><strong>{$total}</strong><span>{:__('home.article_count')}</span></div>
                <!-- 计数标签：统计导航栏目数组的数量。 -->
                <div><strong>{pycms:count name="$navCategories" /}</strong><span>{:__('home.category_count')}</span></div>
                <!-- 版本标签：输出系统版本号。 -->
                <div><strong>v{pycms:app_version /}</strong><span>{:__('home.current_version')}</span></div>
            </div>
        </div>
        <div class="hero-side">
            <div class="hero-side-title">{:__('home.featured')}</div>
            <!-- 推荐内容标签：flag="recommend" 对应后台“推荐”属性。 -->
            {pycms:content flag="recommend" num="3" order="publish_time desc" empty="暂无推荐内容，请在后台将文章设为「推荐」。"}
            <a class="hero-feature" href="{$item.href}">
                <span class="hero-num">0{$i}</span>
                <span class="hero-feature-body">
                    <small>{$item.category.title}</small>
                    <strong>{$item.title}</strong>
                </span>
            </a>
            {/pycms:content}
        </div>
    </section>

    <div class="content-grid home-news-grid">
        <div class="main-col">
            {if $newsCategory.id}
            <section class="home-section news-section">
                <div class="section-head">
                    <h2>{$newsCategory.name}</h2>
                    <span class="section-line"></span>
                    <a class="section-more" href="{$newsCategory.href}">查看全部 →</a>
                </div>
                <div class="news-tabs" data-news-tabs role="tablist">
                    <!-- 循环标签：输出公司新闻“全部”及所有二级栏目选项卡。 -->
                    {pycms:volist name="$newsTabs" id="tab"}
                    <button type="button" class="news-tab{if $i == 1} active{/if}" data-news-tab="{$i}" role="tab">{$tab.name}</button>
                    {/pycms:volist}
                </div>
                <div class="news-panels">
                    <!-- 循环标签：每个选项卡对应一个栏目内容面板。 -->
                    {pycms:volist name="$newsTabs" id="tab"}
                    <div class="news-panel{if $i == 1} active{/if}" data-news-panel="{$i}" role="tabpanel">
                        <div class="post-grid news-post-grid">
                            <!-- 内容列表标签：catid 指定栏目；with_children=1 时“全部”包含二级栏目文章。 -->
                            {pycms:content catid="$tab.id" with_children="$tab.with_children" num="4" empty="该栏目暂未发布内容。"}
                            {include file="common/post-card" /}
                            {/pycms:content}
                        </div>
                    </div>
                    {/pycms:volist}
                </div>
            </section>
            {/if}
        </div>
        {include file="common/sidebar" /}
    </div>

    {if $productCategory.id}
    <section class="home-section product-section">
        <div class="section-head">
            <h2>{$productCategory.name}</h2>
            <span class="section-line"></span>
            <a class="section-more" href="{$productCategory.href}">进入产品中心 →</a>
        </div>
        <div class="product-carousel" data-carousel>
            <div class="carousel-viewport">
                <div class="carousel-track">
                    <!-- 产品轮播内容标签：读取产品栏目文章，每项生成一张轮播卡片。 -->
                    {pycms:content catid="$productCategory.id" num="5" order="is_top desc,publish_time desc" empty="产品栏目暂未发布内容。"}
                    <article class="carousel-slide">
                        <a class="carousel-cover" href="{$item.href}">
                            {if $item.thumb}
                            <img src="{$item.thumb}" alt="{$item.title}" loading="lazy">
                            {else}
                            <span class="carousel-cover-empty">{$item.initial}</span>
                            {/if}
                        </a>
                        <div class="carousel-copy">
                            <span class="chip">{$item.category_name}</span>
                            <h3><a href="{$item.href}">{$item.title}</a></h3>
                            <p>{$item.summary_text}</p>
                            <div class="carousel-meta"><span>{$item.views} 阅读</span><a href="{$item.href}">了解详情 →</a></div>
                        </div>
                    </article>
                    {/pycms:content}
                </div>
            </div>
            <button class="carousel-arrow carousel-prev" type="button" data-carousel-prev aria-label="上一张">‹</button>
            <button class="carousel-arrow carousel-next" type="button" data-carousel-next aria-label="下一张">›</button>
            <div class="carousel-dots" data-carousel-dots></div>
        </div>
    </section>
    {/if}

    <div class="home-split">
        {if $industryCategory.id}
        <section class="home-panel">
            <div class="section-head">
                <h2>{$industryCategory.name}</h2>
                <span class="section-line"></span>
                <a class="section-more" href="{$industryCategory.href}">更多 →</a>
            </div>
            <div class="compact-list">
                <!-- 内容列表标签：读取行业观察栏目最新 4 篇内容。 -->
                {pycms:content catid="$industryCategory.id" num="4" empty="行业观察栏目暂未发布内容。"}
                {include file="common/compact-post" /}
                {/pycms:content}
            </div>
        </section>
        {/if}
        {if $helpCategory.id}
        <section class="home-panel">
            <div class="section-head">
                <h2>{$helpCategory.name}</h2>
                <span class="section-line"></span>
                <a class="section-more" href="{$helpCategory.href}">更多 →</a>
            </div>
            <div class="compact-list">
                <!-- 内容列表标签：读取帮助中心栏目最新 4 篇内容。 -->
                {pycms:content catid="$helpCategory.id" num="4" empty="帮助中心栏目暂未发布内容。"}
                {include file="common/compact-post" /}
                {/pycms:content}
            </div>
        </section>
        {/if}
    </div>
</main>
{include file="common/footer" /}
<!-- 主题资源标签：输出主题内 home.js 的版本化地址，驱动选项卡和产品轮播。 -->
<script src="{pycms:theme_asset path="home.js" /}" defer></script>