友链与朋友圈#

我觉得友链界面算是博客必不可少的一部分，可惜 Fuwari 主题尚未实现这一功能，只能自己另寻其他解决办法。

参考注意
Fuwari 主题后续可能会内置友链页面，请考虑是否要自己外加这一功能。
此外，我对于 Astro 了解并不深，如您阅读了这系列第 0x00 篇文章的话应该知道我听说 Astro 也仅仅是半月前的事情。所以基本上文中代码不是抄的就是 AI 写的，很多代码可能未必准确，主打一个能跑就行。
这个文章的实现策略也仍存在问题，比如友链部分样式不一致。
如您愿意帮我改进代码，请提PR。我将不胜感激。

友链页面#

本小节代码主要修改自仓库 cworld1/astro-theme-pure

cworld1

astro-theme-pure

Waiting for api.github.com...

00K

Waiting...

有关上游仓库 saicaca/fuwari 对友链的支持计划
详见issue #35和pr #642

友链界面最开始参考了AULyPc的文章给你的Fuwari添加一个友链页面，但后来在逛 Axi’s Blog 的时候很喜欢他的友链界面和朋友圈，于是顺藤摸瓜找到了 Pure 主题，然后把友链相关的部分抄了过来，具体步骤大致如下：

添加必要组件

仿照 Pure 主题配置建立 ./public/links.json 文件，以下为示例：

1
{
2
  "friends": [
3
    {
4
      "id_name": "my-favorite-links",
5
      "desc": "个人收藏",
6
      "link_list": [
7
        {
37 collapsed lines
8
          "name": "空と海",
9
          "intro": "就算活著沒有意義，偶而還是會碰到好事的。",
10
          "link": "https://chiyoyuki.uk",
11
          "avatar": "https://chiyoyuki.uk"
12
        },
13
        {
14
          "name": "填写示例",
15
          "intro": "这是一个示例",
16
          "link": "localhost:4321",
17
          "avatar": "这里填写对方的头像地址"
18
        }
19
      ]
20
    },
21
    {
22
      "id_name": "my-friends-links",
23
      "desc": "先友后链",
24
      "link_list": []
25
    },
26
    {
27
      "id_name": "my-links-friends",
28
      "desc": "先链后友",
29
      "link_list": []
30
    },
31
    {
32
      "id_name": "special-links",
33
      "desc": "特殊链接",
34
      "link_list": [
35
        {
36
          "name": "异次元之旅",
37
          "intro": "我们一起去萌站成员的星球旅行吧！",
38
          "link": "https://travel.moe/go.html",
39
          "avatar": "https://icp.gov.moe/images/ico400.png"
40
        }
41
      ]
42
    }
43
  ]
44
}

在 ./src/components/ 文件夹下新建 links/FriendsList.astro 文件

1
---
2
import { Image } from "astro:assets";
3

4
interface friend {
5
 avatar: string;
6
 name: string;
7
 intro: string;
99 collapsed lines
8
 link: string;
9
}
10

11
interface friend_list {
12
 id_name: string;
13
 desc: string;
14
 link_list: friend[];
15
}
16

17
function shuffle(arr: friend[]) {
18
 return arr.sort(() => Math.random() - 0.5);
19
}
20

21
interface Props {
22
 title?: string;
23
 list: friend_list;
24
}
25
const { title, list: friendList, ...props } = Astro.props;
26
---
27

