冷梗续命

躺平式分享

还是挺怀念那年的飞信,至于现在的微信,除了看看重要的扣费,已不知所措的要发点什么以表达出来的文字了

Learn More

标签

站点统计

文章

16

分类

4

标签

23

总字数

12,404

运行时长

0 天

最后活动

0 天前

1322 字

7 分钟

关于本主题的一些改动

2025-12-25

2026-01-10

Hello World

Astro

/

mizuki

前言:#

作为非专业人士，我修改博客主题时常因不知如何提问、怕改代码出错而搁置对默认设置（如偏爱深色而非白色背景）的调整，又因喜欢这款主题风格，故记录修改细节以备日后重新部署参考，避免重复迷茫

改动定位#

主题色
游戏库
头像隐藏
播放器收起

主题色#

浅色
深色✅

打开‘src/constants/constants.ts’文件,找到`export const LIGHT_MODE = "light",`在3-4行添加 `DARK_MODE = "dark";`#

1
export const PAGE_SIZE = 8;
2

3
export const LIGHT_MODE = "light",
4
    DARK_MODE = "dark";

手机端头像隐藏#

打开‘src/components/widget/Profile.astro’文件,找到`<div class="card-base p-3">`在17行添加`hidden md:block`#

1
<div class="card-base p-3">
2

3

4
<div class="card-base p-3 hidden md:block">

游戏库#

打开`‘src/data/’`新建一个文件,命名为`‘games.ts’` 作为游戏页面#

1
---
2
// 游戏库数据配置
3
export type GameItem = {
4
  title: string;
5
  playTime: number;
6
  lastPlayed: string;
7
  achievements: number;
8
  totalAchievements: number;
9
  cover: string;
10
  link: string;
11
};
12

13
const localGameList: GameItem[] = [
14
  {
15
    title: "斗地主",    // 游戏名称
16
    playTime: 66.72, // 小时
17
    lastPlayed: "2016-04-19",  // 最后一次游玩时间
18
    achievements: 60, // 已完成的成就数
19
    totalAchievements: 100,  // 总成就数
20
    cover: "/assets/desktop-banner/warf.webp",  // 游戏封面图片路径
21
    link: "https://store.steampowered.com/app/550/Left_4_Dead_2/",  // 游戏Steam页面链接
22
  },
23
  {
24
    title: "反恐精英2",
25
    playTime: 1,
26
    lastPlayed: "2024-03-10",
27
    achievements: 1,
28
    totalAchievements: 100,
29
    cover: "",
30
    link: "https://store.steampowered.com/app/730/CounterStrike_2/",
31
  },
32
];
33

34
export default localGameList;

打开`‘src/pages/’`新建一个文件,命名为`‘games.astro’` 作为游戏库数据配置#

1
---
2
import ImageWrapper from "../components/misc/ImageWrapper.astro";
3
import { sidebarLayoutConfig, siteConfig } from "../config";
4
import localGameList from "../data/games";
5
import I18nKey from "../i18n/i18nKey";
6
import { i18n } from "../i18n/translation";
7
import MainGridLayout from "../layouts/MainGridLayout.astro";
8

9
// 检查游戏库页面是否启用
10
if (!siteConfig.featurePages.games) {
11
  return Astro.redirect("/404/");
12
}
13

14
// 检查是否为双侧边栏模式
15
const isBothSidebarMode = sidebarLayoutConfig.position === "both";
16

17
// 确保localGameList不是undefined
18
const gameList = localGameList || [];
19

20
// 计算统计数据
21
const stats = {
22
  total: gameList.length,
23
  totalPlayTime: gameList.reduce((sum, game) => sum + game.playTime, 0),
24
  avgAchievements: (() => {
25
    const totalAchievements = gameList.reduce(
26
      (sum, game) => sum + game.achievements,
27
      0,
28
    );
29
    const totalPossible = gameList.reduce(
30
      (sum, game) => sum + game.totalAchievements,
31
      0,
32
    );
33
    if (totalPossible === 0) return "0.0";
34
    return ((totalAchievements / totalPossible) * 100).toFixed(1);
35
  })(),
36
};
37
---
38

39
<MainGridLayout title="游戏库" description="我的游戏收藏">
40
  <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
41
    <div class="card-base z-10 px-9 py-6 relative w-full">
42
      <!-- 页面标题 -->
43
      <div class="relative w-full mb-8">
44
        <div class="mb-6">
45
          <h1 class="text-4xl font-bold text-black/90 dark:text-white/90 mb-2 relative
46
                    before:w-1 before:h-8 before:rounded-md before:bg-[var(--primary)]
