前言#

对 Fuwari 的做了一些扩展，增加了 Bangumi 收藏展示页面，严格来说并不算对 Fuwari 的修改。

NOTE
本文方法适用于 Astro

Bangumi 收藏#

在开始之前，我想先简要的说明一下我的实现方式。博客的 Bangumi 数据为编译时获取的，一旦编译完成，不会根据读者的访问时间自动更新。在不引入额外的服务端的情况下，我只能想到这样的方案。

Bangumi API 参考：Bangumi API

首先根据 API 文档，找到用户收藏数据的接口及其返回的数据格式。创建src/types/bangumi.ts文件，定义 API 返回的数据类型。

1
export type UserSubjectCollectionResponse = {
2
  data: UserSubjectCollection[];
3
  total: number;
4
  limit: number;
5
  offset: number;
6
};
7

8
export type UserSubjectCollection = {
9
  subject_id: number; // 条目 ID
47 collapsed lines
10
  subject_type: SubjectType; // 条目类型
11
  rate: number; // 评分
12
  type: CollectionType; // 收藏类型
13
  comment?: string | null; // 评价
14
  tags: string[]; // 标签
15
  ep_status: number; // 章节进度
16
  vol_status: number; // 卷进度
17
  updated_at: string; // 更新时间（ISO 8601 格式）
18
  private: boolean; // 是否私有
19
  subject: SlimSubject; // 条目信息
20
};
21

22
// 1: 想看，2: 看过，3: 在看，4: 搁置，5: 抛弃
23
export type CollectionType = 1 | 2 | 3 | 4 | 5;
24

25
export type SlimSubject = {
26
  id: number; // ID
27
  type: SubjectType; // 类型
28
  name: string; // 名称
29
  name_cn: string; // 中文名
30
  short_summary: string; // 简介
31
  date?: string | null; // 日期 YYYY-MM-DD
32
  images: SubjectImages; // 图片
33
  volumes: number; // 卷数
34
  eps: number; // 集数
35
  collection_total: number; // 收藏人数
36
  score: number; // 评分
37
  rank: number; // 排名
38
  tags: SubjectTag[]; // 标签
39
};
40

41
// 1: 书籍，2: 动画，3: 音乐，4: 游戏，6: 三次元
42
export type SubjectType = 1 | 2 | 3 | 4 | 6;
43

44
export type SubjectTag = {
45
  name: string;
46
  count: number;
47
  total_cont: number;
48
};
49

50
export type SubjectImages = {
51
  large: string;
52
  common: string;
53
  medium: string;
54
  small: string;
55
  grid: string;
56
};

接下来创建页面组件，代码有点多，而且基本都是 UI 代码，就不详细说明了。

先创建文件夹 src\components\bangumi 用于存放页面需要用到的组件，然后创建以下组件：

Bangumi 内容区域

1
---
2
import type { UserSubjectCollection } from "@/types/bangumi";
3
import Card from "./Card.astro";
4
import FilterControls from "./FilterControls.astro";
5
import Pagination from "./Pagination.astro";
6

7
interface Props {
8
  sectionId: string;
9
  items: UserSubjectCollection[];
72 collapsed lines
10
  isActive: boolean;
11
  itemsPerPage?: number;
12
}
13

14
const { sectionId, items, isActive, itemsPerPage = 12 } = Astro.props;
15

16
// 状态映射
17
const statusMap = {
18
  1: "wish",
19
  2: "collect",
20
  3: "doing",
21
  4: "on_hold",
22
  5: "dropped",
23
};
24

25
// Get status filters with counts
26
const statusCounts = items.reduce(
27
  (acc, item) => {
28
    const status = statusMap[item.type as keyof typeof statusMap] || "unknown";
29
    acc[status] = (acc[status] || 0) + 1;
30
    return acc;
31
  },
32
  {} as Record<string, number>,
33
);
34

35
const filters = [
36
  { value: "all", label: "全部", count: items.length },
37
  { value: "collect", label: "看过", count: statusCounts.collect || 0 },
38
  { value: "doing", label: "在看", count: statusCounts.doing || 0 },
39
  { value: "wish", label: "想看", count: statusCounts.wish || 0 },
40
  { value: "on_hold", label: "搁置", count: statusCounts.on_hold || 0 },
41
  { value: "dropped", label: "抛弃", count: statusCounts.dropped || 0 },
42
].filter((filter) => filter.value === "all" || filter.count > 0);
43