28
{title && <h2 id={friendList.id_name}>{title}</h2>}
29
<div class="grid gap-3.5 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3" {...props}>
30
  {
31
    friendList.link_list.length > 0 ? (
32
      shuffle(friendList.link_list).map((frd: friend) => (
33
        <a href={frd.link} target="_blank" class="no-underline">
34
          <div class="group relative h-full overflow-hidden rounded-2xl border bg-background px-2.5 py-1.5 transition-colors hover:bg-muted sm:px-4 sm:py-2">
35
            <div class="relative z-10 flex h-full items-center gap-3">
36
              {/* avatar */}
37
              <div class="relative h-14 w-14 min-w-14 overflow-hidden rounded-full">
38
                <Image
39
                  class="my-0 bg-white"
40
                  src={frd.avatar}
41
                  height={80}
42
                  width={80}
43
                  alt="avatar"
44
                  loading="lazy"
45
                />
46
                <div class="absolute start-0 top-0 h-full w-full">
47
                  <div class="flex h-full w-full items-center justify-center rounded-full bg-foreground opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-50">
48
                    <svg
49
                      xmlns="http://www.w3.org/2000/svg"
50
                      width="32"
51
                      height="32"
52
                      viewBox="0 0 24 24"
53
                      fill="none"
54
                      stroke-width="2.5"
55
                      stroke-linecap="round"
56
                      stroke-linejoin="round"
57
                      class="me-2 stroke-background"
58
                    >
59
                      <line
60
                        x1="5"
61
                        y1="12"
62
                        x2="19"
63
                        y2="12"
64
                        class="translate-x-4 scale-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1 group-hover:scale-x-100"
65
                      />
66
                      <polyline
67
                        points="12 5 19 12 12 19"
68
                        class="translate-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1"
69
                      />
70
                    </svg>
71
                  </div>
72
                </div>
73
              </div>
74
              {/* details */}
75
              <div class="flex flex-col gap-y-1">
76
                <p class="my-0 line-clamp-1 text-sm">{frd.name} </p>
77
                <p class="my-0 line-clamp-1 text-xs text-muted-foreground">
78
                  {frd.intro}
79
                </p>
80
              </div>
81
            </div>
82
            {/* avatar bg */}
83
            <Image
84
              class="absolute -start-2 top-0 z-0 my-0 h-full w-2/3 bg-white object-cover opacity-15"
85
              src={frd.avatar}
86
              height={80}
87
              width={80}
88
              alt="avatar bg"
89
              loading="lazy"
90
              style={{
91
                maskImage:
92
                  "linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)",
93
                msMaskImage:
94
                  "-ms-linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)",
95
                WebkitMaskImage:
96
                  "-webkit-linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)",
97
              }}
98
            />
99
          </div>
100
        </a>
101
      ))
102
    ) : (
103
      <p>Nothing here.</p>
104
    )
105
  }
106
</div>

在 ./src/pages 目录下创建 friends.astro 文件：


21 collapsed lines
1
 ---
2
 import links from "public/links.json";
3
 import Waline from "../components/Waline.astro";
4
 import I18nKey from "../i18n/i18nKey";
5
 import { i18n } from "../i18n/translation";
6

7
 // import config from 'virtual:config'
8

9
 import Markdown from "@components/misc/Markdown.astro";
10
 import FriendList from "@/components/links/FriendsList.astro";
11
 // import PageLayout from '@/layouts/CommonPage.astro'
12
 import MainGridLayout from "@/layouts/MainGridLayout.astro";
13

14
 const headings = [
15
  { depth: 2, slug: "common-links", text: "Common Links" },
16
  { depth: 2, slug: "special-links", text: "Special Links" },
17
  { depth: 2, slug: "apply-links", text: "Apply Links" },
18
 ];
19

20
 const { friends } = links;
21
 // const linksConf = config.integ.links
22
 const linksConf = {
23
  // Yourself link info
24
  applyTip: [
25
   { name: "Name", val: "空と海" },
26
   { name: "Desc", val: "就算活著沒有意義，偶而還是會碰到好事的。" },
27
   { name: "Link", val: "https://chiyoyuki.uk" },
28
   {
29
    name: "Avatar",
30
    val: "https://cravatar.com/avatar/ac3d325212c82a0bed5aac65b37da52e?s=1024",
31
   },
32
  ],
33
 };
57 collapsed lines
34

35
 const linkEditPage =
36
  "https://raw.githubusercontent.com/ChiyoYuki/chiyoyuki.github.io/refs/heads/main/public/links.json";
37
 ---
38

39
 <MainGridLayout
40
   title={i18n(I18nKey.friends)}
41
   description={i18n(I18nKey.friends)}
42
 >
43
   <div
44
     class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32"
45
   >
