Firefly 魔改指南 - JustPureH2O 的博客

“十年之约”页面#

在 src/pages/ 下新建文件 decennial.astro 并写入：

1
---
2
import MainGridLayout from "@/layouts/MainGridLayout.astro";
3
import I18nKey from "@/i18n/i18nKey";
4
import { i18n } from "@/i18n/translation";
5
import { Icon } from "astro-icon";
6
import { getCollection } from "astro:content";
7
import { siteConfig } from "@/config";
8

9
const allBlogPosts = await getCollection("posts", ({ data }) => {
10
  return import.meta.env.PROD ? data.draft !== true : true;
11
});
12

13
let words = 0;
14
for (let post of allBlogPosts) {
15
  if (post.body) {
16
    let text = post.body
17
      .replace(/```[\s\S]*?```/g, "")
18
      .replace(/`[^`]*`/g, "")
19
      .replace(/\s+/g, " ")
20
      .trim();
21

22
    const chineseChars = text.match(/[\u4e00-\u9fa5]/g) || [];
23
    const englishChars = text.match(/[a-zA-Z]/g) || [];
24

25
    words += chineseChars.length + englishChars.length;
26
  }
27
}
28

29
const sorted = allBlogPosts.sort((a, b) => {
30
  const dateA = new Date(a.data.published);
31
  const dateB = new Date(b.data.published);
32
  return dateA > dateB ? -1 : 1;
33
});
34

35
const title = sorted[0].data.title;
36

37
const startDate = siteConfig.siteStartDate || '2025-01-01';
38
const begin = new Date(startDate);
39
let end = new Date(startDate);
40
end.setDate(begin.getDate() + 3650);
41
const latestDate = new Date(sorted[0].data.published);
42

43
const total = Math.ceil((end - begin) / (1000 * 60 * 60 * 24));
44
const dayU = i18n(I18nKey.decennialDayUnit);
45
const dayAgoU = i18n(I18nKey.decennialDaysAgo);
46
const daysTogoU = i18n(I18nKey.decennialDaysToGo);
47
---
48
<style>
49
.container {
50
  width: 100%;
51
  background: var(--card-bg);
52
  border-radius: 20px;
53
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
54
  padding: 40px;
55
  text-align: center;
56
  position: relative;
57
  overflow: hidden;
58
}
59

60
.container::before {
61
  content: '';
62
  position: absolute;
63
  top: 0;
64
  left: 0;
65
  width: 100%;
66
  height: 8px;
67
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
68
}
69

70
h1 {
71
  font-size: 2.8rem;
72
  margin-bottom: 30px;
73
  letter-spacing: 2px;
74
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
75
}
76

77
.avatar-container {
78
  margin: 20px auto 30px;
79
  width: 150px;
80
  height: 150px;
81
  border-radius: 50%;
82
  overflow: hidden;
83
  border: 5px solid #f8f9fa;
84
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
85
  position: relative;
86
  user-select: none;
87
}
88

89
.avatar {
90
  width: 100%;
91
  height: 100%;
92
  background: linear-gradient(45deg, #3498db, #9b59b6);
93
  display: flex;
94
  justify-content: center;
95
  align-items: center;
96
  font-size: 3rem;
97
}
98

99
.decennial-title {
100
  margin: 0 0 30px 0;
101
}
102

103
#daysCounter {
104
  margin: 20px 0;
105
}
106

107
#days-label {
108
  font-size: 1.2rem;
109
  margin-bottom: 30px;
110
}
111

112
.date-info {
113
  display: flex;
114
  justify-content: space-between;
115
  margin: 30px 0;
116
  flex-wrap: wrap;
117
}
118

119
.date-box {
120
  flex: 1;
121
  min-width: 200px;
122
  padding: 20px;
123
  margin: 10px;
124
  background: var(--page-bg);
125
  border-radius: 12px;
126
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
127
  transition: transform 0.3s ease;
128
}
129

130
.date-box:hover {
131
  transform: translateY(-5px);
132
}
133

134
.date-title {
135
  margin-bottom: 10px;
136
}
137

138
.label-container {
139
  display: flex;
140
  flex-direction: column;
141
  text-align: left;
142
  line-height: 2.5;
143
}
144

145
.horizontal-items {
146
  display: flex;
147
  flex-wrap: wrap;
148
  justify-content: space-between;
149
}
150

151
.progress-container {
152
  margin: 40px 0 20px;
153
  text-align: left;
154
}
155

156
.progress-label {
157
  display: flex;
158
  justify-content: space-between;
159
  margin-bottom: 10px;
160
  font-size: 1.1rem;
161
}
162

163
.progress-bar {
164
  height: 20px;
165
  background: var(--page-bg);
166
  border-radius: 10px;
167
  overflow: hidden;
168
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
169
}
170

171
.progress-fill {
172
  height: 100%;
173
  background: linear-gradient(90deg, #3498db, #2ecc71);
174
  border-radius: 10px;
175
  width: 0;
176
  transition: width 1.5s ease-in-out;
177
  position: relative;
178
  overflow: hidden;
179
}
180

181
.progress-fill::after {
182
  content: '';
183
  position: absolute;
184
  top: 0;
185
  left: 0;
186
  bottom: 0;
187
  right: 0;
188
  background-image: linear-gradient(
189
    -45deg,
190
    rgba(255, 255, 255, 0.2) 25%,
191
    transparent 25%,
192
    transparent 50%,
193
    rgba(255, 255, 255, 0.2) 50%,
194
    rgba(255, 255, 255, 0.2) 75%,
195
    transparent 75%,
196
    transparent
197
  );
198
  background-size: 20px 20px;
199
  animation: move 1s linear infinite;
200
}
201

202
@keyframes move {
203
  0% {
204
    background-position: 0 0;
205
  }
206
  100% {
207
    background-position: 20px 0;
208
  }
209
}
210

211
.quote {
212
  margin-top: 30px;
213
  font-style: italic;
214
  color: #7f8c8d;
215
  font-size: 1.1rem;
216
  line-height: 1.6;
217
  border-left: 4px solid #3498db;
218
  padding-left: 15px;
219
  text-align: left;
220
}
221

222
img {
223
  max-width: 100%;
224
}
225

226
@media (max-width: 600px) {
227
  .container {
228
    padding: 20px;
229
  }
230

231
  h1 {
232
    font-size: 2rem;
233
  }
234

235
  .days-counter {
236
    font-size: 3rem;
237
  }
238

239
  .date-info {
240
    flex-direction: column;
241
  }
242

243
  .date-box {
244
    min-width: 100%;
245
  }
246
}
247
</style>
248

249
<MainGridLayout title={i18n(I18nKey.decennialTitle)} description={i18n(I18nKey.decennialDesc)}>
250
  <div class="container">
251
        <div class="decennial-title text-4xl font-bold text-neutral-900 dark:text-neutral-100 group-hover:text-(--primary) transition-colors truncate pr-1">{i18n(I18nKey.decennialSubtitle)}</div>
252

253
        <div class="avatar-container">
254
            <div class="avatar">
255
              <img src="https://justpureh2o.cn/avatar.jpg">
256
            </div>
257
        </div>
258

259
        <div class="text-7xl font-bold text-neutral-900 dark:text-neutral-100 group-hover:text-(--primary) transition-colors truncate pr-1" id="daysCounter"></div>
260
        <div class="days-label font-bold text-base text-neutral-900 dark:text-neutral-100 group-hover:text-(--primary) transition-colors truncate pr-4">{i18n(I18nKey.decennialDaysCounter)}</div>
261

262
        <div class="date-info">
263
            <div class="date-box">
264
                <div class="date-title text-base text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialCountFrom)}</div>
265
                <div class="text-2xl font-bold text-neutral-900 dark:text-neutral-100" id="startDate">2025-01-01</div>
266
            </div>
267

268
            <div class="date-box">
269
                <div class="date-title text-base text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialCountTo)}</div>
270
                <div class="text-2xl font-bold text-neutral-900 dark:text-neutral-100" id="endDate">2034-12-29</div>
271
            </div>
272
        </div>
273

274
    <div class="label-container">
275
            <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">📄 {i18n(I18nKey.decennialPromiseTitle)}</div>
276
      <div class="horizontal-items">
277
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry1Title">{i18n(I18nKey.decennialPromiseEntry1)}</div>
278
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry1Text"></div>
279
      </div>
280
      <div class="horizontal-items">
281
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${sorted.length >= 10 ? "oklch(0.6 0.2 170)" : "oklch(0.7 0.2 25)"}`>{i18n(I18nKey.decennialPromiseEntry2)}</div>
282
        <div class="text-base text-neutral-900 dark:text-neutral-100">{sorted.length} {i18n(I18nKey.decennialPostUnit)}</div>
283
      </div>
284
        </div>
285

286
    <div class="label-container">
287
            <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">🎉 {i18n(I18nKey.decennialAchievementTitle)}</div>
288
      <div class="horizontal-items">
289
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${sorted.length >= 100 ? "oklch(0.6 0.2 170)" : ""}`>{i18n(I18nKey.decennialAchievementEntry1)}</div>
290
        <div class="text-base text-neutral-900 dark:text-neutral-100">{sorted.length} {i18n(I18nKey.decennialPostUnit)}</div>
291
      </div>
292
      <div class="horizontal-items">
293
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${words >= 100000 ? "oklch(0.6 0.2 170)" : ""}`>{i18n(I18nKey.decennialAchievementEntry2)}</div>
294
        <div class="text-base text-neutral-900 dark:text-neutral-100">{words} {i18n(I18nKey.decennialCharacterUnit)}</div>
295
      </div>
296
      <div class="horizontal-items">
297
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" style=`color:${words >= 1000000 ? "oklch(0.6 0.2 170)" : ""}`>{i18n(I18nKey.decennialAchievementEntry3)}</div>
298
        <div class="text-base text-neutral-900 dark:text-neutral-100">{words} {i18n(I18nKey.decennialCharacterUnit)}</div>
299
      </div>
300
      <div class="horizontal-items">
301
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry4Title">{i18n(I18nKey.decennialAchievementEntry4)}</div>
302
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry4Text"></div>
303
      </div>
304
      <div class="horizontal-items">
305
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry5Title">{i18n(I18nKey.decennialAchievementEntry5)}</div>
306
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry5Text"></div>
307
      </div>
308
      <div class="horizontal-items">
309
        <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="entry6Title">{i18n(I18nKey.decennialAchievementEntry6)}</div>
310
        <div class="text-base text-neutral-900 dark:text-neutral-100" id="entry6Text"></div>
311
      </div>
312
        </div>
313

314
        <div class="progress-container">
315
      <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialAchievementsTitle)}</div>