44
const defaultFilter = "all"; // 默认显示全部，用户可以通过筛选器选择
45
---
46

47
<div class:list={["bangumi-section", { "hidden": !isActive }]} data-section={sectionId}>
48
  {items.length > 0 ? (
49
    <>
50
      <FilterControls
51
        filters={filters}
52
        activeFilter={defaultFilter}
53
        sectionId={sectionId}
54
      />
55

56
      <div class="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
57
        {items.map((item) => (
58
          <div
59
            class="bangumi-item"
60
            data-item-section={sectionId}
61
            data-item-status={statusMap[item.type as keyof typeof statusMap] || "unknown"}
62
          >
63
            <Card item={item} />
64
          </div>
65
        ))}
66
      </div>
67

68
      <Pagination
69
        totalItems={items.length}
70
        itemsPerPage={itemsPerPage}
71
        currentPage={1}
72
        sectionId={sectionId}
73
      />
74
    </>
75
  ) : (
76
    <div class="text-center py-12">
77
      <h3 class="text-xl font-medium text-gray-600 dark:text-gray-400 mb-2">暂无数据</h3>
78
      <p class="text-gray-500 dark:text-gray-500">该分类下还没有任何条目</p>
79
    </div>
80
  )}
81
</div>

条目卡片组件

1
---
2
import type { UserSubjectCollection } from "@/types/bangumi";
3

4
interface Props {
5
  item: UserSubjectCollection;
6
}
7

8
const { item } = Astro.props;
9

90 collapsed lines
10
const subject_base_url = "https://bgm.tv/subject/";
11

12
const getStatusColor = (type: number) => {
13
  switch (type) {
14
    case 1:
15
      return "bg-blue-500";
16
    case 2:
17
      return "bg-green-500";
18
    case 3:
19
      return "bg-yellow-500";
20
    case 4:
21
      return "bg-orange-500";
22
    case 5:
23
      return "bg-red-500";
24
    default:
25
      return "bg-gray-500";
26
  }
27
};
28

29
const getStatusText = (type: number) => {
30
  switch (type) {
31
    case 1:
32
      return "想看";
33
    case 2:
34
      return "看过";
35
    case 3:
36
      return "在看";
37
    case 4:
38
      return "搁置";
39
    case 5:
40
      return "抛弃";
41
    default:
42
      return "未知";
43
  }
44
};
45
---
46

47
<a
48
  href={`${subject_base_url}${item.subject.id}`}
49
  target="_blank"
50
  rel="noopener noreferrer nofollow"
51
  class="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-2xl transition-all duration-200 hover:scale-105 block"
52
>
53
  <div class="aspect-[2/3] relative overflow-hidden" >
54
    {item.subject?.images?.medium ? (
55
      <img
56
        src={item.subject.images.medium}
57
        alt={item.subject.name_cn || item.subject.name}
58
        class="w-full h-full object-cover pointer-events-none"
59
        loading="lazy"
60
      />
61
    ) : (
62
      <div class="w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
63
        <div class="text-gray-400 text-4xl">📖</div>
64
      </div>
65
    )}
66

67
    <!-- Status badge -->
68
    <div class={`absolute top-2 left-2 px-2 py-1 rounded-full text-xs text-white font-medium ${getStatusColor(item.type)}`}>
69
      {getStatusText(item.type)}
70
    </div>
71
  </div>
72

73
  <!-- Info overlay on hover -->
74
  <div class="absolute inset-x-0 bottom-0 bg-black/80 text-white p-4 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
75
    <h3 class="font-bold text-sm mb-1 line-clamp-2">
76
      {item.subject.name_cn || item.subject.name}
77
    </h3>
78

79
    {(item.subject.score || item.comment) && (
80
      <div class="flex items-center justify-between mb-2">
81
        {item.subject.score && (
82
          <div class="flex items-center gap-1">
83
            <div class="text-yellow-400">⭐</div>
84
            <span class="text-sm">{item.subject.score}</span>
85
          </div>
86
        )}
87

88
        {item.comment && (
89
          <div class="relative group/comment">
90
            <div class="text-sm text-gray-300 cursor-help">💬</div>
91
            <div class="absolute bottom-full right-0 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover/comment:opacity-100 transition-opacity duration-150 w-32 sm:w-44 xl:w-52 z-10 pointer-events-none">
92
              {item.comment}
93
            </div>
94
          </div>
95
        )}
96
      </div>
97
    )}
98
  </div>
99
</a>

状态筛选组件