46
     <div class="card-base z-10 px-9 py-6 relative text-90 w-full">
47
       <p>怎么可能有顺序呢，当然是随机的~ It's random</p><br />
48
       <h2 id="common-links">个人收藏</h2>
49
       <FriendList list={friends[0]} /><br />
50
       <h2 id="special-links">先友后链</h2>
51
       <FriendList list={friends[1]} /><br />
52
       <h2 id="special-links">先链后友</h2>
53
       <FriendList list={friends[2]} /><br />
54
       <h2 id="special-links">特殊链接</h2>
55
       <FriendList list={friends[3]} /><br />
56

57
       <!-- apply-links -->
58
       <Markdown class="mt-2">
59
         <h2 id="apply-links">Apply Links</h2>
60
         <p>本站信息（点击即可复制）:</p>
61
         <blockquote
62
           class="not-prose grid grid-cols-[auto_1fr] gap-x-2 break-words border-s-4 ps-4"
63
         >
64
           {
65
             linksConf.applyTip.map(({ name, val }) => {
66
               const script = `navigator.clipboard.writeText('${val}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'Copied "${val}" to clipboard!'}}))`;
67
               return (
68
                 <>
69
                   <span class="text-end">{name}:</span>
70
                   <samp class="cursor-pointer" onclick={script}>
71
                     {val}
72
                   </samp>
73
                 </>
74
               );
75
             })
76
           }
77
         </blockquote>
78
         <p>
79
           可通过下方留言或 <a href={linkEditPage} target="_blank">提交 PR</a> 申请友链。此外申请说明：<br
80
           />
81
           Apply your link by leaving comment or <a
82
             href={linkEditPage}
83
             target="_blank">Submitting a PR</a
84
           >. Additional info:
85
         </p>
86

87
       </Markdown>
88
     </div>
89
   </div>
90
 </MainGridLayout>

修改i18n信息

在 ./src/i18n/i18nKey.ts 文件中填入 friends = "friends", 一项：

1
enum I18nKey {
2
  ...
3
  author = "author",
4
  publishedAt = "publishedAt",
5
  license = "license",
6
  friends = "friends",
7
  ...
8
}

修改 ./src/i18n/languages 下的文件，此以 zh_CN.ts 为例：

1
export const zh_CN: Translation = {
2
  ...
3
  [Key.author]: "作者",
4
  [Key.publishedAt]: "发布于",
5
  [Key.license]: "许可协议",
6
  [Key.friends]: "友链",
7
  ...
8
}

将友链界面添加至顶栏

修改 ./src/types/config.ts ，添加 Friends 一项

1
export enum LinkPreset {
2
   Home = 0,
3
   Archive = 1,
4
   About = 2,
5
   Friends = 3,
6
  ...
7
}

修改 ./src/config.ts ，添加 LinkPreset.Friends 一项

1
export const navBarConfig: NavBarConfig = {
2
   links: [
3
    ...
4
    LinkPreset.Home,
5
    LinkPreset.Archive,
6
    LinkPreset.About,
7
    LinkPreset.Friends,
8
    ...
9
  ],
10
};

友链朋友圈#

本小节代码主要修改自仓库 cworld1/astro-theme-pure 和 willow-god/Friend-Circle-Lite

willow-god

Friend-Circle-Lite

Waiting for api.github.com...

00K

Waiting...

生成新的 json 文件

在 ./scripts/ 下（或是别的什么地方）新建 generate-format-friends.cjs

1
const fs = require("node:fs");
2
const path = require("node:path");
3

4
// 黑名单：不想订阅的站点名称
5
const blacklist = ["友站名称1", "友站名称2", "友站名称3"];
6
// 只处理前几个分组（与原脚本行为一致）
7
const lastIndex = 3;
8

9
const inputPath = path.resolve(process.cwd(), "public", "links.json");
10
const outputPath = path.resolve(process.cwd(), "public", "friend.json");
11

