web_huangguo2_h5/app/template/pages/search.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{.metaTitle}}</title>
  {{template "seoCommon" .}}
  <link rel="stylesheet" href="/static/css/base.css?v=2">
  <link rel="stylesheet" href="/static/css/search.css?v=12">
</head>
<body class="search-page">
  {{template "header" .}}
  <header class="search-h5-header" aria-label="搜索顶栏">
    <a class="search-h5-header__back" href="javascript:history.back()" aria-label="返回">
      <img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-left.svg" alt="返回">
    </a>
    <form class="search-h5-header__form" action="/search" method="get" role="search" data-path-search>
      <img decoding="async" loading="lazy" class="search-h5-header__search-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/search.svg" alt="搜索">
      <input class="search-h5-header__input" type="search" value="{{.query}}" placeholder="搜索剧名 / 演员 / 标签" aria-label="搜索剧名、演员或标签" autocomplete="off" data-search-h5-input>
      <button class="search-h5-header__clear" type="button" aria-label="清除搜索词" data-search-h5-clear{{if not .query}} hidden{{end}}>
        <img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
      </button>
    </form>
    <a class="search-h5-header__cancel" href="/">取消</a>
  </header>
  <h1 class="visually-hidden">搜索“{{.query}}”</h1>
  <main class="search-main" data-search-results data-search-keyword="{{.query}}" data-search-result-count="{{.resultCount}}" data-search-page="{{.pageNum}}" data-search-page-size="{{.pageSize}}">
    {{if .hasResults}}
      <section class="search-heading">
        <div class="search-heading__intro">
          <p class="search-heading__kicker"><span></span>搜索</p>
          <h2>“{{.query}}”</h2>
          <p class="search-heading__description">找到 <span data-result-count>{{.resultCount}}</span> 部相关作品</p>
        </div>
      </section>
      <section class="search-results" aria-label="搜索结果">
        <p class="search-results__mobile-count">找到 <span data-result-count>{{.resultCount}}</span> 部相关作品</p>
        <div class="search-card-grid" data-search-grid>
          {{range .works}}{{template "searchCard" .}}{{end}}
        </div>
        {{template "pagination" .}}
      </section>
    {{else}}
      <section class="search-heading search-heading--empty">
        <div class="search-heading__intro">
          <p class="search-heading__kicker"><span></span>搜索</p>
          <h2>“{{.query}}”</h2>
          <p class="search-heading__description">没有找到相关作品，试试更短的关键词或从热门推荐里挑一部</p>
        </div>
      </section>
      <section class="search-empty" aria-label="没有搜索结果">
        <div class="search-empty__icon"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/search.svg" alt="搜索"></div>
        <h2>没有找到相关作品</h2>
        <p>换个关键词试试，或按题材浏览全部短剧</p>
        <a class="btn btn--primary" href="/list">浏览全部短剧</a>
      </section>
      {{if .recommended}}
      <section class="search-recommendations" aria-label="热门推荐">
        <div class="search-recommendations__heading">
          <h2>大家都在看</h2>
          <a href="/list"><span class="search-recommendations__more-label search-recommendations__more-label--pc">查看全部</span><span class="search-recommendations__more-label search-recommendations__more-label--h5">全部</span><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项"></a>
        </div>
        <div class="search-card-grid">
          {{range .recommended}}{{template "searchCard" .}}{{end}}
        </div>
      </section>
      {{end}}
    {{end}}
  </main>
  {{template "footer" .}}
  <script>
    (function () {
      var input = document.querySelector("[data-search-h5-input]");
      var clear = document.querySelector("[data-search-h5-clear]");
      if (!input || !clear) return;
      function sync() {
        clear.hidden = !String(input.value || "").trim();
      }
      input.addEventListener("input", sync);
      clear.addEventListener("click", function () {
        input.value = "";
        sync();
        input.focus();
      });
    })();
  </script>
</body>
</html>

{{define "searchCard"}}
<article class="search-card" data-search-item-id="{{.ID}}">
  <a class="search-card__cover" href="{{playURL .Slug .ID}}" aria-label="{{playletDisplayName .PlayName .Title}}" data-search-result-click>
    <img decoding="async" loading="lazy" class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{.Cover}}" alt="{{playletDisplayName .PlayName .Title}}">
    <span class="search-card__scrim"></span>
    {{if eq .UpdateStatus 1}}
    <span class="search-card__episodes">连载中</span>
    {{else if .TotalEpisode}}
    <span class="search-card__episodes">全 {{.TotalEpisode}} 集</span>
    {{else}}
    <span class="search-card__episodes">{{updateStatusText .UpdateStatus}}</span>
    {{end}}
    {{if .IsFeatured}}
    <span class="search-card__badge">爆剧</span>
    {{else if eq .Anchor "原创"}}
    <span class="search-card__badge search-card__badge--original">原创</span>
    {{end}}
  </a>
  <h3 class="search-card__title"><a href="{{playURL .Slug .ID}}" data-search-result-click>{{playletDisplayName .PlayName .Title}}</a></h3>
  <p class="search-card__meta">{{range $ti, $tag := cardTags .}}{{if $ti}}  {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}</p>
</article>
{{end}}