316
            <div class="progress-label">
317
                <div class="text-xlarge font-bold text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialProgressTitle)}</div>
318
                <div class="text-base font-bold text-neutral-900 dark:text-neutral-100" id="progressPercent"></div>
319
            </div>
320
            <div class="progress-bar">
321
                <div class="progress-fill" id="progressFill"></div>
322
            </div>
323
        </div>
324

325
        <div class="quote text-base font-bold text-neutral-900 dark:text-neutral-100">{i18n(I18nKey.decennialQuote)}</div>
326
  </div>
327
</MainGridLayout>
328

329
<script is:inline define:vars={{ startDate, latestDate, title, dayU, dayAgoU, daysTogoU }}>
330
  const today = new Date();
331
  const begin = new Date(startDate);
332
  const end = new Date(startDate);
333
  const latest = new Date(latestDate);
334
  end.setDate(end.getDate() + 3650);
335
  const elapsed = Math.ceil((today - latest) / (1000 * 60 * 60 * 24));
336
  const counter = Math.ceil((today - begin) / (1000 * 60 * 60 * 24));
337
  const daysTogo = Math.max(Math.ceil((end - today) / (1000 * 60 * 60 * 24)), 0);
338
  // 计算进度百分比
339
  const progress = (counter / 3650 * 100).toFixed(3);
