1
---
2
title: 我的置顶文章
3
published: 2024-01-01
4
description: 这是最重要的文章
5
tags: [重要]
6
pinned: true
7
---

1
import { defineCollection, z } from "astro:content";
2

3
const postsCollection = defineCollection({
4
  schema: z.object({
5
    title: z.string(),
6
    published: z.date(),
7
    updated: z.date().optional(),
8
    draft: z.boolean().optional().default(false),
9
    description: z.string().optional().default(""),
10
    image: z.string().optional().default(""),
11
    tags: z.array(z.string()).optional().default([]),
12
    category: z.string().optional().nullable().default(""),
13
    lang: z.string().optional().default(""),
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
    pinned: z.boolean().optional().default(false),
21
  }),
22
});
23
const specCollection = defineCollection({
24
  schema: z.object({}),
25
});
26
export const collections = {
27
  posts: postsCollection,
28
  spec: specCollection,
29
};

1
import { type CollectionEntry, getCollection } from "astro:content";
2
import I18nKey from "@i18n/i18nKey";
3
import { i18n } from "@i18n/translation";
4
import { getCategoryUrl } from "@utils/url-utils.ts";
5

6
// // Retrieve posts and sort them by publication date
7
async function getRawSortedPosts() {
8
  const allBlogPosts = await getCollection("posts", ({ data }) => {
9
    return import.meta.env.PROD ? data.draft !== true : true;
10
  });
11

12
  const sorted = allBlogPosts.sort((a, b) => {
13
    // --- 修改开始：置顶逻辑 ---
14
    const pinA = a.data.pinned ?? false;
15
    const pinB = b.data.pinned ?? false;
16

17
    if (pinA !== pinB) {
18
      return pinA ? -1 : 1; // 置顶的排在前面
19
    }
20
    // --- 修改结束 ---
21

22
    const dateA = new Date(a.data.published);
23
    const dateB = new Date(b.data.published);
24
    return dateA > dateB ? -1 : 1;
25
  });
26
  return sorted;
27
}
28

29
export async function getSortedPosts() {
30
  const sorted = await getRawSortedPosts();
31

32
  for (let i = 1; i < sorted.length; i++) {
33
    sorted[i].data.nextSlug = sorted[i - 1].slug;
34
    sorted[i].data.nextTitle = sorted[i - 1].data.title;
35
  }
36
  for (let i = 0; i < sorted.length - 1; i++) {
37
    sorted[i].data.prevSlug = sorted[i + 1].slug;
38
    sorted[i].data.prevTitle = sorted[i + 1].data.title;
39
  }
40

41
  return sorted;
42
}
43
export type PostForList = {
44
  slug: string;
45
  data: CollectionEntry<"posts">["data"];
46
};
47
export async function getSortedPostsList(): Promise<PostForList[]> {
48
  const sortedFullPosts = await getRawSortedPosts();
49

50
  // delete post.body
51
  const sortedPostsList = sortedFullPosts.map((post) => ({
52
    slug: post.slug,
53
    data: post.data,
54
  }));
55

56
  return sortedPostsList;
57
}
58
export type Tag = {
59
  name: string;
60
  count: number;
61
};
62

63
export async function getTagList(): Promise<Tag[]> {
64
  const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
65
    return import.meta.env.PROD ? data.draft !== true : true;
66
  });
67

68
  const countMap: { [key: string]: number } = {};
69
  allBlogPosts.forEach((post: { data: { tags: string[] } }) => {
70
    post.data.tags.forEach((tag: string) => {
71
      if (!countMap[tag]) countMap[tag] = 0;
72
      countMap[tag]++;
73
    });
74
  });
75

76
  // sort tags
77
  const keys: string[] = Object.keys(countMap).sort((a, b) => {
78
    return a.toLowerCase().localeCompare(b.toLowerCase());
79
  });
80

81
  return keys.map((key) => ({ name: key, count: countMap[key] }));
82
}
83

84
export type Category = {
85
  name: string;
86
  count: number;
87
  url: string;
88
};
89

90
export async function getCategoryList(): Promise<Category[]> {
91
  const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
92
    return import.meta.env.PROD ? data.draft !== true : true;
93
  });
94
  const count: { [key: string]: number } = {};
95
  allBlogPosts.forEach((post: { data: { category: string | null } }) => {
96
    if (!post.data.category) {
97
      const ucKey = i18n(I18nKey.uncategorized);
98
      count[ucKey] = count[ucKey] ? count[ucKey] + 1 : 1;
99
      return;
100
    }
101

102
    const categoryName =
103
      typeof post.data.category === "string"
104
        ? post.data.category.trim()
105
        : String(post.data.category).trim();
106

107
    count[categoryName] = count[categoryName] ? count[categoryName] + 1 : 1;
108
  });
109

110
  const lst = Object.keys(count).sort((a, b) => {
111
    return a.toLowerCase().localeCompare(b.toLowerCase());
112
  });
113

114
  const ret: Category[] = [];
115
  for (const c of lst) {
116
    ret.push({
117
      name: c,
118
      count: count[c],
119
      url: getCategoryUrl(c),
120
    });
121
  }
122
  return ret;
123
}

1
---
2
import type { CollectionEntry } from "astro:content";
3
import path from "node:path";
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 ImageWrapper from "./misc/ImageWrapper.astro";
9
import PostMetadata from "./PostMeta.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 | null;
20
  image: string;
21
  description: string;
22
  draft: boolean;
23
  style: string;
24
}
25
const {
26
  entry,
27
  title,
28
  url,
29
  published,
30
  updated,
31
  tags,
32
  category,
33
  image,
34
  description,
35
  style,
36
} = Astro.props;
37
const className = Astro.props.class;
38

39
const hasCover = image !== undefined && image !== null && image !== "";
40

41
const coverWidth = "28%";
42

43
const { remarkPluginFrontmatter } = await entry.render();
44
---
45
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
46
    <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}]}>
47
        <a href={url}
48
           class="transition group w-full block font-bold mb-3 text-3xl text-90
49
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
50
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
51
        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
52
        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
53
        ">
54
            {/* --- 修改开始：置顶图标 --- */}
55
            {entry.data.pinned && (
56
                <Icon
57
                    name="material-symbols:push-pin"
58
                    class="inline-block mr-2 text-[var(--primary)] align-middle text-[1.6rem] mb-1 rotate-45"
59
                ></Icon>
60
            )}
61
            {/* --- 修改结束 --- */}
62

63
            {title}
64
            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
65
            <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>
66
        </a>
67

68
        <!-- metadata -->
69
        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>
70

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

76
        <!-- word count and read time  -->
77
        <div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
78
            <div>
79
                {remarkPluginFrontmatter.words} {" " + i18n(remarkPluginFrontmatter.words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
80
            </div>
81
            <div>|</div>
82
            <div>
83
                {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
84
            </div>
85
        </div>
86

87
    </div>
88

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

105
    {!hasCover &&
106
        <a href={url} aria-label={title} class="!hidden md:!flex btn-regular w-[3.25rem]
107
         absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)]
108
         hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95
109
        ">
110
            <Icon name="material-symbols:chevron-right-rounded"
111
                  class="transition text-[var(--primary)] text-4xl mx-auto">
112
            </Icon>
113
        </a>
114
    }
115
</div>
116
<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>
117

118
<style define:vars={{coverWidth}}>
119
</style>