前言#

本文章不会再更新，之后的所有更改可以在下面仓库的 commits 中查看：

BackToTop 按钮修复#

问题#

在摸索的时候发现了一个小漏洞，在任意一篇文章中一旦触发了 BackToTop 按钮，即使回到顶部，该按钮仍然不会消失，如图所示：

001

原因#

在 /src/layouts/Layout.astro 中，showBackToTopThreshold 的计算逻辑有点问题，很多页面中都非常有可能会出现负值，这就导致了 scrollTop > showBackToTopThreshold 恒成立，会一直显示该按钮。

解决方法#

NOTE
PR 被合并后该 Bug 已修复，不过仍可以通过下面的方法添加动画。

可以把 contentWrapper 判断逻辑中 showBackToTopThreshold 的计算方式改为 showBackToTopThreshold = absoluteTop + window.innerHeight / 4 来解决。

也可以创建一个 handleScroll 函数并添加添加事件监听来解决：

1
function handleScroll() {
2
        // 便于演示这里使用了 300
3
        // 实际操作可以将 \src\layouts\Layout.astro 中计算好的 showBackToTopThreshold 存储到文档根元素的数据属性
4
        // 然后再在该处读取文档根元素以替换 300
5
        if (window.scrollY > 300) {
6
            backToTopBtn.classList.remove('hide');
7
        } else {
8
            backToTopBtn.classList.add('hide');
9
        }
10
    }
11

12
window.addEventListener('scroll', handleScroll);
13

14
handleScroll(); // 初始化时也检查一次

另外，该按钮的出现和消失没有任何动画，显得十分生硬，我便添加了淡入淡出动画，可以选择使用下面的代码直接替换 BackToTop.astro：

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

5
<!-- There can't be a filter on parent element, or it will break `fixed` -->
6
<div class="back-to-top-wrapper block">
7
    <div id="back-to-top-btn" class="back-to-top-btn flex items-center rounded-2xl overflow-hidden transition">
8
        <button aria-label="Back to Top" class="btn-card h-[3.75rem] w-[3.75rem]">
9
            <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
10
        </button>
11
    </div>
12
</div>
13

14
<style lang="stylus">
15
  .back-to-top-wrapper
16
    width: 3.75rem
17
    height: 3.75rem
18
    position: absolute
19
    right: 0
20
    top: 0
21
    pointer-events: none
22

23
  .back-to-top-btn
24
    color: var(--primary)
25
    font-size: 2.25rem
26
    font-weight: bold
27
    border: none
28
    position: fixed
29
    bottom: 3rem
30
    right: 1rem
31
    cursor: pointer
32

33
    opacity: 0
34
    transform: scale(0.9)
35
    pointer-events: none
36
    transition: all 0.3s ease-in-out
37

38
    i
39
      font-size: 1.75rem
40

41
    &.show
42
      transform: scale(1)
43
      opacity: 1
44
      pointer-events: auto
45

46
    &:active
47
      transform: scale(0.9)
48

49
  @media (max-width: 1560px)
50
    .back-to-top-btn
51
      box-shadow: none
52

53
  // 手机端隐藏返回顶部按钮
54
  @media (max-width: 768px)
55
    .back-to-top-wrapper
56
      display: none
57
</style>
58

59
<script is:inline>
60
    function initBackToTop() {
61
        const backToTopBtn = document.getElementById("back-to-top-btn");
62
        if (!backToTopBtn) return;
63

64
        backToTopBtn.onclick = () => {
65
            window.scroll({top: 0, behavior: 'smooth'});
66
        };
67

68
        const handleScroll = () => {
69
            if (window.scrollY > 300) {
70
                backToTopBtn.classList.add("show");
71
            } else {
72
                backToTopBtn.classList.remove("show");
73
            }
74
        };
75

76
        window.addEventListener("scroll", handleScroll);
77

78
        setTimeout(() => {
79
            handleScroll();
80
        }, 100);
81
    }