340

341
  // 格式化日期为 YYYY-MM-DD
342
  function formatDate(date) {
343
  date = new Date(date);
344
  const year = date.getFullYear();
345
  const month = String(date.getMonth() + 1).padStart(2, '0');
346
  const day = String(date.getDate()).padStart(2, '0');
347
  return `${year}-${month}-${day}`;
348
  }
349

350
  // 更新页面内容
351
  document.getElementById('startDate').textContent = formatDate(begin);
352
  document.getElementById('endDate').textContent = formatDate(end);
353
  document.getElementById('progressPercent').textContent = `${progress}%`;
354
  document.getElementById('entry1Title').style.color = elapsed <= 180 ? "oklch(0.6 0.2 170)" : "oklch(0.7 0.2 25)";
355
  document.getElementById('entry1Text').textContent = `${elapsed} ${dayAgoU}: ${title}`;
356
  document.getElementById('entry4Title').style.color = counter >= 100 ? "oklch(0.6 0.2 170)" : "";
357
  document.getElementById('entry4Text').textContent = `${counter} ${dayU}`;
358
  document.getElementById('entry5Title').style.color = counter >= 1000 ? "oklch(0.6 0.2 170)" : "";
359
  document.getElementById('entry5Text').textContent = `${counter} ${dayU}`;
360
  document.getElementById('entry6Title').style.color = daysTogo === 0 ? "oklch(0.6 0.2 170)" : "";
361
  document.getElementById('entry6Text').textContent = `${daysTogo} ${daysTogoU}`;
362

363
  // 动画显示进度条
364
  setTimeout(() => {
365
  document.getElementById('progressFill').style.width = `${progress}%`;
366
  }, 500);
367

368
  // 更新运行天数（动态效果）
369
  let currentDays = 0;
370
  const daysCounter = document.getElementById('daysCounter');
371
  const increment = Math.ceil(counter / 100);
372

373
  const counterInterval = setInterval(() => {
374
  currentDays += increment;
375
  if (currentDays >= counter) {
376
    currentDays = counter;
377
    clearInterval(counterInterval);
378
  }
379
  daysCounter.textContent = currentDays;
380
  }, 20);