47
                    before:absolute before:top-1/2 before:-translate-y-1/2 before:-left-4">
48
            游戏库
49
          </h1>
50
          <p class="text-black/75 dark:text-white/75">我的游戏收藏与游玩记录</p>
51
        </div>
52
      </div>
53

54
      <!-- 统计数据 -->
55
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
56
        <div class="bg-[var(--card-bg)] border border-[var(--line-divider)] rounded-[var(--radius-large)] p-4">
57
          <div class="text-2xl font-bold text-black/90 dark:text-white/90">{stats.total}</div>
58
          <div class="text-sm text-black/60 dark:text-white/60">游戏总数</div>
59
        </div>
60
        <div class="bg-[var(--card-bg)] border border-[var(--line-divider)] rounded-[var(--radius-large)] p-4">
61
          <div class="text-2xl font-bold text-black/90 dark:text-white/90">{stats.totalPlayTime.toFixed(1)}</div>
62
          <div class="text-sm text-black/60 dark:text-white/60">总游玩时间（小时）</div>
63
        </div>
64
        <div class="bg-[var(--card-bg)] border border-[var(--line-divider)] rounded-[var(--radius-large)] p-4">
65
          <div class="text-2xl font-bold text-black/90 dark:text-white/90">{stats.avgAchievements}%</div>
66
          <div class="text-sm text-black/60 dark:text-white/60">平均成就完成率</div>
67
        </div>
68
      </div>
69

70
      <!-- 游戏列表 -->
71
      <div class="mb-8">
72
        {gameList.length > 0 ? (
73
          <div id="game-list-container" class={`game-grid-container grid gap-4 md:gap-6 list-mode ${isBothSidebarMode ? "both-sidebar" : "single-sidebar"}`}>
74
            {gameList.map(game => {
75
              const achievementPercent = game.totalAchievements > 0 ? (game.achievements / game.totalAchievements) * 100 : 0;
76

77
              return (
78
                <div class="group relative bg-[var(--card-bg)] border border-[var(--line-divider)] rounded-[var(--radius-large)] overflow-hidden transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
79
                  <!-- 封面区域 -->
80
                  <div class="relative aspect-video overflow-hidden bg-gray-200 dark:bg-gray-800">
81
                    <a href={game.link} target="_blank" rel="noopener noreferrer" class="block w-full h-full">
82
                      {game.cover ? (
83
                        <ImageWrapper
84
                          src={game.cover}
85
                          alt={game.title}
86
                          class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
87
                        />
88
                      ) : (
89
                        <div class="w-full h-full flex items-center justify-center">
90
                          <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
91
                            <path d="M21 6H3v12h18V6zm-1 10H4V8h16v8z"/>
92
                          </svg>
93
                        </div>
94
                      )}
95

96
                    </a>
97
                  </div>
98

99
                  <!-- 内容区域 -->
100
                  <div class="p-4">
101
                    <h3 class="text-lg font-bold text-black/90 dark:text-white/90 mb-2 line-clamp-1">{game.title}</h3>
102

103
                    <!-- 游玩时间 -->
104
                    <div class="flex justify-between items-center mb-2">
105
                      <span class="text-sm text-black/60 dark:text-white/60">游玩时间</span>
106
                      <span class="text-sm font-medium text-black/90 dark:text-white/90">{game.playTime} 小时</span>
107
                    </div>
108

109
                    <!-- 最后游玩 -->
110
                    <div class="flex justify-between items-center mb-2">
111
                      <span class="text-sm text-black/60 dark:text-white/60">最后游玩</span>
112
                      <span class="text-sm font-medium text-black/90 dark:text-white/90">{game.lastPlayed}</span>
113
                    </div>
114

115
                    <!-- 成就进度 -->
116
                    <div class="mb-1">
117
                      <div class="flex justify-between items-center mb-1">
118
                        <span class="text-sm text-black/60 dark:text-white/60">成就</span>
119
                        <span class="text-sm font-medium text-black/90 dark:text-white/90">{game.achievements}/{game.totalAchievements}</span>
120
                      </div>
121
                      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
122
                        <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-1.5 rounded-full transition-all duration-300" style={`width: ${achievementPercent}%`}></div>
123
                      </div>
124
                      <div class="text-xs text-black/50 dark:text-white/50 text-right mt-1">{achievementPercent.toFixed(1)}%</div>
125
                    </div>
126
                  </div>
127
                </div>
128
              );
129
            })}
130
          </div>
131
        ) : (
132
          <div class="text-center py-12">
133
            <div class="text-5xl mb-4">😢</div>
134
            <h3 class="text-xl font-medium text-black/80 dark:text-white/80 mb-2">
135
              游戏库为空
136
            </h3>
137
            <p class="text-black/60 dark:text-white/60">
138
              还没有添加任何游戏到收藏库
139
            </p>
140
          </div>
141
        )}
