news_aimedium_org/themes/hugo-bootstrap-5/layouts/partials/news-main.html

<div class="news-main container">
  <div class="row">
    {{ $pages := first 5 (sort .Site.RegularPages "Date" "desc") }}

    <!-- index 0 & 1 -->
    <div class="col-lg-5">
      {{ range $index, $page := first 2 $pages }}
      <div class="border rounded overflow-hidden position-relative mb-3 left-content">
        <a href="{{ $page.Permalink }}">
          <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid main-img">
        </a>
        <div class="p-3 title-info">
          {{ range ($page.GetTerms "categories") }}
          <a href="{{ .Permalink }}" class="me-2 badge-link">{{ .Params.title }}</a>
          {{ end }}

          <h2>
            <a href="{{ $page.Permalink }}">{{ $page.Params.title }}</a>
          </h2>

          <small class="d-block">{{ $page.Date | time.Format ":date_long" }}</small>
        </div>
      </div>
      {{ end }}
    </div>

    <!-- 右側 -->
    <div class="col-lg-5">
      {{ range $index, $page := $pages }}
      {{ if eq $index 2 }}
      <!-- index 2 -->
      <div class="d-flex mb-3 border rounded overflow-hidden position-relative right-content">
        <a href="{{ $page.Permalink }}" class="w-100">
          <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid main-img">
        </a>
        <div class="p-3 title-info">
          {{ range ($page.GetTerms "categories") }}
          <a href="{{ .Permalink }}" class="me-2 badge-link">{{ .LinkTitle }}</a>
          {{ end }}

          <h2>
            <a href="{{ $page.Permalink }}">{{ $page.Params.title }}</a>
          </h2>

          <small class="d-block">{{ $page.Date | time.Format ":date_long" }}</small>
        </div>
      </div>
      {{ end }}

      {{ if eq $index 3 }}
      <!-- index 3 & 4 -->
      <div class="row g-3">
        {{ end }}

        {{ if or (eq $index 3) (eq $index 4) }}
        <div class="col-sm-6">
          <div class="border rounded overflow-hidden position-relative bottom-content">
            <a href="{{ $page.Permalink }}">
              <img src="{{ $page.Params.image | relURL }}" alt="{{ $page.Params.title }}" class="img-fluid">
            </a>
            <div class="p-3 title-info">
              <h2>
                <a href="{{ $page.Permalink }}">{{ $page.Params.title }}</a>
              </h2>
              <small class="td-block">{{ $page.Date | time.Format ":date_long" }}</small>
            </div>
          </div>
        </div>
        {{ end }}

        {{ if eq $index 4 }}
      </div>
      {{ end }}
      {{ end }}
    </div>

    <!-- 影片 -->
    <div class="col-lg-2 d-none d-lg-block">
      <div class="news-video">
        <h3 class="post-block-title">
          <span>Video News</span>
        </h3>
        {{ range first 4 (sort (where .Site.RegularPages "Params.type" "video") "Date" "desc") }}
        <div class="row align-items-center mb-2">
          <div class="col-12">
            <a href="{{ .Permalink }}">
              <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
            </a>

            <h2 class="mt-2 mb-1 post-title">
              <a href="{{ .Params.url }}">{{ .Params.title }}</a>
            </h2>

            <!-- <section class="mt-0 news-info">
              {{ range (.GetTerms "categories") }}
              <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
              {{ end }}
              <br>
              <small>{{ .Date | time.Format ":date_long" }}</small>
            </section> -->
          </div>

          <!-- <div class="col-12 ps-0">
            <section class="mt-0 news-info">
              {{ range (.GetTerms "categories") }}
              <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
              {{ end }}
              <small>{{ .Date | time.Format ":date_long" }}</small>
            </section>
            <h2 class="mt-1 post-title">
              <a href="{{ .Params.url }}">{{ .Params.title }}</a>
            </h2>
          </div> -->
        </div>

        {{ end }}
      </div>
    </div>

    <!-- 影片輪播 -->
    <!-- <div class="col-lg-2">
      <div class="news-video">
        <h3 class="post-block-title">
          <span>Video News</span>
        </h3>

        <div class="swiper video-swiper">
          <div class="swiper-wrapper">
            {{ range (where .Site.Pages "Params.type" "video") }}
            <div class="swiper-slide">
              <a href="{{ .Permalink }}">
                <img class="img-fluid cover-img" src="{{ .Params.image | relURL }}" alt="" />
              </a>

              <h2 class="mt-2 mb-1 post-title">
                <a href="{{ .Params.url }}">{{ .Params.title }}</a>
              </h2>

              <section class="mt-0 news-info">
                {{ range (.GetTerms "categories") }}
                <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
                {{ end }}
                <br>
                <small>{{ .Date | time.Format ":date_long" }}</small>
              </section>
            </div>
            {{ end }}
          </div>

          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </div> -->
  </div>
</div>

<!-- <div class="news-main mt-3 mt-lg-0">
  {{ range first 2 (where .Site.Pages "Params.type" "main") }}
  <div class="col-12 mb-3 d-flex flex-column-reverse flex-lg-column">
    <div>
      <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 my-0 my-lg-3">
        <a href="{{ .Params.url }}">{{ .Params.title }}</a>
      </h2>
    </div>
    <a href="{{ .Permalink }}">
      <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
    </a>
  </div>
  {{ end }}
</div> -->