1
---
2
interface Filter {
3
  value: string;
4
  label: string;
5
  count?: number;
6
}
7

8
interface Props {
9
  filters: Filter[];
88 collapsed lines
10
  activeFilter: string;
11
  sectionId: string;
12
}
13

14
const { filters, activeFilter, sectionId } = Astro.props;
15
---
16

17
<div class="flex flex-wrap gap-1.5 mb-4">
18
  {filters.map((filter) => (
19
    <button
20
      class:list={[
21
        "px-3 py-1 rounded-full text-xs font-medium transition-all duration-200",
22
        {
23
          "bg-[var(--primary)] text-white shadow-md": filter.value === activeFilter,
24
          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600": filter.value !== activeFilter
25
        }
26
      ]}
27
      data-filter={filter.value}
28
      data-section={sectionId}
29
      type="button"
30
    >
31
      {filter.label}
32
      {filter.count !== undefined && (
33
        <span class="ml-1">({filter.count})</span>
34
      )}
35
    </button>
36
  ))}
37
</div>
38

39
<script is:inline define:vars={{ sectionId }}>
40
  function initFilterControls() {
41
    const filterButtons = document.querySelectorAll(`[data-section="${sectionId}"][data-filter]`);
42

43
    filterButtons.forEach(button => {
44
      button.addEventListener('click', function() {
45
        const filter = this.dataset.filter;
46
        const currentSectionId = this.dataset.section;
47

48
        // Update active filter button for this section
49
        const sectionButtons = document.querySelectorAll(`[data-section="${currentSectionId}"][data-filter]`);
50
        sectionButtons.forEach(btn => {
51
          btn.classList.remove('bg-[var(--primary)]', 'text-white', 'shadow-md');
52
          btn.classList.add('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200', 'dark:bg-gray-700', 'dark:text-gray-300', 'dark:hover:bg-gray-600');
53
        });
54

55
        this.classList.remove('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200', 'dark:bg-gray-700', 'dark:text-gray-300', 'dark:hover:bg-gray-600');
56
        this.classList.add('bg-[var(--primary)]', 'text-white', 'shadow-md');
57

58
        // Filter items
59
        const items = document.querySelectorAll(`[data-item-section="${currentSectionId}"]`);
60
        items.forEach(item => {
61
          const itemStatus = item.dataset.itemStatus;
62

63
          if (filter === 'all' || itemStatus === filter) {
64
            item.classList.remove('hidden');
65
            item.style.display = 'block';
66
          } else {
67
            item.classList.add('hidden');
68
            item.style.display = 'none';
69
          }
70
        });
71

72
        // Update pagination
73
        updatePagination(currentSectionId);
74
      });
75
    });
76
  }
77

78
  function updatePagination(sectionId) {
79
    const visibleItems = document.querySelectorAll(`[data-item-section="${sectionId}"]:not(.hidden)`);
80
    const pagination = document.querySelector(`[data-pagination-section="${sectionId}"]`);
81

82
    if (pagination) {
83
      // Trigger pagination update
84
      const event = new CustomEvent('updatePagination', {
85
        detail: { visibleCount: visibleItems.length }
86
      });
87
      pagination.dispatchEvent(event);
88
    }
89
  }
90

91
  // Initialize when DOM is ready
92
  if (document.readyState === 'loading') {
93
    document.addEventListener('DOMContentLoaded', initFilterControls);
94
  } else {
95
    initFilterControls();
96
  }
97
</script>

分页控制组件

1
---
2
import { Icon } from "astro-icon/components";
3

4
interface Props {
5
  totalItems: number;
6
  itemsPerPage: number;
7
  currentPage: number;
8
  sectionId: string;
9
}
395 collapsed lines
10

11
const { totalItems, itemsPerPage, currentPage, sectionId } = Astro.props;
12
const totalPages = Math.ceil(totalItems / itemsPerPage);
13