82

83
    initBackToTop();
84

85
    document.addEventListener('astro:page-load', initBackToTop);
86
</script>

注意，由于我没有使用音乐播放器，便将按钮的位置下移了一部分，请按你的需求自行更改 .back-to-top-btn 中 bottom 和 right 的值。

添加 FloatingTOC 按钮的淡入淡出#

问题#

我比较喜欢悬浮按钮模式的目录，但是居然又没有任何动画！并且，如果在主页的底部点进一篇文章的瞬间，统计阅读的进度条会莫名其妙抽风，真的让人忍不了…

于是又定位到组件 /src/components/control/FloatingTOC.astro，开始爆改…

解决方法#

添加了跟 BackToTop 按钮一样的淡入淡出动画（替换为 hasContent 判断逻辑实现），可以选择将下面的代码直接替换 FloatingTOC.astro：

1
---
2
import { Icon } from "astro-icon/components";
3
import { siteConfig } from "../../config";
4

5
const tocDepth = siteConfig.toc.depth;
6
const useJapaneseBadge = siteConfig.toc.useJapaneseBadge;
7
---
8

9
<div
10
    class="floating-toc-wrapper"
11
    data-depth={tocDepth}
12
    data-japanese-badge={useJapaneseBadge}
13
>
14
    <button
15
        id="floating-toc-btn"
16
        class="floating-toc-btn btn-card"
17
        aria-label="Table of Contents"
18
    >
19
        <svg
20
            class="progress-ring"
21
            width="100%"
22
            height="100%"
23
            viewBox="0 0 100 100"
24
        >
25
            <circle
26
                class="progress-ring-circle"
27
                cx="50"
28
                cy="50"
29
                r="40"
30
                fill="transparent"></circle>
31
        </svg>
32
        <div class="btn-icon">
33
            <Icon
34
                name="material-symbols:format-list-bulleted-rounded"
35
                class="text-2xl"
36
            />
37
        </div>
38
    </button>
39
    <div id="floating-toc-panel" class="floating-toc-panel">
40
        <div class="floating-toc-panel-content" id="floating-toc-content"></div>
41
    </div>
42
</div>
43

44
<style>
45
    .floating-toc-wrapper {
46
        position: fixed;
47
        right: 1rem;
48
        bottom: 8rem;
49
        z-index: 50;
50

51
        opacity: 0;
52
        transform: scale(0.9);
53
        pointer-events: none;
54

55
        transition: all 0.3s ease-in-out;
56
    }
57

58
    .floating-toc-wrapper.show-widget {
59
        opacity: 1;
60
        transform: scale(1);
61
        pointer-events: auto;
62
    }
63

64
    .floating-toc-btn {
65
        width: 3.75rem;
66
        height: 3.75rem;
67
        border-radius: 1rem;
68
        display: flex;
69
        align-items: center;
70
        justify-content: center;
71
        color: var(--primary);
72
        position: relative;
73
        background: var(--card-bg);
74
        cursor: pointer;
75
    }
76

77
    .floating-toc-btn.active {
78
        background: var(--btn-card-bg-active);
79
    }
80

81
    .progress-ring {
82
        position: absolute;
83
        top: 0;
84
        left: 0;
85
        transform: rotate(-90deg);
86
        pointer-events: none;
87
        z-index: 0;
88
    }
89

90
    .progress-ring-circle {
91
        stroke: var(--primary);
92
        stroke-width: 5;
93
        stroke-dasharray: 251.2;
94
        stroke-dashoffset: 251.2;
95
        transition: stroke-dashoffset 0.1s linear;
96
        stroke-linecap: round;
97
    }
98

99
    .btn-icon {
100
        z-index: 1;
101
        position: relative;
102
    }
103

