在博客中优雅地添加 Bilibili 追番页面 (Astro & Hugo 无 CORS 秒开方案)

---
// src/components/about/BilibiliBangumi.astro
const uid = "3546871211494149"; // 替換為你的 B 站 UID
const api = `https://api.bilibili.com/x/space/bangumi/follow/list?type=1&follow_status=0&pn=1&ps=15&vmid=${uid}`;

let bangumis = [];
let errorMsg = null;

// 使用 AbortController 設置超時，防止 B 站 API 響應慢拖垮打包或加載速度
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 2500);

try {
  const response = await fetch(api, {
    headers: {
      // 必須偽裝 User-Agent，否則可能被 B 站攔截
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
    },
    signal: controller.signal
  });
  const resData = await response.json();
  if (resData.code === 0 && resData.data && resData.data.list) {
    bangumis = resData.data.list;
  } else {
    errorMsg = `獲取失敗: Code ${resData.code}`;
  }
} catch (e: any) {
  errorMsg = e.name === 'AbortError' ? '請求超時 (Timeout)' : e.message;
} finally {
  clearTimeout(timeoutId);
}
---

<div class="mt-4 my-6 not-prose">
  {errorMsg ? (
    <div class="p-8 border rounded-xl text-center">無法加載追番數據 ({errorMsg})</div>
  ) : bangumis.length > 0 ? (
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      {bangumis.map((b: any) => (
        <a href={b.url} target="_blank" rel="noopener noreferrer" class="group relative block overflow-hidden rounded-xl bg-muted transition-transform hover:-translate-y-1">
          <div class="aspect-[3/4] overflow-hidden">
            <!-- 核心細節：將 http 替換為 https 防止 Mixed Content 警告 -->
            <img src={b.cover.replace('http://', 'https://')} alt={b.title} class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy" referrerpolicy="no-referrer" />
          </div>
          <div class="absolute inset-x-0 bottom-0 flex flex-col justify-end bg-gradient-to-t from-black/90 to-transparent p-3 pt-8 opacity-90 transition-opacity group-hover:opacity-100">
            <h3 class="text-xs font-bold text-white line-clamp-2">{b.title}</h3>
            <p class="text-[10px] text-zinc-300">{b.new_ep?.index_show || '未知內容'}</p>
          </div>
        </a>
      ))}
    </div>
  ) : (
    <div class="p-8 border rounded-xl text-center">暫無追番記錄</div>
  )}
</div>

{{ $vmid := "3546871211494149" }}
{{ $url := printf "https://api.bilibili.com/x/space/bangumi/follow/list?type=1&follow_status=0&pn=1&ps=15&vmid=%s" $vmid }}
<!-- 偽裝請求頭 -->
{{ $opts := dict "headers" (dict "User-Agent" "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" "Referer" "https://space.bilibili.com/") }}

{{ $biliData := dict }}
{{ $err := false }}

<!-- 使用最新 Hugo 支援的 try 函數抓取 JSON -->
{{ $res := try (resources.GetRemote $url $opts) }}
{{ if or $res.Err (not $res.Value) }}
    {{ $err = true }}
{{ else }}
    {{ $biliData = $res.Value.Content | unmarshal }}
{{ end }}

<div class="bili-grid">
    {{ if or $err (not $biliData.data) (not $biliData.data.list) }}
        <p>無法在服務端獲取到追番數據。</p>
    {{ else }}
        {{ range first 15 $biliData.data.list }}
            <!-- HTML 卡片渲染 -->
            {{ $coverUrl := replace .cover "http://" "https://" }}
            <a href="{{ .url }}" target="_blank" class="bili-card">
                <img src="{{ $coverUrl }}" alt="{{ .title }}" loading="lazy" referrerpolicy="no-referrer">
                <h3>{{ .title }}</h3>
            </a>
        {{ end }}
    {{ end }}
</div>