Merge branch 'dev'

Update friends

.github/workflows/deploy-blog.yml

@@ -46,6 +46,9 @@ jobs:
     needs: sync-blog-content
     if: github.event_name == 'push'
     runs-on: ubuntu-latest
+    environment:
+      name: production
+      url: https://blog.cloverta.top
 
     env:
       DEPLOY_HOST: ${{ vars.DEPLOY_HOST }}
@@ -105,6 +108,9 @@ jobs:
   manual-deploy:
     if: github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
+    environment:
+      name: production
+      url: https://blog.cloverta.top
 
     env:
       DEPLOY_HOST: ${{ vars.DEPLOY_HOST }}

src/components/FriendlyLinks/FriendlyLinkList.astro

@@ -23,6 +23,8 @@ const links = await getCollection("friends");
 
 <style>
     .friendly-link-list {
+        max-width: 770px;
+        margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 1rem;

src/components/FriendlyLinks/FriendsDescription.astro

@@ -0,0 +1,108 @@
+---
+import { getLangFromUrl, getTranslations } from "@/i18n";
+import "@/styles/global.css";
+
+const lang = getLangFromUrl(Astro.url);
+const t = getTranslations(lang);
+---
+
+<div class="description">
+    <div class="image-wrap">
+        <img
+            src="https://files.seeusercontent.com/2026/04/17/nOg4/7tx5GS3nAtOXM577XE9VOe0LUU8.webp"
+            alt="nichijo.webp"
+        />
+        <p class="caption">{t.friends.imgDesc}</p>
+    </div>
+
+    <h1>{t.friends.title}</h1>
+    <div class="content">
+        {t.friends.content.map((line: string) => <p set:html={line} />)}
+    </div>
+    <div class="friend-code-block">
+        <pre><code>---
+name: 'CLoverta的博客'
+description: "欢迎光临，请进门左转"
+url: "https://blog.cloverta.top"
+avatar: 'https://s2.loli.net/2025/11/22/tiDKuzdqycx1v9B.png' 
+---</code></pre>
+    </div>
+    <!-- <div class="player">
+        <iframe
+            data-testid="embed-iframe"
+            style="border-radius:2px"
+            src="https://open.spotify.com/embed/track/2vuSiplO7RnGkoyw2gH96M?utm_source=generator"
+            width="450px"
+            height="80"
+            frameborder="0"
+            allowfullscreen=""
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            loading="lazy"></iframe>
+    </div> -->
+</div>
+<style>
+    .player {
+        margin-top: 1.5rem;
+        display: flex;
+        justify-content: center;
+    }
+
+    .content p {
+        line-height: 1.8;
+        margin: 1rem 0;
+    }
+
+    .description {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+    }
+
+    .friend-code-block {
+        background: #fbf5f2;
+        border: 1px solid #8fa1ad;
+        border-radius: 3px;
+        padding: 0rem;
+        overflow-x: auto;
+    }
+
+    .friend-code-block pre {
+        margin: 0;
+    }
+
+    .friend-code-block code {
+        font-family: monospace;
+        white-space: pre;
+    }
+
+    .image-wrap {
+        width: fit-content;
+        margin: 0 auto;
+    }
+
+    .image-wrap img {
+        width: calc((3.8em * 4) * 16 / 5);
+        height: calc(3.4em * 4);
+        aspect-ratio: 16 / 5;
+        object-fit: cover;
+        object-position: center;
+        display: block;
+        margin: 0 auto;
+        border: 2px dashed gray;
+        filter: sepia(0.3) saturate(1.08) hue-rotate(-12deg) brightness(0.97);
+    }
+
+    .image-wrap .caption {
+        margin-top: 0.3rem;
+        text-align: right;
+        color: #888;
+        font-style: italic;
+        font-size: 0.9rem;
+    }
+
+    @media (max-width: 600px) {
+        .description img {
+            height: calc(2.6em * 4);
+        }
+    }
+</style>

src/i18n/en.ts

@@ -42,6 +42,7 @@ export default {
             "The design of this blog was inspired by:",
             '· <a href="https://ex-tasty.com/">極限風味</a>',
             '· <a href="https://blog.cloudti.de/">Parsifal\'s Blog</a>',
+            '· <a href="https://www.kokosa.icu/">Kokosa\'s Notebook</a>',
             "· And some other websites whose names I have unfortunately forgotten",
             "Thank you for your ideas and passion!",
             "In addition, this blog is open source under MIT License. You can find its source code through the link in the footer.",
@@ -54,5 +55,15 @@ export default {
     footer: {
         githubIntro: 'See more on <a href="https://github.com/ClovertaTheTrilobita">Github</a>!',
         repoIntro: 'This blog is fully open source at <a href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>'
+    },
+    friends: {
+        title: "Friends",
+        content: [
+            "Thank you for making it this far.",
+            "These are my friends, and you're very welcome to exchange links with me too!",
+            'You can send your link information to <a href="mailto:cloverta@petalmail.com">my email</a>.',
+            "The format is as follows:"
+        ],
+        imgDesc: "Our everyday lives may, in fact, be a series of miracles."
     }
 };

src/i18n/zh.ts

@@ -42,6 +42,7 @@ export default {
             "这个博客在设计理念上参考了：",
             '· <a href="https://ex-tasty.com/">極限風味</a>',
             '· <a href="https://blog.cloudti.de/">Parsifal\'s Blog</a>',
+            '· <a href="https://www.kokosa.icu/">Kokosa\'s Notebook</a>',
             "· 还有一些已经忘记名字的网站",
             "谢谢你们的想法和热情！",
             "此外，这个博客的源码使用 MIT 协议开源，你可以从页脚的链接处获取它的源代码。",
@@ -54,5 +55,15 @@ export default {
     footer: {
         githubIntro: '在 <a href="https://github.com/ClovertaTheTrilobita">Github</a> 查看更多！',
         repoIntro: '这个博客完全开源于 <a href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>'
+    },
+    friends: {
+        title: "友链",
+        content: [
+            "感谢你能看到这里。",
+            "这里是我的朋友们，也非常欢迎你来一起交换友链！",
+            '你可以把友链信息发送到<a href="mailto:cloverta@petalmail.com">我的邮箱</a>。',
+            "友链的格式如下："
+        ],
+        imgDesc: "——我们日复一日度过的日常，也许就是接连发生的奇迹"
     }
 };

src/layouts/BaseLayout.astro

@@ -33,6 +33,10 @@ const {
 			href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap"
 			rel="stylesheet"
 		/>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="generator" content={Astro.generator} />
 		<title>{pageTitle}</title>
 	</head>

src/pages/[lang]/friends.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import FriendlyLinkList from "@/components/FriendlyLinks/FriendlyLinkList.astro";
+import FriendsDescription from "@/components/FriendlyLinks/FriendsDescription.astro";
 import { getLangFromUrl, getTranslations } from "@/i18n";
 import "@/styles/global.css";
 
@@ -14,5 +15,16 @@ const headerTitle = lang === "zh" ? "友情链接" : "Friends";
 ---
 
 <BaseLayout pageTitle=`${headerTitle} - ${t.banner.title}`>
+    <FriendsDescription />
+    <div class="section-divider"></div>
     <FriendlyLinkList />
 </BaseLayout>
+
+<style>
+    .section-divider {
+        height: 1px;
+        background: #cdd2d8;
+        margin: 1.5rem 0;
+        opacity: 0.8;
+    }
+</style>