14
// 生成智能分页页码数组
15
function generatePageNumbers(current: number, total: number) {
16
  const delta = 2; // 当前页左右显示的页码数量
17
  const range = [];
18
  const rangeWithDots = [];
19

20
  // 如果总页数小于等于7，显示所有页码
21
  if (total <= 7) {
22
    for (let i = 1; i <= total; i++) {
23
      range.push(i);
24
    }
25
    return range;
26
  }
27

28
  // 计算显示范围
29
  const left = Math.max(2, current - delta);
30
  const right = Math.min(total - 1, current + delta);
31

32
  // 始终显示第一页
33
  rangeWithDots.push(1);
34

35
  // 如果左边界大于2，添加省略号
36
  if (left > 2) {
37
    rangeWithDots.push("...");
38
  }
39

40
  // 添加中间页码
41
  for (let i = left; i <= right; i++) {
42
    rangeWithDots.push(i);
43
  }
44

45
  // 如果右边界小于最后一页-1，添加省略号
46
  if (right < total - 1) {
47
    rangeWithDots.push("...");
48
  }
49

50
  // 始终显示最后一页（如果总页数大于1）
51
  if (total > 1) {
52
    rangeWithDots.push(total);
53
  }
54

55
  return rangeWithDots;
56
}
57

58
const pageNumbers = generatePageNumbers(currentPage, totalPages);
59
---
60

61
{totalPages > 1 && (
62
  <div class="responsive-pagination flex justify-center items-center mt-8" data-pagination-section={sectionId}>
63
    <!-- 移动端简化版分页 -->
64
    <div class="mobile-pagination items-center space-x-2">
65
      <button
66
        type="button"
67
        class="p-1.5 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200"
68
        data-page="prev"
69
        data-section={sectionId}
70
        disabled={currentPage === 1}
71
        aria-label="上一页"
72
      >
73
        <Icon name="material-symbols:chevron-left-rounded" class="text-base" />
74
      </button>
75

76
      <!-- 移动端页码信息 -->
77
      <div class="flex items-center space-x-1">
78
        <span class="text-sm text-gray-600 dark:text-gray-400">第</span>
79
        <span class="mobile-current-page px-2 py-1 text-sm font-medium bg-blue-500 text-white rounded">{currentPage}</span>
80
        <span class="text-sm text-gray-600 dark:text-gray-400">页，共</span>
81
        <span class="mobile-total-pages text-sm font-medium text-gray-700 dark:text-gray-300">{totalPages}</span>
82
        <span class="text-sm text-gray-600 dark:text-gray-400">页</span>
83
      </div>
84

85
      <button
86
        type="button"
87
        class="p-1.5 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200"
88
        data-page="next"
89
        data-section={sectionId}
90
        disabled={currentPage === totalPages}
91
        aria-label="下一页"
92
      >
93
        <Icon name="material-symbols:chevron-right-rounded" class="text-base" />
94
      </button>
95
    </div>
96

97
    <!-- 桌面端完整版分页 -->
98
    <div class="desktop-pagination items-center space-x-2">
99
      <button
100
        type="button"
101
        class="p-2 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
102
        data-page="prev"
103
        data-section={sectionId}
104
        disabled={currentPage === 1}
105
        aria-label="上一页"
106
      >
107
        <Icon name="material-symbols:chevron-left-rounded" class="text-lg" />
108
      </button>
109

110
      <div class="desktop-page-numbers flex flex-wrap justify-center space-x-1" data-page-numbers={sectionId}>
111
        {pageNumbers.map((pageItem) => (
112
          pageItem === '...' ? (
113
            <span class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400">...</span>
114
          ) : (
115
            <button
116
              type="button"
117
              class:list={[
118
                "px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200",
119
                {
120
                  "bg-blue-500 text-white shadow-md": pageItem === currentPage,
121
                  "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600": pageItem !== currentPage
122
                }
123
              ]}
124
              data-page={pageItem}
125
              data-section={sectionId}
126
              aria-label={`第${pageItem}页`}
127
              aria-current={pageItem === currentPage ? "page" : undefined}
128
            >
129
              {pageItem}
130
            </button>
131
          )
132
        ))}
133
      </div>
134

135
      <button
136
        type="button"
137
        class="p-2 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
138
        data-page="next"
139
        data-section={sectionId}
140
        disabled={currentPage === totalPages}
141
        aria-label="下一页"
142
      >
143
        <Icon name="material-symbols:chevron-right-rounded" class="text-lg" />
144
      </button>
145
    </div>
146
  </div>
147
)}
148

