MY BLOG

使用Firefly模板搭建个人网站

Tue, 08 Sep 2026 00:00:00 GMT

一、环境配置#

需要安装Node.js、Pnpm、Git、Github Desktop、VS Code

1.下载 Node.js#

下载地址：https://nodejs.org/zh-cn/download

2.安装 Pnpm#

在powershell中执行 npm install -g pnpm

3.安装 Git#

下载地址：https://git-scm.cn/install/windows

4.安装 Github Desktop#

下载地址：https://desktop.github.com/download/

5.下载 VS Code#

下载地址：https://code.visualstudio.com/Download?_exp_download=fb315fc982

二、Firefly库clone#

1.搜索Firefly Github库#

链接：https://github.com/CuteLeaf/Firefly

2.fork新建库#

3.本地创建文件夹-在文件夹中右键然后点击 Open Git Bash here#

4.clone库#

1
-git clone [新建库链接]

(注：如下载失败可能是因为网络超时，可在Git Bash中配置w网络代理）

1
-git config --global http.proxy [代理地址]

6.网站预览#

打开本地服务器，获得localhost。

1
-pnpm dev

在浏览器中输入localhost，打开博客网站进行效果预览。

三、使用VSCode进行配置#

1.使用VSCode打开项目目录#

2.找到配置文件#

文件路径：src/config/README.md

3.自定义配置文档#

文档地址：https://docs-firefly.cuteleaf.cn/zh/guide/site.html

4.文章编写文档#

文档地址：https://docs-firefly.cuteleaf.cn/zh/guide/writing.html

四、在cloudflare部署上线#

1.修改根目录文件wrangler.jsonc中的信息#

（1）name改为项目名称”Leo”#

（2）compatibility_date同步上传时间。#

2.在VScode中将项目git托管更新#

打开终端执行三条命令

(1)暂存所有修改文件#

Terminal window

1
git add .

(2)创建版本快照命名”Leo”#

Terminal window

1
git commit -m "Leo"

(3)将快照推送到 GitHub 远程仓库#

Terminal window

1
git push

3.将git项目上传Cloudflare进行部署#

Cloudflare网址:https://workers.cloudflare.com/

1.在左侧导航栏中选择 Build-Compute-Workers&Pages#

2.点击创建部署，绑定github项目进行部署#

（注：部署上传文件上限为25MB，超出会报错）

Claude Code常用指令合集

Sun, 06 Sep 2026 00:00:00 GMT

1.常用#

/resume 恢复对话
/cwd （路径）切换工作路径
/rewind 回滚
/effort 更换思考强度
/init 生成markdown文件

2.上下文管理#

/context 查看上下文
/compact 压缩上下文
/clear 清除上下文

3.扩展管理#

/skills 查看skill
/agents agent管理
/plugins 插件管理

4.快捷键#

Ctrl+J 换行
Shift+Tap 切换模式
@ agents/文件名选中引入文件

在Astro网站添加番茄闹钟功能

Sat, 05 Sep 2026 00:00:00 GMT

给网站做一个番茄闹钟功能，出现在首页右边侧边栏中，每个番茄时间为25分钟，休息5分钟，并且可以指定目标番茄数量，番茄专注和开始还是番茄数量达标都有音效提示，但是番茄数量达标使用的音效不一样。

一、新建计时器组件（核心逻辑）#

创建路径:src/components/widget/Pomodoro.svelte

1
  <script lang="ts">
2
        /**
3
         * 番茄钟组件 - 首页右侧边栏
4
         * 专注时长默认 25 分钟（可用 +/− 按钮按 5 分钟一档手动调节），休息 5 分钟
5
         * 可设置目标番茄数；状态存 localStorage，刷新后自动恢复
6
         */
7
        import { onMount } from "svelte";
8

9
        // 专注/休息默认时长（分钟）
10
        const FOCUS_MINUTES = 25;
11
        const BREAK_MINUTES = 5;
12
        const BREAK_SECONDS = BREAK_MINUTES * 60;
13

14
        // 手动调节专注时长的档位
15
        const STEP = 5; // 每次加减 5 分钟
16
        const MIN_FOCUS = 5; // 最短 5 分钟
17
        const MAX_FOCUS = 120; // 最长 120 分钟
18

19
        const STORAGE_KEY = "firefly-pomodoro";
20

21
        type Mode = "idle" | "focus" | "break";
22

23
        let mode: Mode = $state("idle"); // 当前模式：idle（空闲）/ focus（专注）/ break（休息）
24
        // 用户自定义的专注时长（分钟），默认 25
25
        let focusMinutes = $state(FOCUS_MINUTES); // 自定义专注时长（分钟）
26
        let secondsLeft = $state(FOCUS_MINUTES * 60);
27
        let running = $state(false); // 是否正在倒计时
28
        let completed = $state(0); // 已完成番茄数
29
        let target = $state(4); // 默认目标数量
30

31
        let timer: ReturnType<typeof setInterval> | null = null;
32
        let deadline = 0; // 本轮结束时刻（时间戳，毫秒），用于跨刷新精确计时
33

34
        // ---------- 音效（Web Audio API 生成，无需音频文件） ----------
35
        let audioCtx: AudioContext | null = null;
36

37
        function getAudioContext(): AudioContext {
38
                if (!audioCtx) {
39
                        audioCtx = new AudioContext();
40
                }
41
                if (audioCtx.state === "suspended") {
42
                        audioCtx.resume();
43
                }
44
                return audioCtx;
45
        }
46

47
        function playTone(
48
                freq: number,
49
                startAt: number,
50
                duration: number,
51
                type: OscillatorType = "sine",
52
                volume = 0.3,
53
        ) {
54
                const ctx = getAudioContext();
55
                const osc = ctx.createOscillator();
56
                const gain = ctx.createGain();
57
                osc.type = type;
58
                osc.frequency.value = freq;
59
                const t = ctx.currentTime + startAt;
60
                gain.gain.setValueAtTime(0.0001, t);
61
                gain.gain.exponentialRampToValueAtTime(volume, t + 0.02);
62
                gain.gain.exponentialRampToValueAtTime(0.0001, t + duration);
63
                osc.connect(gain);
64
                gain.connect(ctx.destination);
65
                osc.start(t);
66
                osc.stop(t + duration + 0.05);
67
        }
68

69
        // 专注/休息开始：两声短促的“叮”
70
        function playStartSound() {
71
                playTone(880, 0, 0.15, "sine");
72
                playTone(1174.66, 0.15, 0.2, "sine");
73
        }
74

75
        // 达成目标：上升的胜利和弦（明显不同）
76
        function playGoalSound() {
77
                [523.25, 659.25, 783.99, 1046.5].forEach((f, i) => {
78
                        playTone(f, i * 0.15, 0.25, "triangle", 0.35);
79
                });
80
        }
81

82
        // ---------- 时长调节 ----------
83
        // 把数值约束在 [5, 120] 之间
84
        function clampFocus(v: number): number {
85
                if (!Number.isFinite(v)) return FOCUS_MINUTES;
86
                return Math.min(MAX_FOCUS, Math.max(MIN_FOCUS, v));
87
        }
88

89
        // 每次点击 +/− 调整 5 分钟（只在空闲状态可用）
90
        function adjustFocus(delta: number) {
91
                if (mode !== "idle") return;
92
                const next = clampFocus(focusMinutes + delta);
93
                if (next === focusMinutes) return;
94
                focusMinutes = next;
95
                secondsLeft = next * 60; // 大号倒计时同步刷新
96
                saveState();
97
        }
98

99
        // ---------- 持久化 ----------
100
        function saveState() {
101
                try {
102
                        localStorage.setItem(
103
                                STORAGE_KEY,
104
                                JSON.stringify({
105
                                        mode,
106
                                        running,
107
                                        deadline: running ? deadline : 0,
108
                                        remaining: running ? 0 : secondsLeft,
109
                                        completed,
110
                                        target,
111
                                        focusMinutes,
112
                                }),
113
                        );
114
                } catch {
115
                        // 忽略隐私模式等写入失败
116
                }
117
        }
118

119
        function loadState() {
120
                try {
121
                        const raw = localStorage.getItem(STORAGE_KEY);
122
                        if (!raw) return;
123
                        const s = JSON.parse(raw);
124
                        mode = s.mode === "focus" || s.mode === "break" ? s.mode : "idle";
125
                        completed = Math.max(0, Number(s.completed) || 0);
126
                        target = Math.max(1, Number(s.target) || 1);
127
                        const restoredMinutes = Number(s.focusMinutes);
128
                        focusMinutes = Number.isFinite(restoredMinutes)
129
                                ? clampFocus(restoredMinutes)
130
                                : FOCUS_MINUTES;
131

132
                        if (s.running && typeof s.deadline === "number" && s.deadline > 0) {
133
                                const remain = Math.ceil((s.deadline - Date.now()) / 1000);
134
                                if (remain > 0) {
135
                                        // 还没到点：按真实剩余时间继续
136
                                        secondsLeft = remain;
137
                                        deadline = s.deadline;
138
                                        startClock();
139
                                } else {
140
                                        // 页面关闭期间这一轮已经走完：结算一次，下一阶段从当前时刻重新开始
141
                                        restoreAfterElapsed();
142
                                }
143
                        } else {
144
                                // 空闲状态直接显示完整时长；暂停状态沿用剩余秒数
145
                                secondsLeft =
146
                                        mode === "idle"
147
                                                ? focusMinutes * 60
148
                                                : Number(s.remaining) > 0
149
                                                        ? Number(s.remaining)
150
                                                        : focusMinutes * 60;
151
                        }
152
                } catch {
153
                        // 读取失败则使用默认状态
154
                }
155
        }
156

157
        function restoreAfterElapsed() {
158
                if (mode === "focus") {
159
                        completed += 1;
160
                        if (completed >= goal) {
161
                                mode = "idle";
162
                                secondsLeft = focusMinutes * 60;
163
                        } else {
164
                                mode = "break";
165
                                startTimer(BREAK_SECONDS); // 休息从现在重新计时
166
                        }
167
                } else if (mode === "break") {
168
                        mode = "focus";
169
                        startTimer(focusMinutes * 60); // 用当前自定义的专注时长
170
                }
171
                saveState();
172
        }
173

174
        // ---------- 计时器 ----------
175
        function startClock() {
176
                if (timer) clearInterval(timer);
177
                timer = setInterval(tick, 250);
178
                running = true;
179
        }
180

181
        function stopClock() {
182
                if (timer) {
183
                        clearInterval(timer);
184
                        timer = null;
185
                }
186
                running = false;
187
        }
188

189
        function startTimer(durationSec: number) {
190
                deadline = Date.now() + durationSec * 1000;
191
                secondsLeft = durationSec;
192
                startClock();
193
                saveState();
194
        }
195

196
        function tick() {
197
                const remain = Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
198
                if (remain !== secondsLeft) {
199
                        secondsLeft = remain;
200
                        saveState(); // 每秒落盘一次，刷新到哪一秒都能续上
201
                }
202
                if (remain <= 0) {
203
                        handleFinished();
204
                }
205
        }
206

207
        function handleFinished() {
208
                stopClock();
209
                if (mode === "focus") {
210
                        completed += 1;
211
                        if (completed >= goal) {
212
                                playGoalSound();
213
                                mode = "idle";
214
                                secondsLeft = focusMinutes * 60;
215
                        } else {
216
                                playStartSound(); // 休息开始
217
                                mode = "break";
218
                                startTimer(BREAK_SECONDS);
219
                        }
220
                } else if (mode === "break") {
221
                        playStartSound(); // 专注开始
222
                        mode = "focus";
223
                        startTimer(focusMinutes * 60); // 用当前自定义的专注时长
224
                }
225
                saveState();
226
        }
227

228
        // 开始专注（从空闲状态）
229
        function startFocus() {
230
                playStartSound();
231
                completed = 0;
232
                mode = "focus";
233
                startTimer(focusMinutes * 60);
234
        }
235

236
        // 暂停 / 继续
237
        function togglePause() {
238
                if (mode === "idle") return;
239
                if (running) {
240
                        secondsLeft = Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
241
                        stopClock();
242
                        saveState();
243
                } else {
244
                        startTimer(secondsLeft);
245
                }
246
        }
247

248
        // 重置
249
        function reset() {
250
                stopClock();
251
                mode = "idle";
252
                secondsLeft = focusMinutes * 60;
253
                completed = 0;
254
                saveState();
255
        }
256

257
        const goal = $derived(Math.max(1, Math.floor(Number(target) || 1)));
258

259
        const modeLabel = $derived(
260
                mode === "focus" ? "专注中" : mode === "break" ? "休息中" : "空闲",
261
        );
262

263
        const timeClass = $derived(
264
                mode === "focus"
265
                        ? "text-(--primary)"
266
                        : mode === "break"
267
                                ? "text-emerald-500"
268
                                : "text-neutral-900 dark:text-neutral-100",
269
        );
270

271
        function format(sec: number): string {
272
                const m = Math.floor(sec / 60);
273
                const s = sec % 60;
274
                return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
275
        }
276

277
        // 挂载时恢复状态；页面隐藏/关闭时再存一次，保证刷新不丢
278
        onMount(() => {
279
                loadState();
280

281
                const persistNow = () => saveState();
282
                document.addEventListener("visibilitychange", persistNow);
283
                window.addEventListener("pagehide", persistNow);
284

285
                return () => {
286
                        stopClock();
287
                        document.removeEventListener("visibilitychange", persistNow);
288
                        window.removeEventListener("pagehide", persistNow);
289
                };
290
        });
291
  </script>
292

293
  <div class="flex flex-col gap-3">
294
        <div class="text-center">
295
                <div class="mb-1 text-xs text-neutral-500 dark:text-neutral-400">
296
                        {modeLabel}
297
                </div>
298
                <div class="text-4xl font-black tabular-nums {timeClass}">
299
                        {format(secondsLeft)}
300
                </div>
301
        </div>
302

303
        {#if mode === "idle"}
304
                <!-- 专注时长调节：只在空闲时显示，点击 ±5 分钟 -->
305
                <div class="flex items-center justify-center gap-2 text-sm">
306
                        <span class="text-neutral-500 dark:text-neutral-400">专注时长</span>
307
                        <button
308
                                class="btn-plain flex h-8 w-8 items-center justify-center rounded-lg text-lg font-bold
309
                                        leading-none active:scale-90 disabled:pointer-events-none disabled:opacity-40"
310
                                onclick={() => adjustFocus(-STEP)}
311
                                disabled={focusMinutes <= MIN_FOCUS}
312
                                aria-label="减少专注时长 5 分钟"
313
                        >
314
                                −
315
                        </button>
316
                        <span
317
                                class="w-10 text-center font-bold tabular-nums
318
                                        text-neutral-900 dark:text-neutral-100"
319
                        >
320
                                {focusMinutes}
321
                        </span>
322
                        <button
323
                                class="btn-plain flex h-8 w-8 items-center justify-center rounded-lg text-lg font-bold
324
                                        leading-none active:scale-90 disabled:pointer-events-none disabled:opacity-40"
325
                                onclick={() => adjustFocus(STEP)}
326
                                disabled={focusMinutes >= MAX_FOCUS}
327
                                aria-label="增加专注时长 5 分钟"
328
                        >
329
                                +
330
                        </button>
331
                        <span class="text-neutral-500 dark:text-neutral-400">分钟</span>
332
                </div>
333
        {/if}
334

335
        <div class="flex items-center justify-center gap-2 text-sm">
336
                <span class="text-neutral-500 dark:text-neutral-400">目标</span>
337
                <input
338
                        type="number"
339
                        min="1"
340
                        max="99"
341
                        bind:value={target}
342
                        class="w-14 rounded-lg border border-neutral-300 bg-transparent px-2 py-1
343
                                text-center text-sm text-neutral-900 dark:border-neutral-600 dark:text-neutral-100"
344
                />
345
                <span class="text-neutral-500 dark:text-neutral-400">个番茄</span>
346
        </div>
347

348
        <div class="flex items-center justify-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
349
                <span>已完成</span>
350
                <span class="font-bold text-(--primary)">{completed}</span>
351
                <span>/ {goal}</span>
352
                <span>🍅</span>
353
        </div>
354

355
        <div class="flex items-center justify-center gap-2">
356
                {#if mode === "idle"}
357
                        <button
358
                                class="btn-regular rounded-lg h-9 px-4 font-bold active:scale-95"
359
                                onclick={startFocus}
360
                        >
361
                                开始专注
362
                        </button>
363
                {:else}
364
                        <button
365
                                class="btn-regular rounded-lg h-9 px-4 font-bold active:scale-95"
366
                                onclick={togglePause}
367
                        >
368
                                {running ? "暂停" : "继续"}
369
                        </button>
370
                        <button
371
                                class="btn-plain rounded-lg h-9 px-3 font-bold active:scale-95"
372
                                onclick={reset}
373
                        >
374
                                重置
375
                        </button>
376
                {/if}
377
        </div>
378
  </div>

展开收起

二、新建挂件外壳（带标题的卡片）#

创建路径： src/components/widget/Pomodoro.astro

1
---
2
import WidgetLayout from "@/components/common/WidgetLayout.astro";
3
import Pomodoro from "@/components/widget/Pomodoro.svelte";
4
import type { WidgetComponentConfig } from "@/types/config";
5

6
interface Props {
7
      class?: string;
8
      style?: string;
9
      widgetConfig?: WidgetComponentConfig;
10
}
11

12
const { class: className, style, widgetConfig } = Astro.props;
13
const showTitle = widgetConfig?.showTitle !== false;
14
---
15

16
<WidgetLayout
17
      name="番茄钟"
18
      showTitle={showTitle}
19
      id="pomodoro"
20
      class={className}
21
      style={style}
22
>
23
      <Pomodoro client:visible />
24
</WidgetLayout>
25

26
---

展开收起

三、在 SideBar.astro 里注册组件#

文件路径： src/components/layout/SideBar.astro

改动 1 —— 顶部 import 区（第 8 行 import Music … 和第 9 行 import Profile … 之间）：#

1
import Pomodoro from "@/components/widget/Pomodoro.astro";

改动 2 —— componentMap 对象里（第 55 行 dynamic: Dynamic, 之后）：#

1
 pomodoro: Pomodoro,

四、在右侧栏配置里开启#

文件路径： src/config/sidebarConfig.ts

在 rightComponents 数组里，插到 dynamic （第 111 行）后、stats 前：#

1
{
2
                      // 组件类型：番茄钟组件
3
                      type: "pomodoro",
4
                      // 是否启用该组件
5
                      enable: true,
6
                      // 组件位置
7
                      position: "top",
8
                      // 是否在文章详情页显示（false = 文章页不显示，首页会显示）
9
                      showOnPostPage: false,
10
              },

网站的markdown写文章指南

Sun, 30 Aug 2026 00:00:00 GMT

文章路径：`D:\TOOL\AI\claude-code\projects\blog\template\Blog\src\content`#

第一部分 Frontmatter（元数据）#

>示例#

1
---
2
title: 网站的markdown写文章指南
3
published: 2026-08-30
4
description: "使用markdown写文章的常用功能和示例指南"
5
tags: [Markdown, guide]
6
category: 教程
7
password: "114514"
8
---

第二部分：正文内容#

常用语法#

语法	效果
`# 标题`	一级标题
`## 标题`	二级标题
`加粗`	加粗文字
`斜体`	斜体文字
`- 项目`	无序列表
`1. 项目`	有序列表
`>正文`	引用块
`代码`	行内代码
`==正文==`	高亮文字

第三部分：引用#

1.图片#

>示例#

1
![文字](图片路径)

2.文章#

>示例#

1
[[MYblog|（自定义内容）]]

>效果#

自定义内容

核心需求：制作一个个人的网站博客,使用Firefly网站博客模板部署

2026-08-29项目#Markdown#Project

第四部分：Mermaid 图表#

示例#

1
```mermaid
2
graph TD
3
    A[开始] --> B{条件检查}
4
    B -->|是| C[处理步骤 1]
5
    B -->|否| D[处理步骤 2]
6
    C --> E[子过程]
7
    D --> E
8
    subgraph E [子过程详情]
9
        E1[子步骤 1] --> E2[子步骤 2]
10
        E2 --> E3[子步骤 3]
11
    end
12
    E --> F{另一个决策}
13
    F -->|选项 1| G[结果 1]
14
    F -->|选项 2| H[结果 2]
15
    F -->|选项 3| I[结果 3]
16
    G --> J[结束]
17
    H --> J
18
    I --> J
19
```

展开收起

效果#

是

否

选项 1

选项 2

选项 3

子过程详情

子步骤 1

子步骤 2

子步骤 3

开始

条件检查

处理步骤 1

处理步骤 2

另一个决策

结果 1

结果 2

结果 3

结束

是

否

选项 1

选项 2

选项 3

子过程详情

子步骤 1

子步骤 2

子步骤 3

开始

条件检查

处理步骤 1

处理步骤 2

另一个决策

结果 1

结果 2

结果 3

结束

MY BLOG

使用Firefly模板搭建个人网站

一、环境配置#

1.下载 Node.js#

2.安装 Pnpm#

3.安装 Git#

4.安装 Github Desktop#

5.下载 VS Code#

二、Firefly库clone#

1.搜索Firefly Github库#

2.fork新建库#

3.本地创建文件夹-在文件夹中右键然后点击 Open Git Bash here#

4.clone库#

6.网站预览#

三、使用VSCode进行配置#

1.使用VSCode打开项目目录#

2.找到配置文件#

3.自定义配置文档#

4.文章编写文档#

四、在cloudflare部署上线#

1.修改根目录文件wrangler.jsonc中的信息#

（1）name改为项目名称”Leo”#

（2）compatibility_date同步上传时间。#

2.在VScode中将项目git托管更新#

(1)暂存所有修改文件#

(2)创建版本快照 命名”Leo”#

(3)将快照推送到 GitHub 远程仓库#

3.将git项目上传Cloudflare进行部署#

1.在左侧导航栏中选择 Build-Compute-Workers&Pages#

2.点击创建部署，绑定github项目进行部署#

Claude Code常用指令合集

1.常用#

2.上下文管理#

3.扩展管理#

4.快捷键#

在Astro网站添加番茄闹钟功能

一、新建计时器组件（核心逻辑）#

二、新建挂件外壳（带标题的卡片）#

三、在 SideBar.astro 里注册组件#

改动 1 —— 顶部 import 区（第 8 行 import Music … 和第 9 行 import Profile … 之间）：#

改动 2 —— componentMap 对象里（第 55 行 dynamic: Dynamic, 之后）：#

四、在右侧栏配置里开启#

在 rightComponents 数组里，插到 dynamic （第 111 行）后、stats 前：#

网站的markdown写文章指南

文章路径：D:\TOOL\AI\claude-code\projects\blog\template\Blog\src\content#

第一部分 Frontmatter（元数据）#

>示例#

第二部分：正文内容#

常用语法#

第三部分：引用#

1.图片#

>示例#

2.文章#

>示例#

>效果#

第四部分：Mermaid 图表#

示例#

效果#

(2)创建版本快照命名”Leo”#

文章路径：`D:\TOOL\AI\claude-code\projects\blog\template\Blog\src\content`#