[Hugo] おすすめ記事を動的に表示！フェードイン＋グリッド展開で洗練されたトップページに

{{ $max := 6 }}
{{ $recommended := where .Site.RegularPages "Params.recommend" true | first $max }}

{{/* すべての注目記事のBaseFileNameを取得 */}}
{{ $highlighted := $.Site.Params.homeInfoParams.featured.items }}

{{/* featured記事の抽出とリンク記録 */}}
{{ $featured := first 3 (where (where .Site.RegularPages "Weight" "lt" 10) "File.BaseFileName" "not in" $highlighted)}}

{{ $featuredLinks := slice }}

{{ range $featured }}
  {{ $featuredLinks = $featuredLinks | append .RelPermalink }}
{{ end }}

<!-- おすすめ記事 -->
<div class="section-block section-block--recommended">
  <h2 class="section-heading section-heading--recommended">おすすめ記事</h2>
  <section class="post-grid">
    {{ range $featured }}
      {{ partial "post-card.html" . }}
    {{ end }}
  </section>
</div>

{{/* 表示件数をここで定義 */}}
{{ $maxRecommended := 6 }}

{{/* すべての注目記事のBaseFileNameを取得 */}}
{{ $highlighted := $.Site.Params.homeInfoParams.featured.items }}

{{/* 注目記事以外かつ Weight < 10 の記事を、おすすめ記事として取得 */}}
{{ $featured := first $maxRecommended (where (where .Site.RegularPages "Weight" "lt" 10) "File.BaseFileName" "not in" $highlighted) }}

{{ $featuredLinks := slice }}
{{ range $featured }}
  {{ $featuredLinks = $featuredLinks | append .RelPermalink }}
{{ end }}

<!-- ✅ おすすめ記事 -->
{{ if gt (len $featured) 0 }}
<div class="section-block section-block--recommended">
  <h2 class="section-heading section-heading--recommended">おすすめ記事</h2>
  <section class="post-grid recommend-grid">
    {{ range $featured }}
      {{ partial "post-card.html" . }}
    {{ end }}
  </section>
</div>
{{ end }}

.recommend-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}
.recommend-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* グリッドレイアウト */
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* おすすめ記事カードの初期スタイル */
.recommend-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* フェードイン状態 */
.recommend-card.visible {
  opacity: 1;
  transform: translateY(0);
}

<section class="post-grid recommend-grid">
  {{ range $featured }}
    <div class="recommend-card">
      {{ partial "post-card.html" . }}
    </div>
  {{ end }}
</section>

.recommend-card {
  opacity: 1 !important;
  transform: none !important;
}

document.addEventListener("DOMContentLoaded", () => {
  const cards = document.querySelectorAll(".recommend-card");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        observer.unobserve(entry.target);  // 一度だけ表示
      }
    });
  }, {
    threshold: 0.1
  });

  cards.forEach(card => observer.observe(card));
});

<script src="/js/recommend-observer.js" defer></script>

.section-block--recommended .post-card {
  width: 100%;
  height: 100%;
}

<section class="post-grid recommend-grid">
  {{ range $featured }}
    <div class="recommend-card">
      <article class="post-card recommend-only">
        {{ partial "post-card.html" . }}
      </article>
    </div>
  {{ end }}
</section>

.post-card.recommend-only {
  width: 100%;
}

content/
├─ posts/
├─ sample-ui/
│  ├─ _index.md  ← サンプル一覧ページ（optional）
│  ├─ fade-grid.md
│  ├─ carousel-horizontal.md
│  ├─ modal-popup.md

---
title: "フェードイン＋グリッドのUIサンプル"
date: 2025-06-16
description: "スクロールに応じてフェードインするカード型グリッドのUIサンプルです。"
draft: false
tags: [サンプル, UI, グリッド, Hugo]
categories: ["UIサンプル"]
---

---
title: "フェードイン＋グリッドのUIサンプル"
date: 2025-06-16
description: "Intersection ObserverとCSSアニメーションによるカードのフェード表示デモです。"
draft: false
tags: [サンプル, グリッド, アニメーション]
categories: ["UIサンプル"]
---

<section class="recommend-grid">
 {{ $samplePosts := first 6 .Site.RegularPages }}
 {{ range $samplePosts }}
   <div class="recommend-card">
     {{ partial "post-card.html" . }}
   </div>
 {{ end }}
</section>

my-blog/
├─ content/
│  └─ sample-ui/
│     └─ fade-grid.md      ✅ ← Markdown記事本体
├─ layouts/
│  └─ sample-ui/
│     └─ fade-grid.html    ✅ ← テンプレート（Goテンプレート構文OK）

---
title: "フェードイン＋グリッドのUIサンプル"
date: 2025-06-16
layout: fade-grid
---

{{ define "main" }}
<section class="recommend-grid">
  {{ $samplePosts := first 6 .Site.RegularPages }}
  {{ range $samplePosts }}
    <div class="recommend-card">
      {{ partial "post-card.html" . }}
    </div>
  {{ end }}
</section>
{{ end }}