149
<script define:vars={{ itemsPerPage, sectionId }}>
150
  function initPagination() {
151
    let currentPage = 1;
152

153
    const pagination = document.querySelector(`[data-pagination-section="${sectionId}"]`);
154
    if (!pagination) return;
155

156
    // 更新移动端页码显示
157
    function updateMobileDisplay() {
158
      const mobileCurrentPage = pagination.querySelector('.mobile-current-page');
159
      if (mobileCurrentPage) {
160
        mobileCurrentPage.textContent = currentPage.toString();
161
      }
162
    }
163

164
    const pageButtons = pagination.querySelectorAll('[data-page]');
165

166
    pageButtons.forEach(button => {
167
      button.addEventListener('click', function() {
168
        const page = this.dataset.page;
169

170
        if (page === 'prev') {
171
          currentPage = Math.max(1, currentPage - 1);
172
        } else if (page === 'next') {
173
          const items = document.querySelectorAll(`[data-item-section="${sectionId}"]:not(.hidden)`);
174
          const totalPages = Math.ceil(items.length / itemsPerPage);
175
          currentPage = Math.min(totalPages, currentPage + 1);
176
        } else {
177
          currentPage = parseInt(page);
178
        }
179

180
        updatePage();
181
        updateMobileDisplay();
182
      });
183
    });
184

185
    // Listen for filter updates
186
    if (pagination) {
187
      pagination.addEventListener('updatePagination', function(event) {
188
        currentPage = 1;
189
        updatePage();
190
        updateMobileDisplay();
191
      });
192
    }
193

194
    function updatePage() {
195
      const items = document.querySelectorAll(`[data-item-section="${sectionId}"]:not(.hidden)`);
196
      const totalPages = Math.ceil(items.length / itemsPerPage);
197

198
      // Hide all items first
199
      for (const item of items) {
200
        item.style.display = 'none';
201
      }
202

203
      // Show items for current page
204
      const startIndex = (currentPage - 1) * itemsPerPage;
205
      const endIndex = startIndex + itemsPerPage;
206
      for (let i = startIndex; i < endIndex && i < items.length; i++) {
207
        items[i].style.display = 'block';
208
      }
209

210
      // Update pagination buttons
211
      updatePaginationButtons(totalPages);
212
    }
213

214
    // 生成智能分页页码数组的JavaScript版本
215
    function generatePageNumbers(current, total) {
216
      const delta = 2; // 当前页左右显示的页码数量
217
      const rangeWithDots = [];
218

219
      // 如果总页数小于等于7，显示所有页码
220
      if (total <= 7) {
221
        for (let i = 1; i <= total; i++) {
222
          rangeWithDots.push(i);
223
        }
224
        return rangeWithDots;
225
      }
226

227
      // 计算显示范围
228
      const left = Math.max(2, current - delta);
229
      const right = Math.min(total - 1, current + delta);
230

231
      // 始终显示第一页
232
      rangeWithDots.push(1);
233

234
      // 如果左边界大于2，添加省略号
235
      if (left > 2) {
236
        rangeWithDots.push('...');
237
      }
238

239
      // 添加中间页码
240
      for (let i = left; i <= right; i++) {
241
        rangeWithDots.push(i);
242
      }
243

244
      // 如果右边界小于最后一页-1，添加省略号
245
      if (right < total - 1) {
246
        rangeWithDots.push('...');
247
      }
248

249
      // 始终显示最后一页（如果总页数大于1）
250
      if (total > 1) {
251
        rangeWithDots.push(total);
252
      }
253

254
      return rangeWithDots;
255
    }
256

257
    function updatePaginationButtons(totalPages) {
258
      const prevButton = pagination.querySelector('[data-page="prev"]');
259
      const nextButton = pagination.querySelector('[data-page="next"]');
260
      const pageNumbersContainer = pagination.querySelector(`[data-page-numbers="${sectionId}"]`);
261

262
      if (prevButton) {
263
        prevButton.disabled = currentPage === 1;
264
      }
265

266
      if (nextButton) {
267
        nextButton.disabled = currentPage === totalPages;
268
      }
269

270
      if (pageNumbersContainer) {
271
        pageNumbersContainer.innerHTML = '';
272
        const pageNumbers = generatePageNumbers(currentPage, totalPages);
273

274
        pageNumbers.forEach(pageItem => {
275
          if (pageItem === '...') {
276
            const span = document.createElement('span');
277
            span.className = 'px-3 py-2 text-gray-500 dark:text-gray-400';
278
            span.textContent = '...';
279
            pageNumbersContainer.appendChild(span);
280
          } else {
281
            const button = document.createElement('button');
282
            button.className = `px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${
283
              pageItem === currentPage
284
                ? 'bg-blue-500 text-white'
285
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
286
            }`;
287
            button.dataset.page = pageItem.toString();
288
            button.dataset.section = sectionId;
289
            button.textContent = pageItem.toString();
290
            button.addEventListener('click', function() {
291
              currentPage = pageItem;
292
              updatePage();
293
            });
294
            pageNumbersContainer.appendChild(button);
295
          }
296
        });
297
      }
298
    }
299

300
    // Initial page setup
301
    updatePage();
302
  }