381
</script>

请在 siteConfig 中写入正确的博客建站日期。若对应字段为空，则默认设置为 2025 年 1 月 1 日建站。

同时，分别在 src/i18n/i18nKey.ts、src/i18n/languages/zh_CN.ts 和 src/i18n/languages/en.ts 三个文件中新增：

1
// 十年之约 i18nKey.ts
2
decennialTitle = "decennialTitle",
3
decennialDesc = "decennialDesc",
4
decennialSubtitle = "decennialSubtitle",
5
decennialDaysCounter = "decennialDaysCounter",
6
decennialCountFrom = "decennialCountFrom",
7
decennialCountTo = "decennialCountTo",
8
decennialPromiseTitle = "decennialPromiseTitle",
9
decennialAchievementTitle = "decennialAchievementTitle",
10
decennialProgressTitle = "decennialProgressTitle",
11
decennialQuote = "decennialQuote",
12
decennialDaysAgo = "decennialDaysAgo",
13
decennialDaysToGo = "decennialDaysToGo",
14
decennialCharacterUnit = "decennialCharacterUnit",
15
decennialDayUnit = "decennialDayUnit",
16
decennialPostUnit = "decennialPostUnit",
17
decennialAchievementEntry1 = "decennialAchievementEntry1",
18
decennialAchievementEntry2 = "decennialAchievementEntry2",
19
decennialAchievementEntry3 = "decennialAchievementEntry3",
20
decennialAchievementEntry4 = "decennialAchievementEntry4",
21
decennialAchievementEntry5 = "decennialAchievementEntry5",
22
decennialAchievementEntry6 = "decennialAchievementEntry6",
23
decennialPromiseEntry1 = "decennialPromiseEntry1",
24
decennialPromiseEntry2 = "decennialPromiseEntry2",

1
// 十年之约 zh_CN.ts
2
[Key.decennialTitle]: "十年之约",
3
[Key.decennialDesc]: "",
4
[Key.decennialSubtitle]: "我的博客 · 十年之约",
5
[Key.decennialDaysCounter]: "已运行天数",
6
[Key.decennialCountFrom]: "建站日期",
7
[Key.decennialCountTo]: "十年之约到期日",
8
[Key.decennialPromiseTitle]: "履约事项：",
9
[Key.decennialAchievementTitle]: "履约成就：",
10
[Key.decennialProgressTitle]: "履约进度：",
11
[Key.decennialQuote]: "十年之约，是坚持，是承诺，是对未来的期许。无论风雨，无论晴好，我会在这里记录、分享、成长。",
12
[Key.decennialDaysAgo]: "天前发布",
13
[Key.decennialDaysToGo]: "天后",
14
[Key.decennialCharacterUnit]: "字",
15
[Key.decennialDayUnit]: "天",
16
[Key.decennialPostUnit]: "篇",
17
[Key.decennialAchievementEntry1]: "发布100篇原创文章",
18
[Key.decennialAchievementEntry2]: "总字数达10万字",
19
[Key.decennialAchievementEntry3]: "总字数达100万字",
20
[Key.decennialAchievementEntry4]: "正常运行100天",
21
[Key.decennialAchievementEntry5]: "正常运行1000天",
22
[Key.decennialAchievementEntry6]: "完成十年之约",
23
[Key.decennialPromiseEntry1]: "六个月内有新文章发布",
24
[Key.decennialPromiseEntry2]: "至少有十篇原创文章",

1
// Decennial Countdown en.ts
2
[Key.decennialTitle]: "Decennial Countdown",
3
[Key.decennialDesc]: "",
4
[Key.decennialSubtitle]: "My Blog - Decennial Countdown",
5
[Key.decennialDaysCounter]: "Days Since Online",
6
[Key.decennialCountFrom]: "Starts on",
7
[Key.decennialCountTo]: "Ends on",
8
[Key.decennialPromiseTitle]: "Promise TODOs",
9
[Key.decennialAchievementTitle]: "Achievements",
10
[Key.decennialProgressTitle]: "Countdown progress",
11
[Key.decennialQuote]: "A decennial miracle will soon bloom on this site.",
12
[Key.decennialDaysAgo]: "days after post",
13
[Key.decennialDaysToGo]: "days to go",
14
[Key.decennialCharacterUnit]: "characters",
15
[Key.decennialDayUnit]: "days",
16
[Key.decennialPostUnit]: "posts",
17
[Key.decennialAchievementEntry1]: "Post 100 original articles",
18
[Key.decennialAchievementEntry2]: "Write 100k words",
19
[Key.decennialAchievementEntry3]: "Write 1m words",
20
[Key.decennialAchievementEntry4]: "Run normally for 100 days",
21
[Key.decennialAchievementEntry5]: "Run normally for 1000 days",
22
[Key.decennialAchievementEntry6]: "Accomplish the Decennial Countdown",
23
[Key.decennialPromiseEntry1]: "Post at least one article in six months",
24
[Key.decennialPromiseEntry2]: "Post at least ten original posts",