104
    .floating-toc-panel {
105
        position: absolute;
106
        bottom: 4.5rem;
107
        right: 0;
108
        width: 18rem;
109
        max-height: 60vh;
110
        background: var(--card-bg);
111
        border: 1px solid var(--line-color);
112
        border-radius: 1rem;
113
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
114
        overflow: hidden;
115
        opacity: 0;
116
        visibility: hidden;
117
        transform: translateY(10px) scale(0.95);
118
        transition: all 0.2s ease;
119
        pointer-events: none;
120
    }
121

122
    .floating-toc-panel.show {
123
        opacity: 1;
124
        visibility: visible;
125
        transform: translateY(0) scale(1);
126
        pointer-events: auto;
127
    }
128

129
    .floating-toc-panel-content {
130
        padding: 0.75rem;
131
        max-height: 60vh;
132
        overflow-y: auto;
133
        overflow-x: hidden;
134
    }
135

136
    .floating-toc-panel-content::-webkit-scrollbar {
137
        width: 4px;
138
    }
139

140
    .floating-toc-panel-content::-webkit-scrollbar-track {
141
        background: transparent;
142
    }
143

144
    .floating-toc-panel-content::-webkit-scrollbar-thumb {
145
        background: var(--line-color);
146
        border-radius: 2px;
147
    }
148

149
    @media (max-width: 1560px) {
150
        .floating-toc-btn {
151
            box-shadow:
152
                0 0 0 1px var(--btn-regular-bg),
153
                0 0 1em var(--btn-regular-bg);
154
        }
155
    }
156

157
    @media (max-width: 768px) {
158
        .floating-toc-wrapper {
159
            right: 2rem;
160
            bottom: 2rem;
161
        }
162

163
        .floating-toc-panel {
164
            width: 85vw;
165
            max-width: 20rem;
166
            right: 0;
167
            bottom: 4.5rem;
168
        }
169
    }
170

171
    :global(.floating-toc-item) {
172
        display: flex;
173
        align-items: center;
174
        padding: 0.5rem;
175
        color: var(--text-secondary);
176
        text-decoration: none;
177
        font-size: 0.9rem;
178
        line-height: 1.5;
179
        border-radius: 0.5rem;
180
        transition: all 0.2s;
181
    }
182

183
    :global(.floating-toc-item:hover) {
184
        background-color: var(--btn-regular-bg);
185
        color: var(--primary);
186
    }
187

188
    :global(.floating-toc-item.active) {
189
        background-color: var(--btn-card-bg-active);
190
        color: var(--primary);
191
        font-weight: 500;
192
    }
193

194
    :global(.floating-toc-badge) {
195
        display: inline-flex;
196
        align-items: center;
197
        justify-content: center;
198
        width: 1.25rem;
199
        height: 1.25rem;
200
        background: var(--btn-regular-bg);
201
        color: var(--primary);
202
        border-radius: 0.25rem;
203
        font-size: 0.75rem;
204
        font-weight: bold;
205
        margin-right: 0.5rem;
206
        flex-shrink: 0;
207
    }
208

209
    :global(.floating-toc-dot) {
210
        width: 0.5rem;
211
        height: 0.5rem;
212
        background: var(--line-divider);
213
        border-radius: 50%;
214
        margin-right: 0.75rem;
215
        margin-left: 0.375rem;
216
        flex-shrink: 0;
217
    }
218

219
    :global(.floating-toc-dot-small) {
220
        width: 0.35rem;
221
        height: 0.35rem;
222
        background: var(--line-divider);
223
        border-radius: 50%;
224
        margin-right: 0.75rem;
225
        margin-left: 0.45rem;
226
        flex-shrink: 0;
227
    }
228

229
    :global(.floating-toc-item.active .floating-toc-dot),
230
    :global(.floating-toc-item.active .floating-toc-dot-small) {
231
        background: var(--primary);
232
    }
233

234
    :global(.floating-toc-text) {
235
        overflow: hidden;
236
        text-overflow: ellipsis;
237
        white-space: nowrap;
238
    }
239
</style>
240

