<!-- 
// 功能：TAG标签页面默认模板
// 作者：启肯科技
// Q Q：328493711
// 微信：13738373177（同手机）
// 官网：http://www.qiken.com
// 说明：QKCMS-轻量级AI智能内容管理建站系统
// 版权：© 2025 温州启肯网络有限公司 保留所有权利，盗版必究。
-->

<?php
$tag = isset($_GET['tag']) ? htmlspecialchars($_GET['tag']) : '';
$show_tag_list = empty($tag);
$page_title = $show_tag_list ? 'TAG标签专题 - {qkcms:site_name}' : $tag . '_相关文章专题 - {qkcms:site_name}';
$page_keywords = $show_tag_list ? 'TAG标签,文章标签,内容专题,{qkcms:site_name}' : $tag . ',' . $tag . '相关文章,' . $tag . '原创内容,' . $tag . '最新资讯';
$page_description = $show_tag_list ? '{qkcms:site_name}TAG标签聚合页，汇总最新、热门、推荐标签内容，方便快速查找相关专题。' : '{qkcms:site_name}整理了所有包含【' . $tag . '】的优质原创文章，涵盖' . $tag . '最新资讯、实用攻略、深度解读等内容，持续更新，是你了解' . $tag . '的专业平台。';
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title><?=$page_title?></title>
  <meta name="keywords" content="<?=$page_keywords?>">
  <meta name="description" content="<?=$page_description?>">
</head>

<body>
  {qkcms:head.html}
  <?php if ($show_tag_list): ?>
  <main class="main-content" style=" padding:0px;">
    <section class="categories-section" style=" width:1198px; margin:0 auto; margin-bottom:20px; padding:0px">
      <div class="topics-header" style="border-top-left-radius:12px;border-top-right-radius: 12px;">
        <h2 class="topics-title">最新TAG</h2>
        <div class="topics-filter">
          <button class="filter-btn active" data-tab="latest"> <span class="icon clock"></span> 最新 </button>
          <button class="filter-btn" data-tab="comment"> <span class="icon comment"></span> 热门 </button>
          <button class="filter-btn" data-tab="hot"> <span class="icon fire"></span> 推荐 </button>
        </div>
      </div>
      <div class="categories-grid tab-content active" style="padding:20px; display: flex; flex-wrap: wrap; gap:5px;" id="latest"> {qkcms:tags row=100 order=1} <a href="{url}" class="tag2">{name} （{count}）</a> {/qkcms:tags} </div>
      <div class="categories-grid tab-content" style="padding:20px; display: flex; flex-wrap: wrap; gap:5px;" id="comment"> {qkcms:tags row=100 order=2} <a href="{url}" class="tag2">{name} （{count}）</a> {/qkcms:tags}
      </div>
      <div class="categories-grid tab-content" style="padding:20px; display: flex; flex-wrap: wrap; gap:5px;" id="hot">
        {qkcms:tags row=100 order=3} <a href="{url}" class="tag2">{name} （{count}）</a> {/qkcms:tags} </div>
    </section>
  </main>
  <?php else: ?>
  <main class="main-content">
    <div class="container">
      <div class="content-layout">
        <div class="main-column">
          <section class="topics-section">
            <div class="topics-header">
              <h1 class="topics-title">TAG【<?=$tag?>】</h1>
              <div class="topics-filter"> <span class="tag-count-label">已匹配（{qkcms:total_tag}）个相关 </span> </div>
            </div>
            <div class="topics-content">
              <div id="tag-article-list" class="tab-content active article-list"> {qkcms:articles row=12 col=1 property=0 order=latest titlelen=30 description_len=100 page=1 tag="1,<?=$tag?>"}
                <div class="topic-item fade-in"> <a href="{url}" class="topic-title">
                    <div class="article-thumbnail-container"> <img src="{thumbnail}" alt="{title}" class="article-thumbnail"> </div>
                  </a>
                  <div class="topic-content">
                    <div class="topic-header-row">
                      <div class="topic-meta"> <a href="#" class="topic-author">{author}</a> <span class="topic-time">{date_only}</span> </div>

                      <span class="article-tags">{keywords_links}</span>

                    </div>
                    <a href="{url}" class="topic-title">{title}</a>
                    <p>描述: {description}</p>
                    <div class="topic-footer">
                      <div class="topic-stats"> <span class="topic-stat"> <span class="icon view"></span> {views}</span>
                        <span class="topic-stat"> <span class="icon message"></span> {comments} </span> <span class="topic-stat"> <span class="icon like"></span> {like_count} </span>
                      </div>
                    </div>
                  </div>
                </div>
                {/qkcms:articles}
              </div>
            </div>
          </section>
          <section class="topics-section">
            <div class="pagination"> {qkcms:page type=1 page=1} {first_page} {prev_page} {page_numbers} {jump_to_page} {next_page} {last_page} <span class="page-status">{page_status}</span> {/qkcms:page} </div>
          </section>
        </div>
        <aside class="sidebar">
          <div class="tags-cloud-section">
            <h3 class="tags-header">热门标签<a href="/tag.html" class="section-link" style="float:right">更多</a></h3>
            <div class="tags-cloud"> {qkcms:tags row=30 order=1} <a href="{url}" class="tag">{name} （{count}）</a> {/qkcms:tags} </div>
          </div>
          <div class="events-section fade-in">
            <h3 class="events-header">全站公告</h3>
            {qkcms:articles row=3 property=4 category_id=-1 titlelen=40} <a href="{url}" class="event-item">
              <div class="event-date">
                <div class="event-month">{date_mo}月</div>
                <div class="event-day">{date_dy}</div>
              </div>
              <div class="event-info">
                <div class="event-title">{title}</div>
                <div class="event-location">{keywords}</div>
              </div>
            </a> {/qkcms:articles}
          </div>
        </aside>
      </div>
    </div>
  </main>
  <?php endif; ?>
  {qkcms:footer.html}
  <script>
    function highlightTagTerms() {
      var keyword = '<?=htmlspecialchars($tag)?>';
      if (!keyword || keyword.trim() === '') {
        return;
      }
      keyword = keyword.trim();
      var escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      var regex = new RegExp('(' + escapedKeyword + ')', 'gi');
      function highlightText(element) {
        if (element && element.innerHTML) {
          element.innerHTML = element.innerHTML.replace(regex, '<span style="color: red; font-weight: bold;">$1</span>');
        }
      }
      var titles = document.querySelectorAll('.topic-title');
      titles.forEach(highlightText);
      var descriptions = document.querySelectorAll('.topic-content p');
      descriptions.forEach(highlightText);
    }
    document.addEventListener('DOMContentLoaded', highlightTagTerms);
  </script>
</body>

</html>