请根据博客的自身情况，定义 zh_CN.ts 和 en.ts 文件中的对应字段。

本站十年之约页面见此

友链朋友圈#

Warning

本站的友链朋友圈实现方案可能涉及部署方式的改变（例如 GitHub Pages -> Vercel），请慎重选择！

先下载 node-cache 包，在项目根目录运行：

1
pnpm add node-cache

在 src/pages/api/ 下新建文件 feed.json.ts 并写入：

1
import type { APIRoute } from 'astro';
2
import { analyzeFeed } from '@/utils/feed-utils';
3
import NodeCache from 'node-cache';
4

5
export const prerender = false;
6

7
const cache = new NodeCache({ stdTTL: 1800, checkperiod: 120 });
8

9
export const POST: APIRoute = async ({ request }) => {
10
  try {
11
  const { friends } = await request.json();
12

13
  const cacheKey = JSON.stringify(
14
    friends.map(f => ({ baseid: f.baseid, feed: f.feed, feedtype: f.feedtype }))
15
  );
16

17
  let cachedLinks = cache.get(cacheKey);
18
  if (cachedLinks) {
19
    return new Response(JSON.stringify(cachedLinks), {
20
    status: 200,
21
    headers: { 'Content-Type': 'application/json' },
22
    });
23
  }
24

25
  const promises = friends.map(async (friend: any) => {
26
    const type = friend.feedtype || 'rss';
27
    const feed = await analyzeFeed(type, friend.feed, 3);
28
    return { baseid: friend.baseid, feed };
29
  });
30

31
  const links = await Promise.all(promises);
32

33
  cache.set(cacheKey, links);
34

35
  return new Response(JSON.stringify(links), {
36
    status: 200,
37
    headers: { 'Content-Type': 'application/json' },
38
  });
39
  } catch (error) {
40
    return new Response(JSON.stringify({ error: 'Failed to fetch feeds' }), {
41
      status: 500,
42
      headers: { 'Content-Type': 'application/json' },
43
    });
44
  }
45
};

src/pages/ 下新建文件 circle.astro 并写入：

1
---
2
import { Icon } from "astro-icon/components";
3
import {
4
  friendsPageConfig,
5
  getEnabledFriends,
6
  siteConfig,
7
} from "@/config";
8
import MainGridLayout from "@/layouts/MainGridLayout.astro";
9

10
if (!siteConfig.pages.circle) {
11
  return Astro.redirect("/404/");
12
}
13

14
const title = "友链朋友圈";
15
const description = "友链里发生的那些新鲜事";
16

17
let friends = [];
18
getEnabledFriends()
19
  .filter(friend => friend.feed?.length > 0)
20
  .map(friend => {
21
    friends.push({
22
      ...friend,
23
      baseid: Buffer.from(friend.siteurl, 'utf-8').toString('base64'),
24
    });
25
  });
26
---
27

28
<MainGridLayout title={title} description={description}>
29
  <div
30
    class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32"
31
  >
32
    <div class="card-base z-10 px-9 py-6 relative w-full">
33
      <!-- 页面标题和描述 -->
34
      <div class="mb-4">
35
      <div class="flex items-center gap-3 mb-3">
36
        <div
37
        class="h-8 w-8 rounded-lg bg-(--primary) flex items-center justify-center text-white dark:text-black/70"
38
        >
39
        <Icon is:inline name="material-symbols:rss-feed-rounded" class="text-[1.5rem]" />
40
        </div>
41
        <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">
42
        {title}
43
        </div>
44
      </div>
45
      {
46
        description && (
47
        <p class="text-base text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
48
          {description}
49
        </p>
50
        )
51
      }
52
      </div>
53
      <div class="mb-4">
