1
import fs from "node:fs/promises";
2
import path from "node:path";
3
import { getEnabledFriends } from "../src/config/friendsConfig";
4

5
// 生成 Friend-Circle-Lite 所需的友链数据文件
6
// 格式: { "friends": [["站点名", "站点地址", "头像地址"], ...] }
7
// 产物发布到站点根目录 (public/friend.json)，供 FCL 的 Action 定时拉取
8

9
const OUTPUT_FILE = path.join("public", "friend.json");
10

11
async function main() {
12
  const friends = getEnabledFriends();
13

14
  const data = {
15
    friends: friends.map((item) => [item.title, item.siteurl, item.imgurl]),
16
  };
17

18
  await fs.mkdir(path.dirname(OUTPUT_FILE), { recursive: true });
19
  await fs.writeFile(OUTPUT_FILE, `${JSON.stringify(data, null, 2)}\n`, "utf-8");
20

21
  console.log(`friend.json 已生成: ${OUTPUT_FILE} (${friends.length} 个友链)`);
22
}
23

24
main().catch((error) => {
25
  console.error("生成 friend.json 失败:", error);
26
  process.exit(1);
27
});

1
// 友链朋友圈 (Friend-Circle-Lite) 页面配置
2
export const fcircleConfig = {
3
  // 页面标题
4
  title: "友链朋友圈",
5

6
  // 页面描述
7
  description: "聚合朋友们的最新文章，数据来自各位友链的 RSS 订阅",
8

9
  // FCL 数据站地址（fork 仓库 page 分支部署后的站点根地址，末尾必须带 /）
10
  // 部署完成后把这里改成你自己的地址，例如 https://xxx.vercel.app/
11
  apiUrl: "https://YOUR-FCL-DOMAIN.vercel.app/",
12

13
  // 每次加载文章数量
14
  pageSize: 24,
15

16
  // 头像加载失败时的默认图片
17
  errorImg: "/favicon/sakura2.png",
18
};

1
---
2
import { Icon } from "astro-icon/components";
3
import { fcircleConfig, siteConfig } from "@/config";
4
import MainGridLayout from "@/layouts/MainGridLayout.astro";
5

6
// 检查页面是否启用
7
if (!siteConfig.pages.fcircle) {
8
  return Astro.redirect("/404/");
9
}
10

11
const title = fcircleConfig.title;
12
const description = fcircleConfig.description;
13
---
14

15
<MainGridLayout title={title} description={description}>
16
  <div
17
    class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32"
18
  >
19
    <div class="card-base z-10 px-9 py-6 relative w-full">
20
      <!-- 页面标题和描述 -->
21
      <div class="mb-4">
22
        <div class="flex items-center gap-3 mb-3">
23
          <div
24
            class="h-8 w-8 rounded-lg bg-(--primary) flex items-center justify-center text-white dark:text-black/70"
25
          >
26
            <Icon name="material-symbols:public" class="text-[1.5rem]" />
27
          </div>
28
          <div
29
            class="text-3xl font-bold text-neutral-900 dark:text-neutral-100"
30
          >
31
            {title}
32
          </div>
33
        </div>
34
        {
35
          description && (
36
            <p class="text-base text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
37
              {description}
38
            </p>
39
          )
40
        }
41
      </div>
42

43
      <!-- Friend-Circle-Lite 友圈文章流 -->
44
      <link rel="stylesheet" href="/fclite/fclite.css" />
45
      <div id="friend-circle-lite-root"></div>
46
      <script
47
        is:inline
48
        define:vars={{
49
          apiUrl: fcircleConfig.apiUrl,
50
          pageSize: fcircleConfig.pageSize,
51
          errorImg: fcircleConfig.errorImg,
52
        }}
53
      >
54
        window.UserConfig = {
55
          private_api_url: apiUrl,
56
          page_turning_number: pageSize,
57
          error_img: errorImg,
58
        };
59
      </script>
60
      <script is:inline src="/fclite/fclite.js"></script>
61
    </div>
62
  </div>
63

64
  <!--
65
    fclite.css 依赖 [data-theme=light]/[data-theme=dark] 切换亮暗色，
66
    而本站的 data-theme 是代码高亮主题名（one-light/one-dark-pro），
67
    亮暗切换实际由 html.dark 控制，这里做一层变量桥接。
68
  -->
69
  <style is:global>
70
    #friend-circle-lite-root {
71
      --text-color: var(--text-color-light);
72
      --background-color: var(--background-color-light);
73
      --tag-bg-color: #bfbfbf;
74
      --container-bg-color: var(--container-bg-color-light);
75
      /* 副文本（日期、统计标签、页脚）统一到主题元信息色 */
76
      --author-color: var(--content-meta);
77
      --shadow-color: var(--shadow-color-light);
78
      --border-color: var(--border-color-light);
79
      --modal-bg-color: rgba(255, 255, 255, 0.5);
80
      --modal-content-bg-color: rgba(239, 250, 255, 0.5);
81
      --load-more-btn-bg-color: var(--container-bg-color);
82
      /* 跟随站点主题色 */
83
      --hover-color: var(--primary);
84
    }
85

86
    :root.dark #friend-circle-lite-root {
87
      --text-color: var(--text-color-dark);
88
      --background-color: var(--background-color-dark);
89
      --tag-bg-color: #474747;
90
      --container-bg-color: var(--container-bg-color-dark);
91
      --author-color: var(--content-meta);
92
      --shadow-color: var(--shadow-color-dark);
93
      --border-color: var(--border-color-dark);
94
      --modal-bg-color: rgba(0, 0, 0, 0.3);
95
      --modal-content-bg-color: rgba(20, 20, 20, 0.5);
96
      --load-more-btn-bg-color: var(--container-bg-color);
97
    }
98
  </style>
99
</MainGridLayout>

1
spider_settings:
2
  enable: true
3
  json_url: "https://blog.liushen.fun/friend.json"
4
  json_url: "https://你的域名/friend.json"
5
  article_count: 5
6

7
link_check:
8
  ...
9
  enable_backlink_check: true
10
  author_url: "blog.liushen.fun"
11
  author_url: "你的域名"
12

13
rss_subscribe:
14
  enable: true
15
  github_username: willow-god
16
  enable: false
17
  github_username: 你的GitHub用户名
18
  github_repo: Friend-Circle-Lite
19
  your_blog_url: https://blog.liushen.fun/
20
  your_blog_url: https://你的域名/
21
  ...
22
  website_info:
23
    title: "清羽飞扬"
24
    title: "你的博客标题"

1
{
2
  "headers": [
3
    {
4
      "source": "/(.*)",
5
      "headers": [
6
        {
7
          "key": "Access-Control-Allow-Origin",
8
          "value": "*"
9
        },
10
        {
11
          "key": "Access-Control-Allow-Methods",
12
          "value": "GET, POST, OPTIONS, PUT, DELETE"
13
        },
14
        {
15
          "key": "Access-Control-Allow-Headers",
16
          "value": "*"
17
        }
18
      ]
19
    }
20
  ]
21
}