241
<script>
242
    class FloatingTOC {
243
        private btn: HTMLElement | null;
244
        private panel: HTMLElement | null;
245
        private content: HTMLElement | null;
246
        private wrapper: HTMLElement | null;
247
        private isOpen = false;
248
        private observer: MutationObserver | null = null;
249
        private headings: HTMLElement[] = [];
250
        private hasContent = false;
251

252
        constructor() {
253
            this.btn = document.getElementById("floating-toc-btn");
254
            this.panel = document.getElementById("floating-toc-panel");
255
            this.content = document.getElementById("floating-toc-content");
256
            this.wrapper = document.querySelector(".floating-toc-wrapper");
257

258
            this.init();
259
        }
260

261
        private init() {
262
            const onScroll = () => {
263
                this.updateProgress();
264
                this.updateActiveHeading();
265
                this.checkVisibility();
266
            };
267

268
            window.addEventListener("scroll", onScroll, { passive: true });
269

270
            window.addEventListener(
271
                "resize",
272
                () => {
273
                    this.updateActiveHeading();
274
                    this.updateProgress();
275
                },
276
                { passive: true },
277
            );
278

279
            this.bindEvents();
280
            this.generateTOC();
281
            this.observeContent();
282
            this.updateProgress();
283

284
            setTimeout(() => {
285
                this.checkVisibility();
286
            }, 100);
287
        }
288

289
        private checkVisibility() {
290
            if (!this.wrapper) return;
291

292
            if (this.hasContent) {
293
                this.wrapper.classList.add("show-widget");
294
            } else {
295
                this.wrapper.classList.remove("show-widget");
296
            }
297
        }
298

299
        private observeContent() {
300
            const contentWrapper = document.getElementById("post-container");
301
            if (contentWrapper) {
302
                this.observer = new MutationObserver(() => {
303
                    this.generateTOC();
304
                    this.updateProgress();
305
                });
306
                this.observer.observe(contentWrapper, {
307
                    childList: true,
308
                    subtree: true,
309
                });
310
            }
311
        }
312

313
        private updateProgress() {
314
            if (!this.btn) return;
315

316
            const scrollTop =
317
                window.scrollY || document.documentElement.scrollTop;
318
            const docHeight =
319
                document.documentElement.scrollHeight -
320
                document.documentElement.clientHeight;
321
            const scrollPercent = docHeight > 0 ? scrollTop / docHeight : 0;
322

323
            const circle = this.btn.querySelector(
324
                ".progress-ring-circle",
325
            ) as SVGCircleElement;
326
            if (circle) {
327
                const radius = circle.r.baseVal.value;
328
                const circumference = radius * 2 * Math.PI;
329
                const offset = Math.max(
330
                    0,
331
                    Math.min(
332
                        circumference,
333
                        circumference - scrollPercent * circumference,
334
                    ),
335
                );
336
                circle.style.strokeDashoffset = offset.toString();
337
            }
338
        }
339

340
        private updateActiveHeading() {
341
            if (!this.content || this.headings.length === 0) return;
342
            const scrollY = window.scrollY;
343
            const offsetTop = 150;
344

345
            let activeIndex = -1;
346
            for (let i = 0; i < this.headings.length; i++) {
347
                const heading = this.headings[i];
348
                if (
349
                    heading.getBoundingClientRect().top + scrollY <
350
                    scrollY + offsetTop
351
                ) {
352
                    activeIndex = i;
353
                } else {
354
                    break;
355
                }
356
            }
357

358
            const links = Array.from(
359
                this.content.querySelectorAll(".floating-toc-item"),
360
            );
361
            links.forEach((link, index) => {
362
                if (index === activeIndex) {
363
                    link.classList.add("active");
364
                    if (this.isOpen) {
365
                        const panelContent = this.content;
366
                        if (panelContent) {
367
                            const linkEl = link as HTMLElement;
368
                            const panelRect =
369
                                panelContent.getBoundingClientRect();
370
                            const linkRect = linkEl.getBoundingClientRect();
371
                            if (
372
                                linkRect.top < panelRect.top ||
373
                                linkRect.bottom > panelRect.bottom
374
                            ) {
375
                                linkEl.scrollIntoView({ block: "nearest" });
376
                            }
377
                        }
378
                    }
379
                } else {
380
                    link.classList.remove("active");
381
                }
382
            });
383
        }
384

385
        private generateTOC() {
386
            const container = document.getElementById("post-container");
387

388
            if (!container) {
389
                this.hasContent = false;
390
                this.wrapper?.classList.remove("active-toc");
391
                this.wrapper?.classList.add("no-toc");
392
                this.checkVisibility();
393
                return;
394
            }
395

396
            const allHeadings = container.querySelectorAll(
397
                "h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]",
398
            );
399

400
            if (allHeadings.length === 0) {
401
                this.hasContent = false;
402
                this.wrapper?.classList.remove("active-toc");
403
                this.wrapper?.classList.add("no-toc");
404
                this.headings = [];
405
                this.checkVisibility();
406
                return;
407
            }
408

409
            this.hasContent = true;
410
            this.wrapper?.classList.remove("no-toc");
411
            this.wrapper?.classList.add("active-toc");
412
            this.headings = [];
413

414
            const maxLevel = parseInt(this.wrapper?.dataset.depth || "3");
415
            const useJapaneseBadge =
416
                this.wrapper?.dataset.japaneseBadge === "true";
417

418
            const japaneseKatakana = [ "ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", "サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", "ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ", "ヘ", "ホ" ];
419

420
            let minLevel = 6;
421
            allHeadings.forEach((h) => {
422
                const level = parseInt(h.tagName[1]);
423
                if (level < minLevel) minLevel = level;
424
            });
425

426
            let html = "";
427
            let h1Count = 0;
428
            allHeadings.forEach((heading) => {
429
                const level = parseInt(heading.tagName[1]);
430

431
                if (level >= minLevel + maxLevel) return;
432

433
                this.headings.push(heading as HTMLElement);
434

435
                const indent = (level - minLevel) * 1;
436
                let badge = "";
437

438
                if (level === minLevel) {
439
                    h1Count++;
440
                    const badgeText =
441
                        useJapaneseBadge &&
442
                        h1Count - 1 < japaneseKatakana.length
443
                            ? japaneseKatakana[h1Count - 1]
444
                            : h1Count.toString();
445
                    badge = `<span class="floating-toc-badge">${badgeText}</span>`;
446
                } else if (level === minLevel + 1) {
447
                    badge = '<span class="floating-toc-dot"></span>';
448
                } else {
449
                    badge = '<span class="floating-toc-dot-small"></span>';
450
                }
451

452
                const text = (heading.textContent || "").replace(/#+\s*$/, "");
453
                html += `<a href="#${heading.id}" class="floating-toc-item" style="padding-left: ${0.5 + indent}rem" data-level="${level - minLevel}">${badge}<span class="floating-toc-text">${text}</span></a>`;
454
            });
455

456
            if (this.content) {
457
                this.content.innerHTML = html;
458
            }
459

460
            this.checkVisibility();
461
            this.updateActiveHeading();
462
        }
463

464
        private bindEvents() {
465
            this.btn?.addEventListener("click", (e) => {
466
                e.stopPropagation();
467
                this.toggle();
468
            });
469
            document.addEventListener("click", (e) => {
470
                if (this.isOpen && !this.wrapper?.contains(e.target as Node)) {
471
                    this.close();
472
                }
473
            });
474
            this.content?.addEventListener("click", (e) => {
475
                const link = (e.target as HTMLElement).closest("a");
476
                if (link) {
477
                    e.preventDefault();
478
                    const id = link.getAttribute("href")?.slice(1);
479
                    if (id) {
480
                        const element = document.getElementById(id);
481
                        if (element) {
482
                            const top =
483
                                element.getBoundingClientRect().top +
484
                                window.scrollY -
485
                                80;
486
                            window.scrollTo({ top, behavior: "smooth" });
487
                            this.close();
488
                        }
489
                    }
490
                }
491
            });
492
            document.addEventListener("keydown", (e) => {
493
                if (e.key === "Escape" && this.isOpen) this.close();
494
            });
495
            if ((window as any).swup) {
496
                (window as any).swup.hooks.on("page:view", () => {
497
                    setTimeout(() => this.reinit(), 200);
498
                });
499
            }
500
        }
501

502
        private toggle() {
503
            this.isOpen ? this.close() : this.open();
504
        }
505

506
        private open() {
507
            this.isOpen = true;
508
            this.panel?.classList.add("show");
509
            this.btn?.classList.add("active");
510
            this.wrapper?.classList.add("active");
511
        }
512

513
        private close() {
514
            this.isOpen = false;
515
            this.panel?.classList.remove("show");
516
            this.btn?.classList.remove("active");
517
            this.wrapper?.classList.remove("active");
518
        }
519

520
        private reinit() {
521
            if (this.observer) {
522
                this.observer.disconnect();
523
            }
524
            this.close();
525
            this.generateTOC();
526
            this.observeContent();
527
            this.updateProgress();
528
        }
529
    }
530

531
    document.addEventListener("DOMContentLoaded", () => new FloatingTOC());
532
    document.addEventListener("swup:page:view", () => new FloatingTOC());
533
    document.addEventListener('astro:page-load', () => new FloatingTOC());
534
</script>

同样注意，按需求更改：

.floating-toc-panel 中 right 和 bottom 的值。
@media (max-width: 768px) （手机端）的 .floating-toc-wrapper 中 right 和 bottom 的值。

添加代码块折叠控制#

问题#

Mizuki 虽然提供了代码块折叠功能，但所有代码块默认都是展开的。对于一些很长的代码示例，在手机端访问时会出现卡顿现象，同时也不便于浏览。

解决方法#

添加了一个自定义插件来支持通过代码块的元数据控制默认折叠状态，可以在代码块的语言标识后添加 {collapse} 来让代码块默认折叠。

实现步骤#

创建插件文件 /src/plugins/expressive-code/collapse-metadata.ts：

1
import { definePlugin } from "@expressive-code/core";
2

3
export function pluginCollapseMetadata() {
4
    return definePlugin({
5
        name: "Collapse Metadata",
6
        hooks: {
7
            postprocessRenderedBlock: ({ codeBlock, renderData }) => {
8
                // 检查元数据中是否包含 collapse 标记
9
                const meta = codeBlock.meta || "";
10
                const shouldCollapse = meta.includes("collapse");
11

12
                if (shouldCollapse && renderData.blockAst.properties) {
13
                    // 添加 data-collapse 属性到代码块
14
                    renderData.blockAst.properties["data-collapse"] = "true";
15
                }
16
            },
17
        },
18
    });
19
}

修改 astro.config.mjs，导入并注册插件：

1
// 在文件顶部添加导入
2
import { pluginCollapseMetadata } from "./src/plugins/expressive-code/collapse-metadata.ts";
3

4
// 在 expressiveCode 配置中添加插件
5
expressiveCode({
6
    themes: ["github-light", "github-dark"],
7
    plugins: [
8
        pluginCollapsibleSections(),
9
        pluginLineNumbers(),
10
        pluginLanguageBadge(),
11
        pluginCustomCopyButton(),
12
        pluginCollapseMetadata(),
13
    ],
14
    // ...
15
})

修改 /src/scripts/code-collapse.js 的 enhanceCodeBlock 方法：

1
enhanceCodeBlock(codeBlock) {
2
    const frame = codeBlock.querySelector(".frame");
3
    if (!frame) {
4
        this.log("No frame found in code block, skipping");
5
        return;
6
    }
7

8
    if (frame.classList.contains("has-title")) {
9
        this.log("Code block has title, skipping collapse feature");
10
        return;
11
    }
12

13
    this.log("Adding collapse feature to code block");
14

15
    // 检查是否有 data-collapse 属性来决定默认状态
16
    const shouldCollapse = codeBlock.hasAttribute("data-collapse") ||
17
                           frame.hasAttribute("data-collapse");
18

19
    if (shouldCollapse) {
20
        this.log("Code block has collapse attribute, defaulting to collapsed");
21
        codeBlock.classList.add("collapsible", "collapsed");
22
    } else {
23
        codeBlock.classList.add("collapsible", "expanded");
24
    }
25

26
    const toggleBtn = this.createToggleButton();
27
    frame.appendChild(toggleBtn);
28

29
    this.bindToggleEvents(codeBlock, toggleBtn);
30
}

现在可以在任何代码块后添加 {collapse} 来让它默认折叠。这样可以让文章更加简洁，同时保留了完整的代码示例供需要的读者查看。

使用方法#

在 Markdown 中，只需在代码块的语言标识后添加 {collapse} 即可：

1
```js {collapse}
2
// 这个代码块默认会折叠
3
function example() {
4
  console.log("This code block is collapsed by default");
5
}
6
```

添加相册大小显示#

问题#

一个相册往往有大有小，为了不让读者的流量爆炸，所以还是添加一个标识来提醒一下吧（

解决方法#

在 /src/types/album.ts 的 AlbumGroup 接口中添加大小字段：

1
export interface AlbumGroup {
2
    id: string;
3
    title: string;
4
    description?: string;
5
    cover: string;
6
    date: string;
7
    location?: string;
8
    tags?: string[];
9
    layout?: "grid" | "masonry";
10
    columns?: number;
11
    photos: Photo[];
12
    totalsize?: string;
13
}

在 /src/utils/album-scanner.ts 中添加读取大小的逻辑：

1
// 构建相册对象
2
return {
3
    id: folderName,
4
    title: info.title || folderName,
5
    description: info.description || "",
6
    cover,
7
    date: info.date || new Date().toISOString().split("T")[0],
8
    location: info.location || "",
9
    tags: info.tags || [],
10
    layout: info.layout || "grid",
11
    columns: info.columns || 3,
12
    photos,
13
    totalsize: info.totalsize || undefined,
14
};

修改 /src/pages/albums.astro 中的 相册网格 - 封面图片 部分以显示大小：

1
<!-- 相册网格 -->
2
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
3
  {albumsData.map(album => (
4
    <article
5
      class="album-card group bg-white dark:bg-neutral-900 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 border border-neutral-200 dark:border-neutral-800"
6
    >
7
      <a href={`/albums/${album.id}/`} class="block">
8
        <!-- 封面图片 -->
9
        <div class="aspect-[4/3] overflow-hidden bg-neutral-100 dark:bg-neutral-700 relative">
10
          <img
11
            src={album.cover}
12
            alt={album.title}
13
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
14
            loading="lazy"
15
          />
16
          {album.totalsize && (
17
            <div class="absolute top-3 right-3 bg-black/30 dark:bg-black/70 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white text-xs font-medium shadow-lg">
18
              {album.totalsize}
19
            </div>
20
          )}
21
        </div>
22
        // ...

使用方法#

可以在 info.json 中添加 totalsize 字段来显示相册大小，如：

1
{
2
  "title": "Album",
3
  "description": "None",
4
  "date": "2026-01-01",
5
  "totalsize": "125 MB" // 相册大小
6
}

效果如下：

002

チャ屋

前言#

BackToTop 按钮修复#

问题#

原因#

解决方法#

添加 FloatingTOC 按钮的淡入淡出#

问题#

解决方法#

添加代码块折叠控制#

问题#

解决方法#

实现步骤#

使用方法#

添加相册大小显示#

问题#

解决方法#

使用方法#