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().nullable().default(""),
11
    lang: z.string().optional().default(""),
12
    // 内部使用的导航字段
13
    prevTitle: z.string().default(""),
14
    prevSlug: z.string().default(""),
15
    nextTitle: z.string().default(""),
16
    nextSlug: z.string().default(""),
17
  }),
18
});

1
export async function getSortedPosts() {
2
  const sorted = await getRawSortedPosts(); // 按发布日期降序
3

4
  // 构建前后篇导航
5
  for (let i = 1; i < sorted.length; i++) {
6
    sorted[i].data.nextSlug = sorted[i - 1].slug;
7
    sorted[i].data.nextTitle = sorted[i - 1].data.title;
8
  }
9
  for (let i = 0; i < sorted.length - 1; i++) {
10
    sorted[i].data.prevSlug = sorted[i + 1].slug;
11
    sorted[i].data.prevTitle = sorted[i + 1].data.title;
12
  }
13
  return sorted;
14
}

1
:root
2
  --radius-large: 1rem
3
  --primary: oklch(0.70 0.14 var(--hue))
4
  --page-bg: oklch(0.95 0.01 var(--hue))
5
  --card-bg: white
6
  // ... 更多变量
7

8
// 暗色模式覆盖
9
:root.dark
10
  --primary: oklch(0.75 0.14 var(--hue))
11
  --page-bg: oklch(0.16 0.014 var(--hue))
12
  --card-bg: oklch(0.23 0.015 var(--hue))

1
module.exports = {
2
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
3
  darkMode: "class", // 手动切换暗色模式
4
  theme: {
5
    extend: {
6
      fontFamily: {
7
        sans: ["MiSans", "sans-serif", ...defaultTheme.fontFamily.sans],
8
      },
9
    },
10
  },
11
}

1
import { toString } from "mdast-util-to-string";
2
import getReadingTime from "reading-time";
3

4
export function remarkReadingTime() {
5
  return (tree, { data }) => {
6
    const textOnPage = toString(tree);
7
    const readingTime = getReadingTime(textOnPage);
8
    // 注入到 frontmatter
9
    data.astro.frontmatter.minutes = Math.max(1, Math.round(readingTime.minutes));
10
    data.astro.frontmatter.words = readingTime.words;
11
  };
12
}

1
export function remarkExcerpt() {
2
  return (tree, { data }) => {
3
    let excerpt = "";
4
    // 遍历 AST，提取前 150 个字符
5
    for (const node of tree.children) {
6
      if (node.type === "paragraph") {
7
        excerpt += extractText(node);
8
        if (excerpt.length > 150) break;
9
      }
10
    }
11
    data.astro.frontmatter.excerpt = excerpt.slice(0, 150) + "...";
12
  };
13
}

1
rehypePlugins: [
2
  [rehypeComponents, {
3
    components: {
4
      github: GithubCardComponent,
5
      tip: (x, y) => AdmonitionComponent(x, y, "tip"),
6
      // ...
7
    }
8
  }]
9
]

1
<div class="flex flex-wrap gap-2">
2
    {categories.map(category =>
3
        <a href={category.url}
4
           class="btn-regular rounded-full px-3 py-1 text-sm">
5
            {category.name} {category.count}
6
        </a>
7
    )}
8
</div>

1
---
2
export async function getStaticPaths() {
3
    const blogEntries = await getSortedPosts();
4
    return blogEntries.map((entry) => ({
5
        params: { slug: entry.slug },
6
        props: { entry },
7
    }));
8
}
9

10
const { entry } = Astro.props;
11
const { Content, headings } = await entry.render();
12
---

1
{
2
  "scripts": {
3
    "build": "astro build && pagefind --site dist"
4
  }
5
}

1
<script>
2
  let keyword = "";
3
  let results = [];
4

5
  async function search() {
6
    if (!window.pagefind) return;
7
    const response = await window.pagefind.search(keyword);
8
    results = await Promise.all(
9
      response.results.map(item => item.data())
10
    );
11
  }
12
</script>
13

14
<div id="search-bar">
15
    <input bind:value={keyword} on:input={search} placeholder="Search..." />
16
</div>
17

18
<div id="search-results">
19
    {#each results as item}
20
        <a href={item.url}>
21
            <div>{item.meta.title}</div>
22
            <div>{@html item.excerpt}</div>
23
        </a>
24
    {/each}
25
</div>

1
---
2
import Layout from "@/layouts/Layout.astro";
3
---
4

5
<Layout title="友链 | Friends">
6
    <div class="max-w-4xl mx-auto px-4 py-8">
7
        <h1 class="text-4xl font-bold mb-8 text-center">✨ 友情链接</h1>
8

9
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
10
            <!-- 友链卡片 -->
11
            <a href="https://example.com"
12
               class="card-base p-4 flex items-center gap-4
13
                      hover:border-[var(--primary)] transition-all">
14
                <img src="avatar.jpg" class="w-12 h-12 rounded-full" />
15
                <div>
16
                    <h3 class="font-semibold">站点名称</h3>
17
                    <p class="text-sm text-[var(--text-muted)]">站点描述</p>
18
                </div>
19
            </a>
20
        </div>
21
    </div>
22
</Layout>

1
export const navBarConfig: NavBarConfig = {
2
    links: [
3
        LinkPreset.Home,
4
        LinkPreset.Archive,
5
        {
6
            name: "友链✨",
7
            url: "/friends/",
8
        },
9
        LinkPreset.About,
10
    ],
11
};

1
---
2
interface Props {
3
    title: string;
4
    content: string;
5
}
6
const { title, content } = Astro.props;
7
---
8

9
<div class="card-base p-6 my-4 border-l-4 border-[var(--primary)]">
10
    <h3 class="text-xl font-bold mb-2">{title}</h3>
11
    <p class="text-[var(--text-muted)]">{content}</p>
12
</div>

1
import { MyComponent } from "./src/components/MyComponent.astro";
2

3
rehypePlugins: [
4
    [rehypeComponents, {
5
        components: {
6
            mycomponent: MyComponent,
7
        }
8
    }]
9
]