在Astro新增一个时间盒子页面

想着既然选择 Astro，就得写一些有自己风格的东西，思来想去，写个时间盒子吧！

其实就是一个展示页面啦，在本站你可以看到展示效果。

WARNING
目前此方法已废弃，采用了更优的解决方案，此文章只做存档

PS：目前采用的方案是：bilibili-bangumi-component: 展示 bilibili 与 Bangumi 追番列表的 WebComponent 组件

具体步骤#

在 src\content\spec 目录下新建文件 chronobox.md。名字随意哈

在 src\types\config.ts 文件内添加以下内容

1
export enum LinkPreset {
2
  Home = 0,
3
  Archive = 1,
4
  About = 2,
5
  Friends = 3,
6
  Series = 4,
7
  ChronoBox = 5,
8
}

在 src\i18n\i18nKey.ts 文件内添加以下内容

1
author = "author",
2
publishedAt = "publishedAt",
3
license = "license",
4
friends = "friends",
5
series = "series",
6
chronobox = "chronobox",

然后在对应的语言文件里继续添加 key，不多赘述

在 src\constants\link-presets.ts 文件内添加以下内容

1
[LinkPreset.Series]: {
2
  name: i18n(I18nKey.series),
3
  url: "/series/",
4
  },
5
[LinkPreset.ChronoBox]: {
6
  name: i18n(I18nKey.chronobox),
7
  url: "/chronobox/",
8
},

在 src\components 目录下，选择合适的位置，新建三个卡片组件

AnimeList. astro 组件#

新建 AnimeList.astro 组件

1
---
2
// AnimeList.astro
3
import type { Props as AstroProps } from "astro";
4

5
// 定义组件接收的属性接口
6
export interface Props {
7
  items: {
8
    type: string;
9
    title: string;
10
    cover: string;
11
    date: string;
12
    desc?: string;
13
    url: string;
14
    episodes: string | number;
15
    rating: number;
16
    tags: string[];
17
  }[];
18
}
19

20
// 从props中获取items，并添加空值检查
21
const { items = [] } = Astro.props as Props;
22

23
// 确保items是数组类型
24
if (!Array.isArray(items)) {
25
  throw new Error("AnimeList: items prop must be an array");
26
}
27
---
28

29
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
30
  {items.map((item) => (
31
    <div class="anime-card group relative overflow-hidden rounded-lg shadow-md transition-shadow">
32
      <!-- 封面展示 -->
33
      <div class="anime-cover-container w-full bg-gray-200">
34
        <img src={item.cover} alt={item.title} class="w-full h-full object-cover transition-transform group-hover:scale-105" />
35
      </div>
36

37
      <!-- 亚克力蒙版 -->
38
      <div class="absolute bottom-0 left-0 right-0 h-0 overflow-hidden transition-all group-hover:h-44">
39
        <div class="bg-gray-500/60 dark:bg-gray-800/40 p-4 flex flex-col justify-end h-full rounded-t-lg backdrop-blur-[3px]">
40
          <!-- 标题与日期 -->
41
          <h3 class="title text-white text-sm font-semibold mb-1 line-clamp-3">
42
            {item.title}
43
          </h3>
44
          <time class="date text-white/90 text-xs mb-2">
45
            {new Date(item.date).toLocaleDateString()}
46
          </time>
47

48
          <!-- 核心信息栏 -->
49
          <div class="flex justify-between items-center">
50
            <!-- 集数信息 -->
51
            <div class="flex items-center gap-1.5 text-white/90">
52
              <svg class="w-3.5 h-3.5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
54
              </svg>
55
              <span class="text-xs font-medium">{item.episodes}</span>
56
            </div>
57

58
            <!-- 评分展示 -->
59
            <div class="flex items-center gap-1 text-white/90">
60
              ⭐
61
              <span class="text-xs font-medium">{item.rating.toFixed(1)}分</span>
62
            </div>
63
          </div>
64

65
          <!-- 椭圆标签 -->
66
          <div class="tag-cloud flex flex-wrap gap-1 mt-1">
67
            {item.tags.slice(0, 3).map(tag => (
68
              <span class="tag bg-white/25 dark:bg-black/25 px-1.5 py-0.5 rounded-full text-[8px] md:text-xs font-medium leading-tight">
69
                {tag}
70
              </span>
71
            ))}
72
          </div>
73
        </div>
74
      </div>
75

76
      <!-- 点击穿透层 -->
77
      <a href={item.url} class="absolute inset-0" target="_blank" rel="noopener noreferrer"></a>
78
    </div>
79
  ))}