54
      {
55
        friends.map((item) => (
56
          <div class="mb-2">
57
            <div
58
              data-tags={item.tags?.join(",")}
59
              class="friend-card group flex items-center gap-3 p-2.5 rounded-xl border border-(--line-divider) transition-all duration-300 hover:shadow-lg relative overflow-hidden"
60
            >
61
              <!-- 头像 -->
62
              <div class="relative w-16 h-16 shrink-0 rounded-xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 border border-black/5 dark:border-white/5 transition-transform duration-300">
63
              <img
64
                src={item.imgurl}
65
                alt={item.title}
66
                class="w-full h-full object-cover"
67
                onerror="this.onerror=null;this.src='/defavatar.svg';"
68
              />
69
              </div>
70

71
              <!-- 内容 -->
72
              <div class="grow min-h-0 flex flex-col gap-1">
73
                <div class="flex items-center justify-between">
74
                  <div class="font-bold text-base text-neutral-900 dark:text-neutral-100 transition-colors truncate pr-4">
75
                  {item.title}
76
                  </div>
77
                </div>
78

79
                <div
80
                  class="text-sm text-neutral-500 dark:text-neutral-400 line-clamp-1"
81
                  title={item.desc}
82
                >
83
                  {item.desc}
84
                </div>
85
              </div>
86

87
              <div class="flex flex-col gap-0.5" id={item.baseid}>
88
                <div class="feed-loading text-sm text-neutral-400 dark:text-neutral-500 animate-pulse">
89
                加载 RSS/Atom 订阅中...
90
                </div>
91
              </div>
92
            </div>
93
          </div>
94
        ))
95
      }
96
    </div>
97
    </div>
98
  </div>
99
</MainGridLayout>
100

101
<script define:vars={{ friends }}>
102
  const friendParams = friends.map(f => ({
103
    baseid: f.baseid,
104
    feedtype: f.feedtype,
105
    feed: f.feed,
106
  }));
107

108
  async function loadFeeds() {
109
    try {
110
      const response = await fetch('/api/feed.json', {
111
        method: 'POST',
112
        headers: { 'Content-Type': 'application/json' },
113
        body: JSON.stringify({ friends: friendParams }),
114
      });
115
      if (!response.ok) throw new Error('Network response was not ok');
116
      const links = await response.json();
117

118
      links.forEach((item) => {
119
        const container = document.getElementById(item.baseid);
120
        if (!container) return;
121
    container.replaceChildren();
122

123
        item.feed.entries.forEach((entry) => {
124
          container.insertAdjacentHTML("beforeend", `
125
            <a
126
              href="${entry.url}"
127
              target="_blank"
128
              rel="noopener noreferrer"
129
              data-tags="${item.tags?.join(",") || ''}"
130
              class="friend-card group flex items-center gap-3 p-2.5 rounded-xl border border-(--line-divider) hover:border-(--primary) hover:bg-(--card-bg) transition-all duration-300 hover:shadow-lg relative overflow-hidden w-100"
131
            >
132
              <div class="flex flex-col">
133
                <div class="font-bold text-base text-neutral-900 dark:text-neutral-100 transition-colors pr-4 line-clamp-1 w-100 truncate">
134
                  ${entry.title}
135
                </div>
136
                <div class="text-sm text-neutral-500 dark:text-neutral-400 line-clamp-1 indent-1">
137
                  ${new Date(entry.date).toLocaleDateString()}
138
                </div>
139
              </div>
140
            </a>
141
          `);
142
        });
143
      });
144
    } catch (error) {
145
      console.error('Failed to load feeds:', error);
146
    }
147
  }
148
  loadFeeds();
149
</script>

在 siteConfig 中，在如下位置添加字段并设置为 true 来启用友链朋友圈页面：

1
// 页面开关配置 - 控制特定页面的访问权限，设为false会返回404并自动隐藏对应的导航栏菜单项
2
pages: {
3
  // 友链页面开关
4
  friends: true,
5
  // 友链朋友圈页面开关
6
  circle: true,
7

8
  // 其他字段……
9
},

src/utils/ 下新建文件 feed-utils.ts 并写入：