303

304
  // Initialize when DOM is ready
305
  if (document.readyState === 'loading') {
306
    document.addEventListener('DOMContentLoaded', initPagination);
307
  } else {
308
    initPagination();
309
  }
310
</script>
311

312
<style>
313
  .responsive-pagination {
314
    /* 确保在所有设备上都能正确显示 */
315
    max-width: 100%;
316
    overflow-x: auto;
317
    -webkit-overflow-scrolling: touch;
318
  }
319

320
  /* 移动端样式 (< 768px) */
321
  .mobile-pagination {
322
    display: flex;
323
    padding: 0 1rem;
324
  }
325

326
  .desktop-pagination {
327
    display: none;
328
  }
329

330
  /* 桌面端样式 (>= 768px) */
331
  @media (min-width: 768px) {
332
    .mobile-pagination {
333
      display: none;
334
    }
335

336
    .desktop-pagination {
337
      display: flex;
338
    }
339
  }
340

341
  /* 小屏手机优化 */
342
  @media (max-width: 640px) {
343
    .mobile-pagination {
344
      padding: 0 0.5rem;
345
    }
346
    .mobile-pagination button {
347
      padding: 0.25rem;
348
    }
349
  }
350

351
  /* 超小屏优化 */
352
  @media (max-width: 480px) {
353
    .mobile-pagination {
354
      padding: 0 0.25rem;
355
    }
356
    .mobile-pagination .space-x-1 > * + * {
357
      margin-left: 0.125rem;
358
    }
359
  }
360

361
  /* 平滑过渡效果 */
362
  .responsive-pagination button {
363
    transition: all 0.2s ease-in-out;
364
  }
365

366
  /* 高对比度模式支持 */
367
  @media (prefers-contrast: high) {
368
    .responsive-pagination button {
369
      border: 1px solid currentColor;
370
    }
371
  }
372

373
  /* 减少动画偏好支持 */
374
  @media (prefers-reduced-motion: reduce) {
375
    .responsive-pagination button {
376
      transition: none;
377
    }
378
  }
379

380
  /* 触摸设备优化 */
381
  @media (hover: none) and (pointer: coarse) {
382
    .responsive-pagination button {
383
      min-height: 44px; /* iOS建议的最小触摸目标 */
384
      min-width: 44px;
385
    }
386

387
    /* 移动端触摸优化 */
388
    .mobile-pagination button {
389
      min-height: 40px;
390
      min-width: 40px;
391
    }
392
  }
393

394
  /* 横屏手机优化 */
395
  @media (max-width: 768px) and (orientation: landscape) {
396
    .mobile-pagination {
397
      padding: 0 0.5rem;
398
    }
399

400
    .mobile-pagination button {
401
      padding: 0.25rem;
402
    }
403
  }
404
</style>

标签页导航组件

1
---
2
interface Tab {
3
  id: string;
4
  name: string;
5
  count?: number;
6
}
7

8
interface Props {
9
  tabs: Tab[];
70 collapsed lines
10
  activeTab: string;
11
}
12

13
const { tabs, activeTab } = Astro.props;
14
---
15

16
<div class="border-b border-gray-200 dark:border-gray-700 mb-3">
17
  <nav class="flex space-x-8" aria-label="Tabs">
18
    {tabs.map((tab) => (
19
      <button
20
        class:list={[
21
          "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200",
22
          {
23
            "border-[var(--primary)] text-[var(--primary)]": tab.id === activeTab,
24
            "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300": tab.id !== activeTab
25
          }
26
        ]}
27
        data-tab={tab.id}
28
        type="button"
29
      >
30
        {tab.name}
31
        {tab.count !== undefined && (
32
          <span class="ml-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-0.5 px-2 rounded-full text-xs">
33
            {tab.count}
34
          </span>
35
        )}
36
      </button>
37
    ))}
38
  </nav>
39
</div>
40