80
</div>
81
<style>
82
/* 动漫卡片核心样式 */
83
.anime-card {
84
  @apply transition-shadow duration-300;
85
  transform: perspective(1000px);
86
  will-change: transform, box-shadow;
87
  aspect-ratio: 3/3; /* 改为正方形比例，高度会降低 */
88
  height: auto;
89
  max-width: 240px; /* 宽度保持不变 */
90
}
91

92
.anime-card:hover {
93
  @apply shadow-2xl;
94
  transform: scale(1.02);
95
}
96

97
.anime-cover-container {
98
  aspect-ratio: 3/3; /* 保持与卡片相同的比例 */
99
  position: absolute;
100
  top: 0;
101
  left: 0;
102
  width: 100%;
103
  height: 100%;
104
}
105

106
/* 响应式调整 */
107
@media (max-width: 640px) {
108
  .anime-card {
109
    max-width: 120px; /* 从160px减小到120px */
110
  }
111
}
112

113
@media (min-width: 641px) and (max-width: 1023px) {
114
  .anime-card {
115
    max-width: 160px; /* 从190px减小到160px */
116
  }
117
}
118
</style>

MusicList. astro 组件#

新建 MusicList.astro 组件

1
---
2
import type { Props as AstroProps } from "astro";
3

4
// 定义组件接收的属性接口
5
export interface Props {
6
  items: {
7
    type: string;
8
    title: string;
9
    artist: string;
10
    cover: string;
11
    album: string;
12
    date: string;
13
    platform: {
14
      [key: string]: string;
15
    };
16
  }[];
17
}
18

19
// 从props中获取items，设置默认空数组并添加类型检查
20
const { items = [] } = Astro.props as Props;
21

22
// 确保items是数组类型，避免后续操作报错
23
if (!Array.isArray(items)) {
24
  throw new Error("MusicList: items prop must be an array");
25
}
26
---
27

28
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
29
  {items.map((item) => (
30
    <div class="music-card group relative overflow-hidden rounded-xl shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
31
      <div class="aspect-square w-full bg-gray-200 relative">
32
        <img
33
          src={item.cover}
34
          alt={`${item.title} - ${item.artist}`}
35
          class="w-full h-full object-cover"
36
        />
37
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/30">
38
          <svg class="w-8 h-8 text-white/90 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
39
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
40
          </svg>
41
        </div>
42
      </div>
43
      <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent transition-all duration-300">
44
        <h3 class="text-white text-[13px] font-semibold truncate line-clamp-1">
45
          {item.title}
46
        </h3>
47
        <p class="text-white/90 text-[11px] truncate line-clamp-1">
48
          {item.artist}
49
        </p>
50
        <div class="hidden group-hover:block mt-1.5">
51
          <p class="text-gray-400 text-[10px]">
52
            {item.album} • {new Date(item.date).getFullYear()}
53
          </p>
54
          <div class="flex gap-1.5 mt-2 flex-wrap">
55
            <div class="flex gap-1 mt-2 flex-wrap">
56
              {Object.entries(item.platform).map(([platform, link]) => (
57
                link && (
58
                  <a
59
                    href={link}
60
                    target="_blank"
61
                    rel="noopener noreferrer"
62
                    class="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-white/10 hover:bg-white/20 text-[9px] md:text-[11px] transition-colors leading-tight"
63
                  >
64
                    {platform === 'spotify' && (
65
                      <svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
66
                        <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.56 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
67
                      </svg>
68
                    )}
69
                    {platform === 'netease' && (
70
                      <svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
71
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zm3.5-11.5h-7c-.276 0-.5.224-.5.5v7c0 .276.224.5.5.5h7c.276 0 .5-.224.5-.5v-7c0-.276-.224-.5-.5-.5z"/>
72
                      </svg>
73
                    )}
74
                    {platform === 'qqmusic' && (
75
                      <svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
76
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zm-2.5-8h5c.276 0 .5-.224.5-.5v-4c0-.276-.224-.5-.5-.5h-5c-.276 0-.5.224-.5.5v4c0 .276.224.5.5.5z"/>
77
                      </svg>
78
                    )}
79
                    <span class="text-white/90 truncate">
80
                      {platform === 'spotify' ? 'Spotify' : platform === 'netease' ? '网易云' : 'QQ音乐'}
81
                    </span>
82
                  </a>
83
                )
84
              ))}
85
            </div>
86
          </div>
87
        </div>
88
      </div>
89
    </div>
90
  ))}