1
class SimpleXMLParser {
2
    constructor(xmlString) {
3
        this.xml = xmlString;
4
        this.root = null;
5
        this.parse();
6
    }
7

8
    parse() {
9
        const stack = [];
10
        let currentParent = null;
11
        let i = 0;
12
        const len = this.xml.length;
13

14
        while (i < len) {
15
            // 跳过空白字符（仅对标签外有效，但为了简化，我们统一跳过）
16
            if (this.xml[i] === ' ' || this.xml[i] === '\n' || this.xml[i] === '\r' || this.xml[i] === '\t') {
17
                i++;
18
                continue;
19
            }
20

21
      if (this.xml.startsWith('<?', i)) {
22
        const end = this.xml.indexOf('?>', i);
23
        if (end === -1) throw new Error('处理指令未闭合');
24
        i = end + 2;
25
        continue;
26
      }
27

28
      // 跳过注释（如 <!-- comment -->）
29
      if (this.xml.startsWith('<!--', i)) {
30
        const end = this.xml.indexOf('-->', i);
31
        if (end === -1) throw new Error('注释未闭合');
32
        i = end + 3;
33
        continue;
34
      }
35

36
            // 处理标签或 CDATA
37
            if (this.xml[i] === '<') {
38
                // --- 检测 CDATA 开始 ---
39
                if (this.xml.startsWith('<![CDATA[', i)) {
40
                    const cdataStart = i + 9; // '<![CDATA[' 的长度
41
                    const cdataEnd = this.xml.indexOf(']]>', cdataStart);
42
                    if (cdataEnd === -1) {
43
                        throw new Error('CDATA 未闭合');
44
                    }
45
                    const cdataContent = this.xml.substring(cdataStart, cdataEnd);
46
                    // 创建 CDATA 节点（作为文本节点的一种）
47
                    const cdataNode = {
48
                        nodeType: 'cdata',
49
                        nodeValue: cdataContent,
50
                        parent: currentParent
51
                    };
52
                    if (currentParent) {
53
                        currentParent.childNodes.push(cdataNode);
54
                    } else {
55
                        // CDATA 不能作为根节点，但为了容错，仍添加
56
                        // 实际上根元素应该是标签，此处防止错误使用
57
                        throw new Error('CDATA 必须在元素内部');
58
                    }
59
                    i = cdataEnd + 3; // 跳过 ']]>'
60
                    continue;
61
                }
62

63
                // --- 结束标签 ---
64
                if (this.xml[i + 1] === '/') {
65
                    const endTagEnd = this.xml.indexOf('>', i);
66
                    if (endTagEnd === -1) throw new Error('标签未闭合');
67
                    const tagName = this.xml.substring(i + 2, endTagEnd).trim();
68
                    if (stack.length === 0 || stack[stack.length - 1].tagName !== tagName) {
69
                        throw new Error(`标签不匹配: 期望 ${stack[stack.length - 1]?.tagName}, 得到 ${tagName}`);
70
                    }
71
                    stack.pop();
72
                    currentParent = stack.length > 0 ? stack[stack.length - 1] : null;
73
                    i = endTagEnd + 1;
74
                    continue;
75
                }
76

77
                // --- 自闭合标签（如 <book />）---
78
                const selfClose = this.xml.indexOf('/>', i);
79
                const closeBracket = this.xml.indexOf('>', i);
80
                if (selfClose !== -1 && selfClose < closeBracket) {
81
                    const tagContent = this.xml.substring(i + 1, selfClose).trim();
82
                    const tagName = tagContent.split(/\s/)[0];
83
                    const newNode = {
84
                        tagName: tagName,
85
                        attributes: {},
86
                        childNodes: [],
87
                        parent: currentParent
88
                    };
89
                    if (currentParent) {
90
                        currentParent.childNodes.push(newNode);
91
                    } else {
92
                        if (this.root) throw new Error('文档只能有一个根元素');
93
                        this.root = newNode;
94
                    }
95
                    i = selfClose + 2;
96
                    continue;
97
                }
98

99
                // --- 普通开始标签 ---
100
                const tagEnd = this.xml.indexOf('>', i);
101
                if (tagEnd === -1) throw new Error('标签未闭合');
102
                const tagContent = this.xml.substring(i + 1, tagEnd).trim();
103
                const tagName = tagContent.split(/\s/)[0];
104
                const newNode = {
105
                    tagName: tagName,
106
                    attributes: {},
107
                    childNodes: [],
108
                    parent: currentParent
109
                };
110
                if (currentParent) {
111
                    currentParent.childNodes.push(newNode);
112
                } else {
113
                    if (this.root) throw new Error('文档只能有一个根元素');
114
                    this.root = newNode;
115
                }
116
                stack.push(newNode);
117
                currentParent = newNode;
118
                i = tagEnd + 1;
119
                continue;
120
            }
121

122
            // --- 普通文本内容（非 CDATA） ---
123
            const nextLt = this.xml.indexOf('<', i);
124
            let text = '';
125
            if (nextLt === -1) {
126
                text = this.xml.substring(i).trim();
127
                i = len;
128
            } else {
129
                text = this.xml.substring(i, nextLt).trim();
130
                i = nextLt;
131
            }
132
            if (text && currentParent) {
133
                currentParent.childNodes.push({
134
                    nodeType: 'text',
135
                    nodeValue: text,
136
                    parent: currentParent
137
                });
138
            }
139
        }
140

141
        if (stack.length > 0) {
142
            throw new Error(`标签未闭合: ${stack[stack.length - 1].tagName}`);
143
        }
144
    }
145

146
    getElementsByTagName(tagName) {
147
        const result = [];
148
        const traverse = (node) => {
149
            if (node.tagName === tagName) {
150
                result.push(node);
151
            }
152
            if (node.childNodes) {
153
                for (const child of node.childNodes) {
154
                    traverse(child);
155
                }
156
            }
157
        };
158
        if (this.root) traverse(this.root);
159
        return result;
160
    }
161

162
  hasChild() {
163
    return this.childNodes?.length > 0;
164
  }
165

166
    getRoot() {
167
        return this.root;
168
    }
169
}
170

