1
icon({
2
  include: {
3
     mdi: ["*"],
4
    "preprocess: vitePreprocess(),": ["*"],
5
    "fa6-brands": ["*"],
6
    "fa6-regular": ["*"],
7
    "fa6-solid": ["*"],
8
  },
9
}),

1
// 在package.json中添加
2
 "@iconify-json/mdi": "^1.2.3",

1
---
2
import path from "node:path";
3
import type { CollectionEntry } from "astro:content";
4
import { Icon } from "astro-icon/components";
5
import I18nKey from "../i18n/i18nKey";
6
import { i18n } from "../i18n/translation";
7
import { getDir } from "../utils/url-utils";
8
import PostMetadata from "./PostMeta.astro";
9
import ImageWrapper from "./misc/ImageWrapper.astro";
10

11
interface Props {
12
  class?: string;
13
  entry: CollectionEntry<"posts">;
14
  title: string;
15
  url: string;
16
  published: Date;
17
  updated?: Date;
18
  tags: string[];
19
  category: string;
20
  image: string;
21
  description: string;
22
  draft: boolean;
23
  style: string;
24
  pinned?: boolean;
25
}
26
const {
27
  entry,
28
  title,
29
  url,
30
  published,
31
  updated,
32
  tags,
33
  category,
34
  image,
35
  description,
36
  style,
37
  pinned,
38
} = Astro.props;
39
const className = Astro.props.class;
40

41
const hasCover = image !== undefined && image !== null && image !== "";
42

43
const coverWidth = "28%";
44

45
const { remarkPluginFrontmatter } = await entry.render();
46
---
47
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
48
    <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
49
        {pinned && <div class="absolute top-2 right-2 text-[var(--primary)]">
50
            <Icon name="mdi:pin" class="w-5 h-5" />
51
        </div>}
52
        <a href={url}
53
           class="transition group w-full block font-bold mb-3 text-3xl text-90
54
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
55
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
56
        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
57
        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
58
        ">
59
            {title}
60
            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
61
            <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>
62
        </a>
63

48 collapsed lines
64
        <!-- metadata -->
65
        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>
66

67
        <!-- description -->
68
        <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}]}>
69
            { description || remarkPluginFrontmatter.excerpt }
70
        </div>
71

72
        <!-- word count and read time  -->
73
        <div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
74
            <div>{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
75
            <div>|</div>
76
            <div>{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
77
        </div>
78

79
    </div>
80

81
    {hasCover && <a href={url} aria-label={title}
82
                    class:list={["group",
83
                        "max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
84
                        "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
85
                    ]} >
86
        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
87
        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
88
            <Icon name="material-symbols:chevron-right-rounded"
89
                  class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl">
90
            </Icon>
91
        </div>
92
        <ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
93
                  class="w-full h-full">
94
        </ImageWrapper>
95
    </a>}
96

97
    {!hasCover &&
98
        <a href={url} aria-label={title} class="!hidden md:!flex btn-regular w-[3.25rem]
99
         absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)]
100
         hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95
101
        ">
102
            <Icon name="material-symbols:chevron-right-rounded"
103
                  class="transition text-[var(--primary)] text-4xl mx-auto">
104
            </Icon>
105
        </a>
106
    }
107
</div>
108
<div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>
109

110
<style define:vars={{coverWidth}}>
111
</style>

1
const postsCollection = defineCollection({
2
  schema: z.object({
3
    title: z.string(),
4
    published: z.date(),
5
    updated: z.date().optional(),
6
    draft: z.boolean().optional().default(false),
7
    description: z.string().optional().default(""),
8
    image: z.string().optional().default(""),
9
    tags: z.array(z.string()).optional().default([]),
10
    category: z.string().optional().default(""),
11
    lang: z.string().optional().default(""),
12
    comments: z.boolean().optional().default(false),
13
    pinned: z.boolean().optional().default(false),
14

15
    /* For internal use */
16
    prevTitle: z.string().default(""),
17
    prevSlug: z.string().default(""),
18
    nextTitle: z.string().default(""),
19
    nextSlug: z.string().default(""),
20
  }),
21
});

1
export type BlogPostData = {
2
  body: string;
3
  title: string;
4
  published: Date;
5
  description: string;
6
  tags: string[];
7
  draft?: boolean;
8
  image?: string;
9
  category?: string;
10
  prevTitle?: string;
11
  prevSlug?: string;
12
  nextTitle?: string;
13
  nextSlug?: string;
14
  comments?: boolean;
15
  pinned?: boolean;
16
};

1
<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
2
    {page.data.map((entry: CollectionEntry<"posts">) => (
3
        <PostCard
4
                entry={entry}
5
                title={entry.data.title}
6
                tags={entry.data.tags}
7
                category={entry.data.category}
8
                published={entry.data.published}
9
                updated={entry.data.updated}
10
                url={getPostUrlBySlug(entry.slug)}
11
                image={entry.data.image}
12
                description={entry.data.description}
13
                draft={entry.data.draft}
14
               pinned={entry.data.pinned}
15
                class:list="onload-animation"
16
                style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
17
        ></PostCard>
18
    ))}
19
</div>

1
const sorted = allBlogPosts.sort((a, b) => {
2
   // 首先按置顶状态排序
3
   if (a.data.pinned && !b.data.pinned) return -1;
4
   if (!a.data.pinned && b.data.pinned) return 1;
5
   // 然后按发布时间排序
6
  const dateA = new Date(a.data.published);
7
  const dateB = new Date(b.data.published);
8
  return dateA > dateB ? -1 : 1;
9
});