style: PostCard 置顶

src/components/ArchivePanel.svelte

@@ -21,6 +21,7 @@ interface Post {
 		tags: string[];
 		category?: string | null;
 		published: Date;
+		pinned?: boolean;
 	};
 }
 
@@ -131,9 +132,14 @@ onMount(async () => {
                         <div
                                 class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
                      group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
-                     text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
+                     text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden flex items-center gap-2"
                         >
-                            {post.data.title}
+                            {#if post.data.pinned}
+                                <span class="inline-flex shrink-0 items-center gap-1 rounded-full border border-[var(--primary)]/20 bg-[var(--primary)]/10 px-2 py-0.5 text-[11px] font-semibold text-[var(--primary)] leading-none">
+                                    置顶
+                                </span>
+                            {/if}
+                            <span class="overflow-hidden text-ellipsis whitespace-nowrap">{post.data.title}</span>
                         </div>
 
                         <!-- tag list -->

src/components/PostCard.astro

@@ -40,6 +40,7 @@ const className = Astro.props.class;
 const hasCover = image !== undefined && image !== null && image !== "";
 
 const coverWidth = "28%";
+const isPinned = entry.data.pinned;
 const isOutdated = entry.data.outdated;
 
 const { remarkPluginFrontmatter } = await render(entry);
@@ -53,9 +54,21 @@ const { remarkPluginFrontmatter } = await render(entry);
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
         before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
         ">
+            <span class="flex flex-wrap items-center gap-x-3 gap-y-2">
+                {isPinned && (
+                    <span class="inline-flex items-center gap-1 rounded-full border border-[var(--primary)]/20 bg-[var(--primary)]/10 px-2.5 py-1 text-xs font-semibold text-[var(--primary)] leading-none">
+                        <Icon name="material-symbols:keep-rounded" class="text-sm"></Icon>
+                        置顶
+                    </span>
+                )}
+                <span class="min-w-0">
                     {title}
-            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
+                    <span class="inline-flex items-center align-middle whitespace-nowrap">
-            <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
+                        <Icon class="inline text-[2rem] text-[var(--primary)] translate-y-0.5 md:hidden" name="material-symbols:chevron-right-rounded" ></Icon>
+                        <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline translate-y-0.5 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
+                    </span>
+                </span>
+            </span>
         </a>
 
         <!-- metadata -->

src/content.config.ts

@@ -15,6 +15,7 @@ const postsCollection = defineCollection({
         category: z.string().optional().nullable().default(""),
         showcover: z.boolean().optional().default(true),
         customcover: z.string().optional().default(""),
+        pinned: z.boolean().optional().default(false),
         outdated: z.boolean().optional().default(false),
         lang: z.string().optional().default(""),
         prevTitle: z.string().default(""),

src/content/posts/new-domain.md

@@ -1,6 +1,7 @@
 ---
-title: "[置顶] 新域名！"
+title: "新域名！"
-published: 2099-12-31
+published: 2025-08-06
+pinned: true
 tags: ["域名"]
 description: 获得了一个新域名 *这使我充满了决心
 image: /public/pic/domain-inlist-adclosenn.top.png

src/types/config.ts

@@ -101,6 +101,7 @@ export type BlogPostData = {
 	draft?: boolean;
 	image?: string;
 	category?: string;
+	pinned?: boolean;
 	prevTitle?: string;
 	prevSlug?: string;
 	nextTitle?: string;

src/utils/content-utils.ts

@@ -10,6 +10,10 @@ async function getRawSortedPosts() {
 	});
 
 	const sorted = allBlogPosts.sort((a, b) => {
+		if (a.data.pinned !== b.data.pinned) {
+			return a.data.pinned ? -1 : 1;
+		}
+
 		const dateA = new Date(a.data.published);
 		const dateB = new Date(b.data.published);
 		return dateA > dateB ? -1 : 1;