{include:head.html}
{include:header.html}

<!-- ===== 面包屑导航 ===== -->
<div class="breadcrumb-wrap">
    <div class="container">
        <div class="breadcrumb">
            {raw:breadcrumb}
        </div>
    </div>
</div>

<!-- ===== 标签文章列表页 ===== -->
<div class="main">
    <div class="container">
        <div class="content">
            <div class="section">
                <div class="section-header">
                    <h2>标签：{var:tag.name} <span class="tag-count">（共 {var:total} 篇）</span></h2>
                </div>
                <div class="article-list-wrap">
                    {raw:list_html}
                </div>
                <div class="pagination">
                    {raw:pagination}
                </div>
            </div>
        </div>

        <div class="sidebar">
            <!-- 标签云 -->
            <div class="widget">
                <h3>热门标签</h3>
                <div class="sidebar-tag-cloud">
                    {qbcms:tagcloud num="30"}
                    <a href="[field:url]" class="sidebar-tag-item" style="font-size:[field:size]px;">[field:name]</a>
                    {/qbcms:tagcloud}
                </div>
            </div>
            <!-- 热门文章 -->
            <div class="widget hot-articles">
                <h3>热门文章</h3>
                <ol class="hot-list">
                    {qbcms:arclist num="8" order="desc" by="hits"}
                    <li>
                        <a href="[field:url]">[field:title]</a>
                        <span class="hot-hits" data-hit-id="[field:id]">[field:hits]</span>
                    </li>
                    {/qbcms:arclist}
                </ol>
            </div>
        </div>
    </div>
</div>

<style>
.section-header .tag-count { font-size: 14px; color: #999; font-weight: normal; }

.article-list-wrap { min-height: 200px; }
.article-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}
.article-item:last-child { border-bottom: none; }
.article-thumb { flex-shrink: 0; width: 160px; }
.article-thumb img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }
.article-body { flex: 1; min-width: 0; }
.article-body h3 { font-size: 16px; margin-bottom: 8px; line-height: 1.4; }
.article-body h3 a { color: #333; text-decoration: none; }
.article-body h3 a:hover { color: #4A6CF7; }
.article-meta { font-size: 12px; color: #999; margin-bottom: 6px; display: flex; gap: 12px; }
.article-meta .cat { color: #4A6CF7; }
.article-desc { font-size: 14px; color: #666; line-height: 1.6; }

.sidebar-tag-cloud { line-height: 2.4; }
.sidebar-tag-item {
    display: inline-block;
    margin: 3px 6px;
    padding: 2px 8px;
    color: #555;
    text-decoration: none;
    background: #f0f7ff;
    border-radius: 3px;
    transition: all 0.2s;
}
.sidebar-tag-item:hover {
    background: #4A6CF7;
    color: #fff;
    text-decoration: none;
}
</style>

{include:footer.html}