91
</div>
92

93
<style>
94
.music-card {
95
  @apply relative overflow-hidden rounded-xl shadow-md transition-all duration-300;
96
  aspect-ratio: 1/1;
97
  height: auto;
98
}
99

100
.music-card:hover {
101
  @apply shadow-xl -translate-y-1;
102
}
103

104
/* 响应式调整 */
105
@media (max-width: 640px) {
106
  .music-card {
107
    max-width: 180px; /* 从120px增大到180px，适配一行两个的布局 */
108
  }
109
}
110

111
@media (min-width: 641px) and (max-width: 1023px) {
112
  .music-card {
113
    max-width: 140px;
114
  }
115
}
116

117
@media (min-width: 1024px) {
118
  .music-card {
119
    max-width: 160px;
120
  }
121
}
122
</style>

PhotoList.astro组件#

新建 PhotoList.astro 组件

1
---
2
import { AstroProps } from 'astro';
3

4
// 定义组件接收的属性接口（将timelineItems改为items）
5
export interface Props {
6
  items: {
7
    type: string;
8
    title: string;
9
    image: string;
10
    date: string;
11
    location: string;
12
    camera: string;
13
    tags: string[];
14
  }[];
15
}
16

17
// 从props中获取items，设置默认空数组并添加类型检查
18
const { items = [] } = Astro.props as AstroProps<Props>;
19

20
// 确保items是数组类型，避免后续操作报错
21
if (!Array.isArray(items)) {
22
  throw new Error('PhotoList: items prop must be an array');
23
}
24
---
25

26
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
27
    {items.map((item) => (
28
            <div
29
                class="photo-card relative overflow-hidden rounded-xl shadow-lg transition-shadow duration-300 group cursor-pointer"
30
                data-image={item.image}
31
                data-title={item.title}
32
                data-camera={item.camera}
33
                data-tags={JSON.stringify(item.tags)}
34
            >
35
                <div class="aspect-w-2 aspect-h-3 w-full">
36
                    <img
37
                        src={item.image}
38
                        alt={item.title}
39
                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
40
                    />
41
                </div>
42
                <!-- 信息蒙版 -->
43
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4">
44
                    <!-- 左侧基础信息 -->
45
                    <div class="flex flex-col justify-end h-full">
46
                        <h3 class="text-white text-sm font-semibold mb-1">{item.title}</h3>
47
                        <div class="flex items-center gap-1 text-gray-300 text-xs">
48
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
49
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
50
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
51
                            </svg>
52
                            <span>{item.location}</span>
53
                        </div>
54
                        <time class="text-gray-400 text-xs">{new Date(item.date).toLocaleDateString()}</time>
55
                    </div>
56

57
                    <!-- 右侧信息（悬浮显示） -->
58
                    <div class="absolute bottom-4 right-4 flex flex-col items-end space-y-2 opacity-0 pointer-events-none transition-opacity duration-300 group-hover:opacity-100 group-hover:pointer-events-auto">
59
                        <!-- 相机信息 -->
60
                        <div class="flex items-center gap-1.5 text-white/80 text-xs">
61
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
62
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
63
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
64
                            </svg>
65
                            <span>{item.camera}</span>
66
                        </div>
67

68
                        <!-- 标签组 -->
69
                        <div class="flex flex-wrap gap-2 justify-end">
70
                            {item.tags.map(tag => (
71
                                <span class="px-2 py-1 bg-white/10 backdrop-blur-sm rounded-full text-white/90 text-xs font-medium transition-colors hover:bg-white/20">
72
                                    {tag}
73
                                </span>
74
                            ))}
75
                        </div>
76
                    </div>
77
                </div>
78
            </div>
79
        ))}
80
</div>
81