142
      </div>
143
    </div>
144
  </div>
145

146
  <!-- 游戏列表布局样式 -->
147
  <style>
148
    /* 容器查询支持 */
149
    .card-base {
150
      container-type: inline-size;
151
    }
152

153
    /* 游戏网格容器 - 使用容器查询实现响应式列数 */
154
    .game-grid-container {
155
      /* 基础配置 - 移动端 */
156
      display: grid;
157
      grid-template-columns: repeat(2, 1fr);
158
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
159
    }
160

161
    /* 单侧栏模式 */
162
    .game-grid-container.single-sidebar {
163
      @container (min-width: 900px) {
164
        grid-template-columns: repeat(4, 1fr);
165
      }
166

167
      @container (min-width: 600px) and (max-width: 899px) {
168
        grid-template-columns: repeat(3, 1fr);
169
      }
170

171
      @container (max-width: 599px) {
172
        grid-template-columns: repeat(2, 1fr);
173
      }
174
    }
175

176
    /* 双侧栏模式 */
177
    .game-grid-container.both-sidebar {
178
      @container (min-width: 950px) {
179
        grid-template-columns: repeat(3, 1fr);
180
      }
181

182
      @container (min-width: 650px) and (max-width: 949px) {
183
        grid-template-columns: repeat(2, 1fr);
184
      }
185

186
      @container (max-width: 649px) {
187
        grid-template-columns: repeat(2, 1fr);
188
      }
189
    }
190
  </style>
191
</MainGridLayout>

打开`‘src/config.ts'`打开config.ts文件,找到`'export const config'`#

1
export const config = {
2
  featurePages: {
3
    anime: true, // 番剧页面开关
4
    diary: true, // 日记页面开关
5
    friends: true, // 友链页面开关
6
    projects: true, // 项目页面开关
7
    skills: true, // 技能页面开关
8
    timeline: true, // 时间线页面开关
9
    albums: true, // 相册页面开关
10
    devices: true, // 设备页面开关
11
    games: true, // 游戏库页面开关
12

13
  },
14
}

打开 ‘src/config.ts’找到`'export const navBarConfig: NavBarConfig'`菜单栏配置#

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    // 支持自定义导航栏链接,并且支持多级菜单,3.1版本新加
6
    {
7
      name: "Links",
8
      url: "/links/",
9
      icon: "material-symbols:link",
10
      children: [
11
        {
12
          name: "GitHub",
13
          url: "https://github.com/matsuzaka-yuki/Mizuki",
14
          external: true,
15
          icon: "fa6-brands:github",
16
        },
17
        {
18
          name: "Bilibili",
19
          url: "https://space.bilibili.com/14516536?spm_id_from=333.1007.0.0",
20
          external: true,
21
          icon: "fa6-brands:bilibili",
22
        },
23
        {
24
          name: "游戏库",
25
          url: "/games/",
26
          icon: "material-symbols:sports-esports",
27
        },

音乐播放器收起#

默认是关闭❌

我设置了收起,打开 ‘src/components/widget/MusicPlayer.svelte’文件,找到`'isHidden'`变量,将`false`设置为`true`即可#

1
// 播放器是否隐藏，默认为 false
2
let isHidden = false;
3

4
// 播放器是否隐藏，默认为 true（默认显示小圆球）
5
let isHidden = true;

关于本主题的一些改动

https://wxh168.vip/posts/theme/

作者

冷梗续命

发布于

2025-12-25

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

《未署名的旧信》

匆匆又匆匆

前言:#

改动定位#

主题色#

打开‘src/constants/constants.ts’文件,找到export const LIGHT_MODE = "light",在3-4行添加 DARK_MODE = "dark";#

手机端头像隐藏#

打开‘src/components/widget/Profile.astro’文件,找到<div class="card-base p-3">在17行添加hidden md:block#

游戏库#

打开‘src/data/’新建一个文件,命名为‘games.ts’ 作为游戏页面#

打开‘src/pages/’新建一个文件,命名为‘games.astro’ 作为游戏库数据配置#

打开‘src/config.ts'打开config.ts文件,找到'export const config'#

打开 ‘src/config.ts’找到'export const navBarConfig: NavBarConfig'菜单栏配置#