58 collapsed lines
12
function loadLinks() {
13
  if (!fs.existsSync(inputPath)) {
14
    console.error(`输入文件不存在: ${inputPath}`);
15
    process.exit(2);
16
  }
17
  try {
18
    const raw = fs.readFileSync(inputPath, "utf8");
19
    return JSON.parse(raw);
20
  } catch (err) {
21
    console.error("读取或解析 JSON 失败：", err);
22
    process.exit(2);
23
  }
24
}
25

26
function buildFriendData(data) {
27
  const friends = [];
28

29
  if (!data || !Array.isArray(data.friends)) {
30
    console.warn('输入 JSON 中未找到 "friends" 数组，输出将为空。');
31
    return { friends: [] };
32
  }
33

34
  data.friends.forEach((group, index) => {
35
    if (index < lastIndex) {
36
      const list = Array.isArray(group.link_list) ? group.link_list : [];
37
      const filtered = list.filter(
38
        (item) => item && !blacklist.includes(item.name),
39
      );
40
      filtered.forEach((item) => {
41
        const name = item.name || "";
42
        const link = item.link || "";
43
        const avatar = item.avatar || "";
44
        friends.push([name, link, avatar]);
45
      });
46
    }
47
  });
48

49
  return { friends };
50
}
51

52
function writeOutput(obj) {
53
  try {
54
    const dir = path.dirname(outputPath);
55
    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
56
    fs.writeFileSync(outputPath, JSON.stringify(obj, null, 2), "utf8");
57
    console.log(`已生成：${outputPath}`);
58
  } catch (err) {
59
    console.error("写入输出文件失败：", err);
60
    process.exit(2);
61
  }
62
}
63

64
const data = loadLinks();
65
const friendData = buildFriendData(data);
66
writeOutput(friendData);
67

68
// 导出以便测试或复用（如果以模块方式引入）
69
module.exports = { loadLinks, buildFriendData, writeOutput };

克隆 willow-god/Friend-Circle-Lite 并作为公开仓库

修改你的 Friend-Circle-Lite 仓库中的 ./conf.yaml 文件，使其指向第一步中生成的 json 文件

1
spider_settings:
2
  ...
3
  enable: true
4
  json_url: "https://raw.githubusercontent.com/ChiyoYuki/chiyoyuki.github.io/refs/heads/main/public/friend.json"
5
  ...

修改你的 Friend-Circle-Lite 仓库的设置， Settings-Pages-Build and deployment 中 Source 选择 Deploy from a brench ， Branch 选择 page 分支根目录。然后可以前往 $USER_NAME.github.io/$REPO_NAME 页面查看是否正常生成

在友链界面添加朋友圈

接下来回到博客仓库

修改 ./src/pages/friends.astro 文件，其中 private_api_url 这里修改为上一步生成页面的地址

1
...
2
<Markdown class="mt-2">
3
    <h2 id='small-circle'>Small Circle</h2>
4
    <div id='friend-circle-lite-root' class='not-prose'>Loading...</div>
5
    <script>
6
    import '@/styles/fc.css'
7

8
    import { FriendCircle } from '@/plugins/friend-circle'
9

10
    const fc = new FriendCircle()
11
    fc.init({
12
    private_api_url: 'https://chiyoyuki.uk/Friend-Circle-Lite',
13
    page_turning_number: 10,
14
    error_img: 'https://cravatar.cn/avatar/57d8260dfb55501c37dde588e7c3852c'
15
  })
16
  fc.load()
17
  </script>
18
  <h2 id="apply-links">Apply Links</h2>
19
  <p>本站信息 The site information:</p>
20
  ...
21
</Markdown>
22
...

在 ./src/plugins/ 文件夹下添加 friend-circle.ts 文件

1
interface Config {
2
  private_api_url: string;
3
  page_turning_number: number;
4
  error_img: string;
5
}
6

7
interface Article {
254 collapsed lines
8
  title: string;
9
  link: string | URL;
10
  avatar: string;
11
  author: string;
12
  created: string;
13
}
14

15
interface ArticleData {
16
  article_data: Article[];
17
  statistical_data: {
18
    friends_num: number;
19
    active_num: number;
20
    article_num: number;
21
    last_updated_time: string;
22
  };
23
}
24