82
<script is:inline>
83
// 使用立即执行函数封装代码，避免全局污染
84
(function() {
85
  // 模态框操作函数
86
  function openModal(imageUrl, title, camera, tags) {
87
    let modal = document.getElementById('modal');
88

89
    // 如果模态框不存在则创建
90
    if (!modal) {
91
      modal = createModalElement();
92
      document.body.appendChild(modal);
93

94
      // 添加全局事件监听（只需一次）
95
      setupGlobalListeners();
96
    }
97

98
    // 更新模态框内容
99
    document.getElementById('modal-image').src = imageUrl;
100
    document.getElementById('modal-title').textContent = title;
101
    document.getElementById('modal-camera').textContent = camera;
102

103
    // 渲染标签
104
    const tagsContainer = document.getElementById('modal-tags');
105
    tagsContainer.innerHTML = tags.map(tag => `
106
      <span class="px-3 py-1 bg-white rounded-full text-sm shadow-sm border" style="background:var(--btn-regular-bg-active);">
107
        ${tag}
108
      </span>
109
    `).join('');
110

111
    // 显示模态框
112
    modal.classList.remove('hidden');
113
    document.body.style.overflow = 'hidden'; // 防止背景滚动
114
  }
115

116
  function createModalElement() {
117
    const modal = document.createElement('div');
118
    modal.id = 'modal';
119
    modal.className = 'fixed inset-0 bg-black/80 backdrop-blur-sm hidden flex items-center justify-center z-50';
120

121
    // 获取主题色
122
    const rootStyles = getComputedStyle(document.documentElement);
123
    const primaryColor = rootStyles.getPropertyValue('--primary').trim();
124

125
    modal.innerHTML = `
126
      <div class="rounded-xl max-w-6xl w-full md:max-w-5xl lg:max-w-4xl max-h-[90vh] overflow-y-auto overflow-x-hidden shadow-2xl relative" style="background:var(--page-bg);">
127
        <button
128
          id="modal-close-btn"
129
          class="absolute top-4 right-4 text-white bg-black/20 hover:bg-black/30 rounded-full p-2 transition-colors backdrop-blur-sm z-10"
130
        >
131
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
132
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
133
          </svg>
134
        </button>
135
        <div class="p-6 border-b border-gray-200">
136
          <h2 id="modal-title" class="text-2xl font-bold text-gray-900 mb-2" style="color: ${primaryColor};"></h2>
137
          <div class="flex items-center gap-4 text-gray-600">
138
            <div class="flex items-center gap-1">
139
              <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
140
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
141
              </svg>
142
              <span id="modal-camera"></span>
143
            </div>
144
            <div id="modal-tags" class="flex flex-wrap gap-2"></div>
145
          </div>
146
        </div>
147
        <div class="relative p-4">
148
          <img
149
            id="modal-image"
150
            class="w-full h-auto max-h-[70vh] object-contain"
151
            loading="lazy"
152
          />
153
        </div>
154
      </div>
155
    `;
156
    return modal;
157
  }
158

159
  function closeModal() {
160
    const modal = document.getElementById('modal');
161
    if (modal) {
162
      modal.classList.add('hidden');
163
      document.body.style.overflow = ''; // 恢复滚动
164
    }
165
  }
166

167
  function setupGlobalListeners() {
168
    // 点击关闭按钮
169
    document.getElementById('modal-close-btn')?.addEventListener('click', closeModal);
170

171
    // 点击模态框背景关闭
172
    document.getElementById('modal')?.addEventListener('click', (e) => {
173
      if (e.target === document.getElementById('modal')) {
174
        closeModal();
175
      }
176
    });
177

178
    // ESC键关闭
179
    document.addEventListener('keydown', (e) => {
180
      if (e.key === 'Escape' && !document.getElementById('modal')?.classList.contains('hidden')) {
181
        closeModal();
182
      }
183
    });
184
  }
185

186
  document.addEventListener('click', (e) => {
187
    const card = e.target.closest('.photo-card');
188
    if (card) {
189
      e.preventDefault();
190
      openModal(
191
        card.dataset.image,
192
        card.dataset.title,
193
        card.dataset.camera,
194
        JSON.parse(card.dataset.tags)
195
      );
196
    }
197
  });
198

199
})();
200
</script>
201

202
<style>
203
    .photo-card {
204
        @apply relative overflow-hidden rounded-xl shadow-lg transition-shadow duration-300;
205
        /* 移除所有宽度计算，完全依赖网格系统 */
206
    }