41
<script>
42
  function initTabNavigation() {
43
    const tabButtons = document.querySelectorAll('[data-tab]');
44
    const sections = document.querySelectorAll('[data-section]');
45

46
    tabButtons.forEach(button => {
47
      button.addEventListener('click', (event) => {
48
        const currentButton = event.currentTarget as HTMLButtonElement;
49
        const targetTab = currentButton.dataset.tab;
50

51
        // Update active tab
52
        tabButtons.forEach(btn => {
53
          btn.classList.remove('border-[var(--primary)]', 'text-[var(--primary)]');
54
          btn.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300', 'dark:text-gray-400', 'dark:hover:text-gray-300');
55
        });
56

57
        currentButton.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300', 'dark:text-gray-400', 'dark:hover:text-gray-300');
58
        currentButton.classList.add('border-[var(--primary)]', 'text-[var(--primary)]');
59

60
        // Show/hide sections
61
        sections.forEach(section => {
62
          const htmlSection = section as HTMLElement;
63
          if (htmlSection.dataset.section === targetTab) {
64
            htmlSection.classList.remove('hidden');
65
          } else {
66
            htmlSection.classList.add('hidden');
67
          }
68
        });
69
      });
70
    });
71
  }
72

73
  // Initialize when DOM is ready
74
  if (document.readyState === 'loading') {
75
    document.addEventListener('DOMContentLoaded', initTabNavigation);
76
  } else {
77
    initTabNavigation();
78
  }
79
</script>

接下来添加 Bangumi 页面文件，记得把 Bangumi 配置中的username修改为你自己的。如果你的博客编译环境无法正常访问 bangumi 的 api，可以修改apiUrl。categories请按需修改，如果你的收藏数据比较多，可以修改pagination.maxTotal 。

1
---
2
import BangumiSection from "@/components/bangumi/BangumiSection.astro";
3
import TabNav from "@/components/bangumi/TabNav.astro";
4
import MainGridLayout from "@/layouts/MainGridLayout.astro";
5
import type {
6
  UserSubjectCollection,
7
  UserSubjectCollectionResponse,
8
} from "@/types/bangumi";
9

189 collapsed lines
10
//////////////// Bangumi 配置 ////////////////////////
11
const bangumiConfig = {
12
  username: "114514", // 在这里配置你的Bangumi用户名
13
  apiUrl: "https://api.bgm.tv",
14
  categories: {
15
    book: false,
16
    anime: true,
17
    music: false,
18
    game: true,
19
    real: false,
20
  },
21
  // 数据获取设置
22
  pagination: {
23
    limit: 50, // 每页获取数量
24
    delay: 50, // 请求间隔毫秒数，避免频率限制
25
    maxTotal: 1000, // 最大获取总数，防止无限循环（0=无限制）
26
  },
27
};
28
////////////////////////////////////////////////////
29

30
// 分类映射
31
const categoryMap = {
32
  book: { id: "book", name: "书籍", subjectType: 1 },
33
  anime: { id: "anime", name: "动画", subjectType: 2 },
34
  music: { id: "music", name: "音乐", subjectType: 3 },
35
  game: { id: "game", name: "游戏", subjectType: 4 },
36
  real: { id: "real", name: "三次元", subjectType: 6 },
37
};
38

39
// 获取Bangumi数据的函数 - 支持分页获取所有数据
40
async function fetchBangumiData(username: string, subjectType: number) {
41
  try {
42
    const { limit, delay, maxTotal } = bangumiConfig.pagination;
43
    let offset = 0;
44
    let allData: UserSubjectCollection[] = [];
45
    let hasMore = true;
46

47
    console.log(
48
      `[Bangumi] 开始获取用户 ${username} 的 subjectType ${subjectType} 数据...`,
49
    );
50

51
    while (hasMore) {
52
      // 检查是否超过最大获取限制
53
      if (maxTotal > 0 && allData.length >= maxTotal) {
54
        console.log(`[Bangumi] 已达到最大获取限制 ${maxTotal}，停止获取`);
55
        break;
56
      }
57

58
      const url = `${bangumiConfig.apiUrl}/v0/users/${username}/collections?subject_type=${subjectType}&limit=${limit}&offset=${offset}`;
59

60
      console.log(`[Bangumi] 正在获取数据: ${url} (已获取: ${allData.length})`);
61

62
      const response = await fetch(url, {
63
        headers: {
64
          "User-Agent": "YuuOuRou Blog",
65
          Accept: "application/json",
66
        },
67
      });
68

69
      if (!response.ok) {
70
        console.warn(
71
          `[Bangumi] 无法获取数据 (状态码: ${response.status}):`,
72
          url,
73
        );
74
        break;
75
      }
76

77
      const data = (await response.json()) as UserSubjectCollectionResponse;
78
      const currentBatch = data.data || [];
79

80
      if (currentBatch.length > 0) {
81
        allData = allData.concat(currentBatch);
82
        offset += limit;
83

84
        // 如果本次获取的数据少于limit，说明已经是最后一页
85
        if (currentBatch.length < limit) {
86
          hasMore = false;
87
        }
88
      } else {
89
        hasMore = false;
90
      }
91

92
      // 添加延迟避免请求过于频繁
93
      if (hasMore) {
94
        await new Promise((resolve) => setTimeout(resolve, delay));
95
      }
96
    }
97

98
    console.log(`[Bangumi] 总共获取到 ${allData.length} 条数据`);
99
    return allData;
100
  } catch (error) {
101
    console.error("[Bangumi] 获取数据时出错:", error);
102
    return [];
103
  }
104
}
105

