实现今日一言功能

1
---
2
import WidgetLayout from "@/components/common/WidgetLayout.astro";
3
import { getCollection } from "astro:content";
4

5
// 从 content/ziyuan/quote.md 读取名言数据
6
const ziyuanEntries = await getCollection("ziyuan");
7
const quoteEntry = ziyuanEntries.find((e) => e.id === "quote");
8
const quoteData = quoteEntry?.data as any;
9
const quotes = quoteData?.quotes || [];
10

11
interface Props {
12
  class?: string;
13
  style?: string;
14
}
15

16
const { class: className, style } = Astro.props;
17

18
// 使用日期作为随机种子，确保同一天显示相同的名言
19
const today = new Date();
20
const dateStr = today.toISOString().split("T")[0];
21
const seed = dateStr.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
22
const randomIndex = seed % quotes.length;
23
const quote = quotes[randomIndex] || { text: "暂无名言", author: "" };
24
---
25

26
<WidgetLayout name="✨ 今日一言" id="quote-of-the-day" class={className} style={style}>
27
  <div class="quote-content">
28
    <blockquote class="quote-text">
29
      <span class="quote-mark">"</span>
30
      {quote.text}
31
      <span class="quote-mark">"</span>
32
    </blockquote>
33
    <cite class="quote-author">—— {quote.author}</cite>
34
  </div>
35
</WidgetLayout>
36

37
<style>
38
  .quote-content {
39
    display: flex;
40
    flex-direction: column;
41
    gap: 0.75rem;
42
    padding: 0.5rem 0;
43
  }
44

45
  .quote-text {
46
    position: relative;
47
    font-style: italic;
48
    font-size: 0.9rem;
49
    line-height: 1.6;
50
    color: var(--text-color);
51
    padding: 0 0.5rem;
52
    margin: 0;
53
  }
54

55
  .quote-mark {
56
    font-size: 1.5rem;
57
    line-height: 0;
58
    vertical-align: middle;
59
    color: var(--primary);
60
    opacity: 0.6;
61
    font-family: Georgia, serif;
62
  }
63

64
  .quote-author {
65
    display: block;
66
    text-align: right;
67
    font-size: 0.75rem;
68
    color: var(--content-meta);
69
    font-style: normal;
70
    margin-top: 0.25rem;
71
  }
72

73
  /* 深色模式优化 */
74
  :global(html.dark) .quote-text {
75
    color: var(--text-color);
76
  }
77

78
  /* 悬停效果 */
79
  :global(.quote-content:hover .quote-text) {
80
    color: var(--primary);
81
    transition: color 0.2s ease;
82
  }
83
</style>

1
const ziyuanCollection = defineCollection({
2
  loader: glob({ pattern: "**/*.md", base: "./src/content/ziyuan" }),
3
  schema: z.union([
4
    z.object({
5
      title: z.string(),
6
      content: z.string(),
7
      closable: z.boolean().optional().default(true),
8
      link: z
9
        .object({
10
          enable: z.boolean().optional().default(true),
11
          text: z.string(),
12
          url: z.string(),
13
          external: z.boolean().optional().default(false),
14
        })
15
        .optional(),
16
      quotes: z.undefined().optional(),
17
    }),
18
    z.object({
19
      title: z.string(),
20
      quotes: z.array(
21
        z.object({
22
          text: z.string(),
23
          author: z.string(),
24
        })
25
      ),
26
      content: z.undefined().optional(),
27
      closable: z.undefined().optional(),
28
      link: z.undefined().optional(),
29
    }),
30
  ]),
31
});
32

33
export const collections = {
34
  ziyuan: ziyuanCollection,
35
};