207

208
    .photo-card img {
209
        @apply w-full h-full object-cover transition-transform duration-300 group-hover:scale-105;
210
    }
211

212
    /* 右侧信息悬浮效果 */
213
    .photo-card .right-info {
214
        opacity: 0;
215
        pointer-events: none;
216
        transition: opacity 0.3s ease;
217
    }
218

219
    .photo-card:hover .right-info {
220
        opacity: 1;
221
        pointer-events: auto;
222
    }
223

224
    /* 强制小屏幕单栏，中屏幕双栏，大屏幕三栏（可按需调整） */
225
    @media (min-width: 640px) {
226
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
227
        .md:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
228
        .lg:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
229
    }
230

231
    /* 仅在模态框非隐藏时应用居中样式 */
232
    #modal:not(.hidden) {
233
        display: flex;
234
        align-items: center;
235
        justify-content: center;
236
    }
237

238
    /* 确保隐藏时完全隐藏（覆盖可能的样式冲突） */
239
    #modal.hidden {
240
        display: none !important;
241
    }
242

243
    #modal-title {
244
        color: var(--primary)!important; /* 使用主题主色 */
245
        /* 响应式调整（可选） */
246
        @media (max-width: 768px) {
247
            font-size: 1.25rem !important; /* 小屏幕缩小字体 */
248
        }
249
    }
250

251
    /* 模态内容居中（保持不变） */
252
    #modal > div {
253
        margin: auto;
254
    }
255
</style>

BookList. astro 组件#

1
---
2
import { AstroProps } from 'astro';
3

4
// 定义组件接收的属性接口（将timelineItems改为items）
5
export interface Props {
6
  items: {
7
    type: string;
8
    title: string;
9
    cover: string;
10
    author: string;
11
    date: string;
12
    desc?: string;
13
    url: string;
14
    rating: number;
15
    tags: string[];
16
  }[];
17
}
18

19
// 从props中获取items，设置默认空数组并添加类型检查
20
const { items = [] } = Astro.props as AstroProps<Props>;
21

22
// 确保items是数组类型，避免后续操作报错
23
if (!Array.isArray(items)) {
24
  throw new Error('BookList: items prop must be an array');
25
}
26
---
27

28
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
29
  {items.map((item) => (
30
    <div class="book-card group relative overflow-hidden rounded-lg shadow-md transition-shadow">
31
      <!-- 封面展示 -->
32
      <div class="book-cover-container w-full bg-gray-200">
33
        <img src={item.cover} alt={item.title} class="w-full h-full object-cover transition-transform group-hover:scale-105" />
34
      </div>
35

36
      <!-- 亚克力蒙版 -->
37
      <div class="absolute bottom-0 left-0 right-0 h-0 overflow-hidden transition-all group-hover:h-36">
38
        <div class="bg-gray-500/60 dark:bg-gray-800/40 p-4 flex flex-col justify-end h-full rounded-t-lg backdrop-blur-[3px]">
39
          <!-- 标题与作者 -->
40
          <h3 class="title text-white text-base font-semibold mb-1 line-clamp-2">
41
            {item.title}
42
          </h3>
43
          <p class="author text-white/80 text-xs mb-2">
44
            作者: {item.author}
45
          </p>
46

47
          <!-- 评分展示 -->
48
          <div class="flex items-center gap-1 text-white/90 mb-2">
49
            ⭐
50
            <span class="text-xs font-medium">{item.rating.toFixed(1)}分</span>
51
          </div>
52

53
          <!-- 椭圆标签 -->
54
          <div class="tag-cloud flex flex-wrap gap-1.5 mt-2">
55
            {item.tags.map(tag => (
56
              <span class="tag bg-white/25 dark:bg-black/25 px-3 py-1 rounded-full text-xs font-medium">
57
                {tag}
58
              </span>
59
            ))}
60
          </div>
61
        </div>
62
      </div>
63

64
      <!-- 点击穿透层 -->
65
      <a href={item.url} class="absolute inset-0" target="_blank" rel="noopener noreferrer"></a>
66
    </div>
67
  ))}
68
</div>
69