25
export class FriendCircle {
26
  config!: Config;
27
  root!: HTMLElement;
28
  start = 0;
29
  allArticles: Article[] = [];
30
  container!: HTMLElement;
31
  randomArticleContainer!: HTMLElement;
32
  statsContainer!: HTMLElement;
33
  loadMoreBtn!: HTMLButtonElement;
34
  modal!: HTMLElement;
35

36
  load() {
37
    this.loadMoreArticles();
38
    this.loadMoreBtn.addEventListener(
39
      "click",
40
      this.loadMoreArticles.bind(this),
41
    );
42
    window.onclick = (event) => {
43
      const modal = document.getElementById("modal");
44
      if (event.target === modal) {
45
        this.hideModal();
46
      }
47
    };
48
  }
49

50
  init(config: Partial<Config>) {
51
    this.config = {
52
      private_api_url: config.private_api_url || "",
53
      page_turning_number: config.page_turning_number || 20,
54
      error_img:
55
        config.error_img ||
56
        "https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite@latest/static/favicon.ico",
57
    };
58

59
    this.root = document.getElementById(
60
      "friend-circle-lite-root",
61
    ) as HTMLElement;
62
    if (!this.root) return;
63

64
    this.root.innerHTML = "";
65
    this.createContainers();
66
  }
67

68
  private createContainers() {
69
    this.randomArticleContainer = this.createElement("div", {
70
      id: "random-article",
71
    });
72
    this.container = this.createElement("div", {
73
      className: "articles-container",
74
      id: "articles-container",
75
    });
76
    this.loadMoreBtn = this.createElement("button", {
77
      id: "load-more-btn",
78
      innerText: "Load more",
79
    }) as HTMLButtonElement;
80
    this.statsContainer = this.createElement("div", {
81
      id: "stats-container",
82
    });
83

84
    this.root.append(
85
      this.randomArticleContainer,
86
      this.container,
87
      this.loadMoreBtn,
88
      this.statsContainer,
89
    );
90
  }
91

92
  private createElement<K extends keyof HTMLElementTagNameMap>(
93
    tag: K,
94
    attributes: Partial<HTMLElementTagNameMap[K]>,
95
  ): HTMLElementTagNameMap[K] {
96
    const element = document.createElement(tag);
97
    Object.assign(element, attributes);
98
    return element;
99
  }
100

101
  loadMoreArticles() {
102
    const cacheKey = "friend-circle-lite-cache";
103
    const cacheTimeKey = "friend-circle-lite-cache-time";
104
    const cacheTime = localStorage.getItem(cacheTimeKey);
105
    const now = Date.now();
106

107
    if (cacheTime && now - Number(cacheTime) < 10 * 60 * 1000) {
108
      const cachedDataString = localStorage.getItem(cacheKey);
109
      const cachedData = cachedDataString
110
        ? JSON.parse(cachedDataString)
111
        : null;
112
      if (cachedData) {
113
        this.processArticles(cachedData);
114
        return;
115
      }
116
    }
117

118
    fetch(`${this.config.private_api_url}all.json`)
119
      .then((response) => response.json())
120
      .then((data) => {
121
        localStorage.setItem(cacheKey, JSON.stringify(data));
122
        localStorage.setItem(cacheTimeKey, now.toString());
123
        this.processArticles(data);
124
      })
125
      .finally(() => {
126
        this.loadMoreBtn.innerText = "Load more";
127
      });
128
  }
129

130
  processArticles({ article_data, statistical_data }: ArticleData) {
131
    this.allArticles = article_data;
132
    this.updateStats(statistical_data);
133
    this.displayRandomArticle();
134
    this.displayArticles();
135
  }
136

137
  private updateStats(stats: ArticleData["statistical_data"]) {
138
    this.statsContainer.innerHTML = `
139
      <div>${stats.friends_num} links with ${stats.active_num} active | ${stats.article_num} articles in total</div>
140
      <div>Updated at ${stats.last_updated_time}</div>
141
      <div>Powered by <a href="https://github.com/willow-god/Friend-Circle-Lite" target="_blank">FriendCircleLite</a><br></div>
142
    `;
143
  }
144

145
  private displayArticles() {
146
    const articles = this.allArticles.slice(
147
      this.start,
148
      this.start + this.config.page_turning_number,
149
    );
150
    articles.forEach((article) => {
151
      this.createArticleCard(article);
152
    });
153
    this.start += this.config.page_turning_number;
154

155
    if (this.start >= this.allArticles.length) {
156
      this.loadMoreBtn.style.display = "none";
157
    }
158
  }
159

160
  private createArticleCard(article: Article) {
161
    const card = document.createElement("div");
162
    card.className = "article";
163
    card.innerHTML = `
164
      <div class="article-image author-click">
165
        <img class="no-lightbox" src="${article.avatar || this.config.error_img}" onerror="this.src='${this.config.error_img}'">
166
      </div>
167
      <div class="article-container">
168
        <div class="article-author author-click">${article.author}</div>
169
        <a class="article-title" href="${article.link instanceof URL ? article.link.toString() : article.link}" target="_blank">${article.title}</a>
170
        <div class="article-date">️${article.created.substring(0, 10)}</div>
171
      </div>
172
    `;
173
    card.querySelectorAll(".author-click").forEach((el) => {
174
      el.addEventListener("click", () => {
175
        this.showAuthorArticles(
176
          article.author,
177
          article.avatar,
178
          article.link,
179
        );
180
      });
181
    });
182
    this.container.appendChild(card);
183
  }
184

185
  displayRandomArticle() {
186
    const randomArticle =
187
      this.allArticles[Math.floor(Math.random() * this.allArticles.length)];
188
    this.randomArticleContainer.innerHTML = `
189
      <div class="random-title">Random Poll</div>
190
      <div class="article-container">
191
        <div class="article-author">${randomArticle.author}</div>
192
        <a class="article-title" href="${randomArticle.link}" target="_blank">${randomArticle.title}</a>
193
        <div class="article-date">️${randomArticle.created.substring(0, 10)}</div>
194
      </div>
195
      <button id="random-refresh">
196
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M2 12.08c-.006-.862.91-1.356 1.618-.975l.095.058l2.678 1.804c.972.655.377 2.143-.734 2.007l-.117-.02l-1.063-.234a8.002 8.002 0 0 0 14.804.605a1 1 0 0 1 1.82.828c-1.987 4.37-6.896 6.793-11.687 5.509A10 10 0 0 1 2 12.08m.903-4.228C4.89 3.482 9.799 1.06 14.59 2.343a10 10 0 0 1 7.414 9.581c.007.863-.91 1.358-1.617.976l-.096-.058l-2.678-1.804c-.972-.655-.377-2.143.734-2.007l.117.02l1.063.234A8.002 8.002 0 0 0 4.723 8.68a1 1 0 1 1-1.82-.828"/></g></svg>
197
      </button>
198
    `;
199
    this.randomArticleContainer
200
      .querySelector("button#random-refresh")
201
      ?.addEventListener("click", (event) => {
202
        event.preventDefault();
203
        this.displayRandomArticle();
204
      });
205
  }
206

207
  // Enable modal
208
  showAuthorArticles(author: string, avatar: string, link: string | URL) {
209
    if (!document.getElementById("fclite-modal")) {
210
      const modal = this.createElement("div", {
211
        id: "modal",
212
        className: "modal",
213
      });
214
      modal.innerHTML = `
215
      <div class="modal-content">
216
        <div class="modal-header">
217
          <img class="modal-author-avatar" src="${avatar || this.config.error_img}" alt="">
218
          <a class="modal-author-name-link" href="${new URL(link.toString()).origin}" target="_blank">${author}</a>
219
        </div>
220
        <div id="modal-articles-container"></div>
221
      </div>
222
      `;
223
      this.root.appendChild(modal);
224
    }
225
    this.modal = document.getElementById("modal") as HTMLElement;
226
    const modalArticlesContainer = document.getElementById(
227
      "modal-articles-container",
228
    ) as HTMLElement;
229
    const authorArticles = this.allArticles.filter(
230
      (article) => article.author === author,
231
    );
232
    authorArticles.slice(0, 4).forEach((article) => {
233
      const articleTemplate = `
234
        <div class="modal-article">
235
          <a class="modal-article-title" href="${article.link instanceof URL ? article.link.toString() : article.link}" target="_blank">${article.title}</a>
236
          <div class="modal-article-date">${article.created.substring(0, 10)}</div>
237
        </div>`;
238
      modalArticlesContainer.insertAdjacentHTML(
239
        "beforeend",
240
        articleTemplate,
241
      );
242
    });
243

244
    this.modal.style.display = "block";
245
    setTimeout(() => {
246
      this.modal.classList.add("modal-open");
247
    }, 10);
248
  }
249

250
  hideModal() {
251
    this.modal.classList.remove("modal-open");
252
    this.modal.addEventListener(
253
      "transitionend",
254
      () => {
255
        this.modal.style.display = "none";
256
        this.root.removeChild(this.modal);
257
      },
258
      { once: true },
259
    );
260
  }
261
}

