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

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

    <!-- 左側：index 0, 1, 2 -->
    <div class="col-lg-4">
      {{ range $index, $page := first 3 $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>

    <!-- 右側：從 index 3 開始（3, 4, 5） -->
    <div class="col-lg-6">
      {{ range $index, $page := $pages }}
      {{ if eq $index 3 }}
      <!-- index 3：上方大卡片 -->
      <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 4 }}
      <!-- index 4 & 5：下方兩欄 -->
      <div class="row g-3">
        {{ end }}

        {{ if or (eq $index 4) (eq $index 5) }}
        <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 5 }}
      </div>
      {{ end }}
      {{ end }}
    </div>

    <!-- tags 生活 -->
    <div class="col-lg-2 d-none d-lg-block">
      <div class="local-video" id="local-news">
        <h3 class="post-block-title">
          <span>Local News</span>
        </h3>

        <!-- 收集前 6 則已經顯示過的文章（index 0~5） -->
        {{ $shownPermalinks := slice }}
        {{ range first 6 $pages }}
        {{ $shownPermalinks = $shownPermalinks | append .Permalink }}
        {{ end }}

        <!-- 先抓 tags 含「生活」的文章 -->
        {{ $lifeAll := where .Site.RegularPages "Params.tags" "intersect" (slice "生活") }}

        <!-- 排除掉前 6 則已顯示的文章 -->
        {{ $lifePages := where $lifeAll "Permalink" "not in" $shownPermalinks }}

        <!-- JS 處理隨機 -->
        {{ range first 12 $lifePages }}
        <div class="row align-items-center mb-2 local-item">
          <div class="col-12">
            <a href="{{ .Permalink }}">
              <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="{{ .Params.title }}" />
            </a>

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

      </div>
    </div>

    <!-- <div class="col-lg-2 d-none d-lg-block">
      <div class="local-video" id="local-news">
        <h3 class="post-block-title">
          <span>Local News</span>
        </h3>

        {{/* 抓 tags 含「生活」的文章 */}}
        {{ $lifePages := where .Site.RegularPages "Params.tags" "intersect" (slice "生活") }}

        {{/* 這裡先不要 shuffle，交給 JS 處理隨機 */}}

        {{ range first 12 $lifePages }}
        <div class="row align-items-center mb-2 local-item">
          <div class="col-12">
            <a href="{{ .Permalink }}">
              <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="{{ .Params.title }}" />
            </a>

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

      </div>
    </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>
        </div>
      </div>
      {{ end }}
    </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> -->

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const container = document.querySelector('#local-news');
    if (!container) return;

    const items = Array.from(container.querySelectorAll('.local-item'));
    if (items.length <= 4) {
      // 不足 4 則就全部顯示，不用隨機
      return;
    }

    // Fisher-Yates 洗牌
    for (let i = items.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [items[i], items[j]] = [items[j], items[i]];
    }

    // 先全部隱藏
    items.forEach(function (item) {
      item.style.display = 'none';
    });

    // 顯示隨機後的前 4 則
    items.slice(0, 4).forEach(function (item) {
      item.style.display = '';
    });
  });
</script>