171
export async function analyzeFeed(type: string, url: string, count: int = -1) : Object {
172
  let ret = {url: url, entries: []};
173
  if (type === 'atom') {
174
    ret.entries = await readAtom(url, count);
175
  } else if (type === 'rss') {
176
    ret.entries = await readRss(url, count);
177
  }
178
  return ret;
179
}
180

181
async function readAtom(url: string, count: int = -1) : Object[] {
182
  let atoms = [];
183
  await fetch(url).then(res => res.text()).then(data => {
184
    const parser = new SimpleXMLParser(data);
185
    const entries = parser.getElementsByTagName('entry').sort((a, b) => {
186
      const at = new Date(b.childNodes.find(n => n.tagName === 'published').childNodes[0].nodeValue);
187
      const bt = new Date(a.childNodes.find(n => n.tagName === 'published').childNodes[0].nodeValue);
188
      return at.getTime() - bt.getTime();
189
    });
190
    if (count < 0) count = entries.length;
191
    for (let i = 0; i < count; i++) {
192
      if (i >= entries.length) break;
193
      const entry = entries[i];
194
      const title = entry.childNodes.find(n => n.tagName === 'title').childNodes[0].nodeValue;
195
      const date = entry.childNodes.find(n => n.tagName === 'published').childNodes[0].nodeValue;
196
      const url = entry.childNodes.find(n => n.tagName === 'id').childNodes[0].nodeValue;
197
      atoms.push({
198
        title: title,
199
        date: date,
200
        url: url,
201
      });
202
    }
203
  }).catch(e => {
204
    console.log(e);
205
    atoms.push({title: null, date: null, url: null})
206
  });
207
  return atoms;
208
}
209

210
async function readRss(url: string, count: int = -1) : Object[] {
211
  let rss = [];
212
  await fetch(url).then(res => res.text()).then(data => {
213
    const parser = new SimpleXMLParser(data);
214
    const items = parser.getElementsByTagName('item').sort((a, b) => {
215
      const at = new Date(b.childNodes.find(n => n.tagName === 'pubDate').childNodes[0].nodeValue);
216
      const bt = new Date(a.childNodes.find(n => n.tagName === 'pubDate').childNodes[0].nodeValue)
217
      return at.getTime() - bt.getTime()
218
    });
219
    if (count < 0) count = items.length;
220
    for (let i = 0; i < count; i++) {
221
      if (i >= items.length) break;
222
      const item = items[i];
223
      const title = item.childNodes.find(n => n.tagName === 'title').childNodes[0].nodeValue;
224
      const date = item.childNodes.find(n => n.tagName === 'pubDate').childNodes[0].nodeValue;
225
      const url = item.childNodes.find(n => n.tagName === 'link').childNodes[0].nodeValue;
226
      rss.push({
227
        title: title,
228
        date: date,
229
        url: url,
230
      });
231
    }
232
  }).catch(e => {
233
    console.log(e);
234
    rss.push({title: null, date: null, url: null})
235
  });
236
  return rss;
237
}

此时便可以通过编辑友链配置 friendsConfig 来抓取对应博客的订阅文章。本站示例如下：

1
{
2
  title: "JustPureH2O",
3
  imgurl: "https://justpureh2o.cn/avatar.jpg",
4
  desc: "穷方圆平直之情，尽规矩准绳之用",
5
  siteurl: "https://justpureh2o.cn/",
6
  tags: [],
7
  weight: 10000,
8
  enabled: true,
9
  feed: 'https://justpureh2o.cn/rss.xml', // RSS/Atom 文件地址
10
  feedtype: 'rss' // 支持的值：rss（默认）、atom，用来指定订阅格式，暂不支持其他格式
11
},

如果需要部署到网页，需要下载对应平台的 Adapter 用来处理我们新建的服务端 API（即 feed.json.ts）。本站选用 Vercel，那么在根目录执行包安装：

1
pnpm add @astrojs/vercel

按照如下方式编辑 astro.config.mjs 文件：

1
// 开头引入包
2
import vercel from "@astrojs/vercel";
3

4
// ……
5

6
// https://astro.build/config
7
export default defineConfig({
8
  // ……
9
  adapter: vercel(),
10
  // ……
11
});

在 src/content/spec/ 下新建空文件 circle.md/circle.mdx。将博客源码上传至你的仓库。

此时在 Vercel Dashboard 新建项目，从存储本站源码的仓库里导入，默认设置不要动（会自动检测为 Astro 框架），等待初次构建完毕后，绑定域名。

本站友链朋友圈页面见此

音乐

音乐

“十年之约”页面#

友链朋友圈#

文章分享

评论区

音乐

文章目录