在 ./src/styles/ 文件夹下添加 fc.css 文件

1
/* Random article */
2
#random-article {
3
  display: flex;
4
  margin-bottom: 0.7rem;
5
  column-gap: 0.7rem;
6
  align-items: center;
7
}
233 collapsed lines
8
.random-title {
9
  color: hsl(var(--foreground));
10
  white-space: nowrap;
11
}
12
#random-refresh {
13
  height: 2.35rem;
14
  aspect-ratio: 1;
15
  display: grid;
16
  place-items: center;
17
  border-radius: 0.75rem;
18
  border: 1px solid hsl(var(--border));
19
  transition: background-color 0.2s;
20
}
21
#random-refresh:hover {
22
  background-color: hsl(var(--primary-foreground));
23
}
24
#random-refresh svg {
25
  width: 1.25rem;
26
  height: 1.25rem;
27
}
28
@media (max-width: 640px) {
29
  #random-article {
30
    flex-wrap: wrap;
31
    row-gap: 0.3rem;
32
    margin-bottom: 1.5rem;
33
  }
34
  .random-title {
35
    flex-grow: 1;
36
  }
37
  .article-container {
38
    order: 3;
39
    flex-basis: 100%;
40
  }
41
  #random-refresh {
42
    height: max-content;
43
    padding: 0.2rem;
