web_huangguo_web/app/templates/page/search.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{template "seoCommon" .}}
    <title>
      {{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .title}}{{.title}} -
      黄果短剧{{else}}搜索短剧 - 黄果短剧{{end}}
    </title>
    <meta
      name="description"
      content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .description}}{{.description}}{{else}}在黄果短剧搜索短剧名称、标签与关键词，快速找到想看的剧集。{{end}} - 黄果短剧"
    />
    <meta
      name="keywords"
      content="{{if .query}}{{.query}},短剧搜索,黄果短剧{{else}}短剧搜索,搜索短剧,黄果短剧{{end}}"
    />
    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      content="{{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .title}}{{.title}}{{else}}搜索短剧{{end}} - 黄果短剧"
    />
    <meta
      property="og:description"
      content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .description}}{{.description}}{{else}}在黄果短剧搜索短剧名称、标签与关键词。{{end}}"
    />
    <link rel="stylesheet" href="/static/css/index.css?v=25" />
    <link rel="stylesheet" href="/static/css/search.css?v=7" />
  </head>
  <body class="site-shell search-layout {{if .query}}has-search-query{{else}}is-search-landing{{end}}">
    {{template "header" .}}
    <main class="search-page">
      <div class="search-inner">
        <nav class="search-breadcrumb" aria-label="面包屑">
          <a class="search-breadcrumb-link" href="/">首页</a>
          <span class="search-breadcrumb-sep">/</span>
          {{if .query}}
          <a class="search-breadcrumb-link search-breadcrumb-search-root" href="/search/">全站搜索</a>
          <span class="search-breadcrumb-sep search-breadcrumb-search-root">/</span>
          {{end}}
          <span class="search-breadcrumb-current"
            >{{if .query}}{{.query}}{{else}}全站搜索{{end}}</span
          >
        </nav>

        <h1 class="search-page-title">
          {{if .query}}关于“{{.query}}”的搜索结果{{else}}全站搜索{{end}}
        </h1>

        {{if not .query}}
        <section class="mobile-search-landing" data-mobile-search-landing aria-label="全站搜索">
          <form class="mobile-search-form" action="/search/" method="get" role="search">
            <input
              class="mobile-search-input"
              type="search"
              name="q"
              placeholder="输入你想搜索的关键词.."
              autocomplete="off"
              aria-label="输入搜索关键词"
            />
            <button class="mobile-search-submit" type="submit">搜索</button>
          </form>

          <section class="mobile-search-section mobile-search-history" data-mobile-search-history hidden>
            <div class="mobile-search-heading">
              <h2>搜索记录</h2>
              <button type="button" data-mobile-search-history-clear>清除</button>
            </div>
            <div class="mobile-search-history-list" data-mobile-search-history-list></div>
          </section>

          <div class="mobile-search-divider" data-mobile-search-divider="history" hidden></div>

          <section class="mobile-search-section mobile-search-hot" data-mobile-search-hot hidden>
            <div class="mobile-search-heading"><h2>热搜榜</h2></div>
            <div class="mobile-search-hot-list" data-mobile-search-hot-list aria-live="polite"></div>
          </section>

          <div class="mobile-search-divider" data-mobile-search-divider="hot" hidden></div>

          <section class="mobile-search-section mobile-search-guess" data-mobile-search-guess hidden>
            <div class="mobile-search-heading">
              <h2>猜你喜欢</h2>
              <button type="button" data-mobile-search-guess-change>换一换</button>
            </div>
            <div class="mobile-search-guess-list" data-mobile-search-guess-list aria-live="polite"></div>
          </section>
        </section>
        {{end}}

        <div class="search-results">
          <section class="search-summary" aria-labelledby="searchResultTitle">
            <h2 class="search-summary-title" id="searchResultTitle">
              为您找到关于“<span>{{if .query}}{{.query}}{{else}}关键词{{end}}</span>”的短剧
            </h2>
            <p class="search-summary-description">
              为你整理与“{{if .query}}{{.query}}{{else}}关键词{{end}}”相关的视频内容，汇集站内相关作品、热门内容及最新更新。通过搜索结果可以快速浏览与“{{if .query}}{{.query}}{{else}}关键词{{end}}”相关的视频和作品，发现更多符合兴趣的内容。
            </p>
            <p class="search-summary-count">
              共 <span>{{if .totalCount}}{{.totalCount}}{{else}}0{{end}}</span> 个结果
            </p>
          </section>

          <div class="card-grid search-grid">
            {{range $i, $item := .list}}
            <a
              class="poster-card search-card"
              href="{{detailURL $item.Slug $item.ID}}"
              data-search-item="{{$item.ID}}"
              data-search-item-type-key="playlet"
              data-search-item-type-name="短剧"
              data-search-position="{{add $i 1}}"
              data-search-keyword="{{$.query}}"
            >
              <div class="poster-cover">
                <img
                  src="/static/images/placeholder.png?v=2"
                  class="poster-cover-img lazy"
                  data-src="{{coverURL $item.Cover $item.Banner}}"
                  alt="{{$item.Title}}"
                  title="{{$item.Title}}"
                />
                {{template "posterCornerBadges" $item}} {{template
                "posterLikeBadge" $item}} {{with episodeLabel $item.TotalEpisode}}
                <div class="episode-badge">
                  <div class="text-white-xs">{{.}}</div>
                </div>
                {{end}}
              </div>
              <div class="poster-card-body">
                <div class="poster-card-title">{{$item.Title}}</div>
                {{if $item.Desc}}
                <div class="poster-card-subtitle">{{$item.Desc}}</div>
                {{end}}
                <div class="poster-card-meta">
                  {{template "posterCardTag" $item}}
                  <div class="poster-card-spacer"></div>
                  <div class="poster-card-heat">
                    {{formatHeat $item.HeatValue}}
                  </div>
                </div>
              </div>
            </a>
            {{else}} {{template "empty" .}} {{end}}
          </div>

          {{template "pagination" .}}
        </div>
      </div>
    </main>
    {{template "footer" .}}
    <script defer src="/static/js/pages/mobileSearch.js?v=2"></script>
  </body>
</html>