designer_hhh_com/themes/hugo-bootstrap-5/layouts/partials/news-tab.html

{{ $p := slice }}
{{ range site.Taxonomies.categories }}
{{ $p = $p | append .Page }}
{{ end }}

<div class="d-flex align-items-center position-relative tab-category mt-5 pt-5 pb-3">
  <section class="w-100">
    <h3 class="post-block-title">
      <span>推薦主題</span>
    </h3>
  </section>

  {{ $p := slice }}
  {{ range site.Taxonomies.categories }}
  {{ $p = $p | append .Page }}
  {{ end }}

  <ul class="nav nav-pills mb-3 ps-3 position-absolute" id="pills-tab" role="tablist"
    style="right: 0; background: #fff;">
    {{ range $index, $element := first 5 $p }}
    <li class="nav-item" role="presentation">
      <button class="nav-link {{ if (eq $index 0) }}active{{ end }}" id="pills-home-tab-{{$index}}"
        data-bs-toggle="pill" data-bs-target="#pills-home-{{$index}}" type="button" role="tab"
        aria-controls="pills-home-{{$index}}" aria-selected="true">{{ .LinkTitle }}</button>
    </li>
    {{ end }}
  </ul>
</div>

<div class="tab-content" id="pills-tabContent">

  {{ range $index, $element := first 6 $p }}

  <div class="tab-pane fade show {{ if (eq $index 0) }}active{{ end }}" id="pills-home-{{$index}}" role="tabpanel"
    aria-labelledby="pills-home-tab">

    <div class="row">

      {{ $t := slice .LinkTitle }}
      {{ range $index, $element := where .Site.Pages ".Params.categories" "intersect" $t }}

      {{ if or (eq $index 0) (eq $index 1) }}
      <div class="col-12 col-lg-6 mt-3">
        <div class="bg-img"
          style="background-image: linear-gradient(to bottom,rgba(0,0,0, 0) 50%, rgba(0,0,0, 100)),url('{{ .Params.image | relURL }}');"
          onclick="location.href='{{ .Permalink }}'">
          <section>
            {{ range (.GetTerms "categories") }}
            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
            {{ end }}
            <small>{{ .Date | time.Format ":date_long" }}</small>
            <h2 class="post-title">
              <a href="{{ .Permalink }}">{{ .Params.title }}</a>
            </h2>
          </section>
        </div>
      </div>
      {{ else if or (eq $index 2) (eq $index 3) (eq $index 4) (eq $index 5) }}
      <div class="col-12 col-lg-6 mt-3">
        <div class="row">
          <div class="col-5">
            <a href="{{ .Permalink }}">
              <img src="{{ .Params.image | relURL }}" alt="" class="news-thumbnail">
            </a>
          </div>
          <div class="col-7 border-bottom">
            <section class="news-info">
              {{ range (.GetTerms "categories") }}
              <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
              {{ end }}
              <small>{{ .Date | time.Format ":date_long" }}</small>
            </section>
            <h2 class="post-title">
              <a href="{{ .Permalink }}">{{ .Params.title }}</a>
            </h2>
            <p class="post-depiction">
              <a href="{{ .Permalink }}">{{ .Summary }}</a>
            </p>
          </div>
        </div>
      </div>
      {{ end }}
      {{ end }}
    </div>
  </div>
  {{ end }}
</div>