106
// 获取所有启用分类的数据
107
const bangumiData: Record<string, UserSubjectCollection[]> = {};
108
const tabs: Array<{ id: string; name: string; count: number }> = [];
109

110
console.log("[Bangumi] 🌐 从 API 获取数据");
111

112
for (const [categoryKey, enabled] of Object.entries(bangumiConfig.categories)) {
113
  if (enabled && categoryMap[categoryKey as keyof typeof categoryMap]) {
114
    const categoryInfo = categoryMap[categoryKey as keyof typeof categoryMap];
115
    try {
116
      const data = await fetchBangumiData(
117
        bangumiConfig.username,
118
        categoryInfo.subjectType,
119
      );
120
      bangumiData[categoryKey] = data;
121
      tabs.push({
122
        id: categoryKey,
123
        name: categoryInfo.name,
124
        count: data.length,
125
      });
126
    } catch (error) {
127
      console.error(`[Bangumi] 获取 ${categoryInfo.name} 数据失败:`, error);
128
      bangumiData[categoryKey] = [];
129
      tabs.push({
130
        id: categoryKey,
131
        name: categoryInfo.name,
132
        count: 0,
133
      });
134
    }
135
  }
136
}
137

138
const activeTab = tabs[0]?.id || "anime";
139
---
140

141
<MainGridLayout title={"Bangumi"} description={"Bangumi Collection"}>
142
  <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
143
    <div class="card-base z-10 px-9 py-6 relative w-full">
144
      <!-- 页面标题 -->
145
      <div class="text-center mb-8">
146
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-3">
147
          Bangumi Collection
148
        </h1>
149
        <p class="text-gray-600 dark:text-gray-400 mb-2">
150
          对魔女而言二次元是最好的消遣
151
        </p>
152
      </div>
153

154
      <!-- Tab 导航和内容 -->
155
      {tabs.length > 0 ? (
156
        <>
157
          <TabNav tabs={tabs} activeTab={activeTab} />
158

159
          <!-- 内容区域 -->
160
          {tabs.map((tab) => (
161
                      <BangumiSection
162
            sectionId={tab.id}
163
            items={bangumiData[tab.id] || []}
164
            isActive={tab.id === activeTab}
165
            itemsPerPage={6}
166
          />
167
          ))}
168
        </>
169
      ) : (
170
        <div class="text-center py-12">
171
          <h2 class="text-xl font-medium text-gray-600 dark:text-gray-400 mb-2">
172
            暂无数据
173
          </h2>
174
          <p class="text-gray-500 dark:text-gray-400 mb-4">
175
            可能的原因：用户名不存在、网络连接问题或API限制
176
          </p>
177
          <div class="text-sm text-gray-400 dark:text-gray-500 space-y-1">
178
            <div>用户名: {bangumiConfig.username}</div>
179
            <div>API: {bangumiConfig.apiUrl}</div>
180
            <div class="mt-3 text-xs">
181
              提示：请在页面配置中设置正确的Bangumi用户名
182
            </div>
183
          </div>
184
        </div>
185
      )}
186
    </div>
187
  </div>
188
</MainGridLayout>
189

190
<style>
191
  /* 自定义样式 */
192
  .line-clamp-2 {
193
    display: -webkit-box;
194
    -webkit-line-clamp: 2;
195
    -webkit-box-orient: vertical;
196
    overflow: hidden;
197
  }
198
</style>

最后在博客导航栏中添加 Bangumi 页面的链接即可。

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    // ...
4
    {
5
      name: "Bangumi",
6
      url: "/bangumi/",
7
    }
8
  ],
9
};

成果展示#

请访问Bangumi 页面查看成果。