44
  }
45
}
46

47
/* Modal */
48
.modal {
49
  position: fixed;
50
  top: 0;
51
  left: 0;
52
  width: 100%;
53
  height: 100%;
54
  background-color: hsl(var(--background) / 0.3);
55
  --tw-blur: blur(24px);
56
  backdrop-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
57
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
58
    var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
59
  -webkit-backdrop-filter: var(--tw-blur) var(--tw-brightness)
60
    var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate)
61
    var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
62
  z-index: 999;
63
  opacity: 0;
64
  visibility: hidden;
65
  transition:
66
    opacity 0.3s ease-in-out,
67
    visibility 0.3s ease-in-out;
68
}
69
.modal.modal-open {
70
  opacity: 1;
71
  visibility: visible;
72
}
73
.modal-content {
74
  opacity: 0;
75
  position: relative;
76
  top: 50%;
77
  left: 50%;
78
  transform: translate(-50%, -50%) translateY(-50px);
79
  width: 40rem;
80
  z-index: 1000;
81
  max-height: 90%;
82
  transition:
83
    transform 0.3s ease-in-out,
84
    opacity 0.3s ease-in-out;
85
  overflow: hidden;
86
  display: flex;
87
  flex-direction: column;
88
}
89
@media screen and (max-width: 675px) {
90
  .modal-content {
91
    width: 90%;
92
  }
93
}
94
.modal.modal-open .modal-content {
95
  transform: translate(-50%, -50%) translateY(0);
96
  opacity: 1;
97
}
98
.modal-header {
99
  display: flex;
100
  justify-content: center;
101
  align-items: center;
102
  column-gap: 0.9rem;
103
  padding: 0.7rem 1rem;
104
}
105
.modal-author-avatar {
106
  border-radius: 999px;
107
  width: 3rem;
108
  height: 3rem;
109
}
110
.modal-author-name-link {
111
  text-decoration: none;
112
}
113
#modal-articles-container {
114
  background-color: hsl(var(--primary-foreground));