70
<style>
71
.book-card {
72
  @apply transition-shadow duration-300;
73
  transform: perspective(1000px);
74
  will-change: transform, box-shadow;
75
  aspect-ratio: 3/4; /* 书籍封面比例 */
76
  height: auto;
77
  max-width: 180px; /* 限制最大宽度 */
78
}
79

80
.book-card:hover {
81
  @apply shadow-2xl;
82
  transform: scale(1.02);
83
}
84

85
.book-cover-container {
86
  aspect-ratio: 3/4;
87
  position: absolute;
88
  width: 100%;
89
  height: 100%;
90
}
91

92
/* 响应式调整 */
93
@media (max-width: 640px) {
94
  .book-card {
95
    max-width: 140px;
96
  }
97
}
98

99
@media (min-width: 1024px) {
100
  .book-card {
101
    max-width: 160px;
102
  }
103
}
104
</style>

父组件#

在 src\pages 目录下，新建一个 chronobox.astro 文件

1
---
2
import { getEntry } from "astro:content";
3
import BookList from "@components/mine/Lists/BookList.astro";
4
import Markdown from "@components/misc/Markdown.astro";
5
import AnimeList from "@/components/mine/Lists/AnimeList.astro";
6
import MusicList from "@/components/mine/Lists/MusicList.astro";
7
import PhotoList from "@/components/mine/Lists/PhotoList.astro";
8
import { animeData } from "@/data/anime.js";
9
import { bookData } from "@/data/book.js";
10
import { musicData } from "@/data/music.js";
11
import { photoData } from "@/data/photo.js";
12
import I18nKey from "@/i18n/i18nKey";
13
import { i18n } from "@/i18n/translation";
14
import MainGridLayout from "@/layouts/MainGridLayout.astro";
15

16
const chronoboxPost = await getEntry("spec", "chronobox");
17
const { Content } = await chronoboxPost.render();
18
// 按类型组织数据
19
const timelineData = {
20
  anime: animeData,
21
  book: bookData,
22
  music: musicData,
23
  photo: photoData,
24
};
25
---
26

27

28
<MainGridLayout title={i18n(I18nKey.chronobox)} description={i18n(I18nKey.chronobox)}>
29
  <Markdown class="mt-8 prose max-w-none">
30
      <Content />
31
  </Markdown>
32

33
<!-- 选项卡容器 -->
34
  <div class="time-capsule-container">
35
      <div class="card-base z-10 px-9 py-6 relative w-full">
36
          <!-- 选项卡导航 -->
37
          <div class="tabs-header flex gap-4 mb-8 border-b border-gray-200 dark:border-gray-700">
38
              <button data-tab="anime" class="tab-button active px-4 py-2 rounded-t-lg transition-colors duration-200 font-medium relative">
39
                  动漫
40
                  <span class="active-indicator absolute bottom-0 left-0 right-0 h-0.5 transition-opacity"></span>
41
              </button>
42
              <button data-tab="book" class="tab-button px-4 py-2 rounded-t-lg transition-colors duration-200 font-medium relative">
43
                  书籍
44
                  <span class="active-indicator absolute bottom-0 left-0 right-0 h-0.5 transition-opacity"></span>
45
              </button>
46
              <button data-tab="music" class="tab-button px-4 py-2 rounded-t-lg transition-colors duration-200 font-medium relative">
47
                  音乐
48
                  <span class="active-indicator absolute bottom-0 left-0 right-0 h-0.5 transition-opacity"></span>
49
              </button>
50
              <button data-tab="photo" class="tab-button px-4 py-2 rounded-t-lg transition-colors duration-200 font-medium relative">
51
                  图片
52
                  <span class="active-indicator absolute bottom-0 left-0 right-0 h-0.5 transition-opacity"></span>
53
              </button>
54
          </div>
55
         <!-- 数据（直接使用对应类型的数据） -->
56
          <div id="anime-content" class="tab-content">
57
              <AnimeList items={timelineData.anime} />
58
          </div>
59
          <div id="music-content" class="tab-content hidden">
60
              <MusicList items={timelineData.music} />
61
          </div>
62
          <div id="photo-content" class="tab-content hidden">
63
              <PhotoList items={timelineData.photo} />
64
          </div>
65
          <div id="book-content" class="tab-content hidden">
66
              <BookList items={timelineData.book} />
67
          </div>
68
      </div>
69
  </div>
70

71
  <!-- 选项卡交互脚本 -->
72
  <script is:inline>
73
(function() {
74
  const tabs = document.querySelectorAll('.tab-button');
75
  const contents = document.querySelectorAll('.tab-content');
76

77
  tabs.forEach(tab => {
78
    tab.addEventListener('click', () => {
79
      // 移除所有标签的激活状态
80
      tabs.forEach(t => {
81
        t.classList.remove('active');
82
        t.querySelector('.active-indicator').style.opacity = '0';
83
      });
84

85
      // 隐藏所有内容
86
      contents.forEach(c => {
87
        c.classList.add('hidden');
88
      });
89
      // 添加当前标签的激活状态
90
      tab.classList.add('active');
91
      tab.querySelector('.active-indicator').style.opacity = '1';
92
      // 显示对应内容
93
      const targetContentId = `${tab.dataset.tab}-content`;
94
      document.getElementById(targetContentId).classList.remove('hidden');
95
    });
96
  });
97
})();
98
</script>
99

100
  <style is:global>
101
    /* 新增选项卡样式 */
102
    .tabs-header {
103
      @apply border-b border-gray-200 dark:border-gray-700;
104
    }
105

106
    .tab-button {
107
      @apply transition-colors duration-200 text-gray-600 dark:text-gray-300;
108
    }
109

110

111
    .tab-button.active {
112
      color: var(--primary); /* 使用Tailwind内置颜色 */
113
    }
114

115
    .tab-button.active .active-indicator {
116
      @apply opacity-100;
117
    }
118

119
    .tab-content {
120
    @apply hidden;
121
  }
122

123
  .tab-content:not(.hidden) {
124
    display: block;
125
    animation: fadeIn 0.3s ease-out;
126
  }
127
    @keyframes fadeIn {
128
      from {
129
        opacity: 0;
130
        transform: translateY(10px);
131
      }
132
      to {
133
        opacity: 1;
134
        transform: translateY(0);
135
      }
136
    }
137

138

139

140
    /* 电脑端额外优化（新增） */
141
    @media (min-width: 1024px) {
142
      .grid-cols-3 > * {
143
        width: calc((100% - 1.5rem) / 3); /* 精确计算列宽，避免间隙影响 */
144
      }
145
      .anime-card {
146
        min-height: 500px; /* 增大桌面端最小高度，匹配比例 */
147
      }
148
    }
149

150
    /* 信息层动画（使用标准CSS过渡） */
151
    .anime-card .info-overlay {
152
      height: 0;
153
      overflow: hidden;
154
      transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
155
    }
156

157
    .anime-card:hover .info-overlay {
158
      height: 100px; /* 自定义合适高度 */
159
    }
160

161

162

163
    /* 响应式调整 */
164
    @media (max-width: 767px) {
165
      .time-capsule-container {
166
        padding: 0 4px;
167
      }
168
      .anime-card {
169
        min-height: 200px; /* 移动端最小高度 */
170
        width: auto;
171
      }
172
    }
173

174
    @media (min-width: 768px) {
175
      .anime-card {
176
        min-height: 350px; /* 平板端最小高度 */
177
      }
178
    }
179

180
    /* 响应式调整 */
181
    @media (max-width: 640px) {
182
      .anime-card {
183
        min-height: 180px; /* 减小移动端最小高度 */
184
        max-width: 100px; /* 与AnimeList组件保持一致 */
185
        width: auto;
186
      }
187
      .music-card {
188
        max-width: 120px; /* 与MusicList组件保持一致 */
189
      }
190
    }
191

192
    @media (min-width: 641px) and (max-width: 1023px) {
193
      .anime-card {
194
        min-height: 280px; /* 调整平板端高度 */
195
        max-width: 140px; /* 与AnimeList组件保持一致 */
196
      }
197
      .music-card {
198
        max-width: 140px;
199
      }
200
    }
201

202
    @media (min-width: 1024px) {
203
      .anime-card {
204
        min-height: 350px;
205
        max-width: 240px; /* 桌面端保持原有设置 */
206
      }
207
      .music-card {
208
        max-width: 160px;
209
      }
210
    }
211

212
    /* 移除调试边框 */
213
    .grid,
214
    .capsule-card {
215
      border: none;
216
    }
217

218
  </style>
219
</MainGridLayout>