115
  border: 1px solid hsl(var(--border));
116
  padding: 0.7rem 0.7rem;
117
  border-radius: 0.75rem;
118
  overflow-y: scroll;
119
  display: flex;
120
  flex-direction: column;
121
  row-gap: 0.7rem;
122
}
123
.modal-article .modal-article-title {
124
  cursor: pointer;
125
  text-decoration: none;
126
  display: -webkit-box;
127
  -webkit-line-clamp: 2;
128
  line-clamp: 2;
129
  -webkit-box-orient: vertical;
130
  overflow: hidden;
131
  text-overflow: ellipsis;
132
}
133
.modal-article .modal-article-date {
134
  font-size: 0.75rem;
135
  line-height: 1rem;
136
  text-align: right;
137
}
138

139
/* Articles */
140
.articles-container {
141
  display: flex;
142
  flex-direction: column;
143
  row-gap: 0.7rem;
144
}
145
.article {
146
  display: flex;
147
  align-items: center;
148
  column-gap: 0.7rem;
149
}
150
.article-image img {
151
  border-radius: 999px;
152
  min-width: 2rem;
153
  min-height: 2rem;
154
  width: 2rem;
155
  height: 2rem;
156
}
157
.article-container {
158
  flex-grow: 1;
159
  border-radius: 0.75rem;
160
  padding: 0.3rem 1rem;
161
  border: 1px solid hsl(var(--border));
162
  display: flex;
163
  align-items: center;
164
  column-gap: 0.6rem;
165
  transition: background-color 0.2s;
166
}
167
.article-container:hover {
168
  background-color: hsl(var(--primary-foreground));
169
}
170
.author-click {
171
  cursor: pointer;
172
}
173
.article-author {
174
  white-space: nowrap;
175
}
176
.article-title {
177
  overflow: hidden;
178
  display: -webkit-box;
179
  -webkit-box-orient: vertical;
180
  -webkit-line-clamp: 1;
181
  line-clamp: 1;
182
  flex-grow: 1;
183
  text-decoration: none;
184
  color: hsl(var(--foreground));
185
  transition: color 0.2s;
186
}
187
.article-date {
188
  font-family:
189
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
190
    "Courier New", monospace;
191
  font-size: 0.75rem;
192
  line-height: 1rem;
193
}
194
@media (max-width: 640px) {
195
  .article {
196
    align-items: start;
197
  }
198
  .article-image {
199
    margin-top: 0.3rem;
200
  }
201
  .article-container {
202
    flex-wrap: wrap;
203
  }
204
  .article-author {
205
    flex-grow: 1;
206
  }
207
  .article-title {
208
    order: 3;
209
    flex-basis: 100%;
210
  }
211
}
212
/* Load more */
213
#load-more-btn {
214
  background-color: hsl(var(--primary-foreground));
215
  border: 1px solid hsl(var(--border));
216
  border-radius: 0.75rem;
217
  padding: 0.2rem 1rem;
218
  margin: 0.75rem auto;
219
  display: block;
220
  transition:
221
    color 0.2s,
222
    background-color 0.2s;
223
}
224
#load-more-btn:hover {
225
  color: hsl(var(--primary));
226
  background-color: hsl(var(--input));
227
}
228
/* Status */
229
#stats-container {
230
  font-size: 0.75rem;
231
  line-height: 1rem;
232
  text-align: right;
233
}
234
#stats-container > * {
235
  margin-bottom: 0.2rem;
236
}
237
#stats-container a {
238
  color: hsl(var(--foreground));
239
  text-decoration: none;
240
}

理论上这样就配置好了，需要注意的是当前配置是半自动的，每次增删调改友链后要重新生成 json 文件，你需要在博客仓库根目录下执行如下指令：

1
node scripts/generate-format-friends.cjs

本文封面为作品Summer Pockets REFLECTION BLUE中的 CG