在 Fuwari 中添加 “随机一篇文章” 功能

话不多说，立马开整

部署前，请先阅读以下事项

因为本博客的历史原因，仅随机带标签的文章，忽略没有标签的文章，如果要去除此特性，需要修改以下代码：
1
if (isHomePage) {
2
  const posts = await getCollection('posts');
3
  postUrls = posts
4
    .filter(p => !p.data.draft && p.data.tags.length > 0)
5
    .map(p => getPostUrlBySlug(p.slug));
6
}
包含此组件的页面在进行过渡动画时可能有轻微的抽搐、卡顿感，原因未知。

第一步：创建组件##

在src/components中，创建文件RandomPostCard.astro，并且写入以下内容：

1
---
2
import { getCollection } from 'astro:content';
3
import { getPostUrlBySlug } from '../utils/url-utils';
4
import { Icon } from 'astro-icon/components';
5

6
// 1. 先判断当前页面是否为首页（仅主页执行后续逻辑）
7
const isHomePage = Astro.url.pathname === '/';
8
let postUrls = [];
9

10
// 2. 仅主页获取文章 URL（非主页跳过，减少无效计算）
11
if (isHomePage) {
12
  const posts = await getCollection('posts');
13
  postUrls = posts
14
    .filter(p => !p.data.draft && p.data.tags.length > 0)
15
    .map(p => getPostUrlBySlug(p.slug));
16
}
17
---
18

19
{/* 3. 核心条件：仅当是首页时，才渲染整个组件 */}
20
{isHomePage && (
21
  <>
22
    {postUrls.length > 0 ? (
23
      <!-- 外层容器：添加 ID 对应样式，确保在 Swup 容器内 -->
24
      <div
25
        id="random-post-card"
26
        class="card-base flex flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative onload-animation "
27
        style="animation-delay: calc(var(--content-delay) + 0ms);"
28
        data-post-urls={JSON.stringify(postUrls)}
29
      >
30
        <!-- 标题区域链接 -->
31
        <div class="pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full">
32
          <a
33
            href="#"
34
            class="random-post-link transition group w-full block font-bold text-2xl text-90
35
            hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
36
            active:text-[var(--title-active)] dark:active:text-[var(--title-active)] md:before:block"
37
            style="text-align: left;"
38
            aria-label="随机文章"
39
          >
40
            随机一篇文章
41
            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute bottom-7" name="material-symbols:chevron-right-rounded" />
42
            <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 bottom-7" name="material-symbols:chevron-right-rounded" />
43
          </a>
44
        </div>
45

46
        <!-- 右上角跳转按钮 -->
47
        <a
48
          href="#"
49
          class="random-post-link !hidden md:!flex btn-regular w-[3.25rem] absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95"
50
          style="--coverWidth: 28%;"
51
          aria-label="进入随机文章"
52
        >
53
          <Icon name="material-symbols:chevron-right-rounded" class="transition text-[var(--primary)] text-4xl mx-auto" />
54
        </a>
55
      </div>
56
      <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>
57
    ) : (
58
      <p class="text-center py-6">没有可用的文章</p>
59
    )}
60

61
    <!-- 4. 脚本逻辑：仅主页加载（随组件一起被条件包裹） -->
62
    <script is:inline>
63
      (function() {
64
        try {
65
          const container = document.querySelector('[data-post-urls]');
66
          if (!container) throw new Error('未找到文章 URL 容器');
67

68
          // 解析文章 URL 列表
69
          const postUrls = JSON.parse(container.dataset.postUrls || '[]');
70
          if (!Array.isArray(postUrls) || postUrls.length === 0) throw new Error('无有效文章 URL');
71

72
          // 生成随机 URL（保留原有路径处理逻辑）
73
          const randomIndex = Math.floor(Math.random() * postUrls.length);
74
          let randomUrl = postUrls[randomIndex];
75
          if (randomUrl && typeof randomUrl === 'string') {
76
            if (!randomUrl.startsWith('/') && !randomUrl.startsWith('http')) {
77
              randomUrl = '/' + randomUrl;
78
            }
79
          } else {
80
            throw new Error(`无效 URL 格式: ${randomUrl}`);
81
          }
82

83
          // 仅设置 href，不阻止默认行为（Swup 会自动拦截链接）
84
          const links = document.querySelectorAll('.random-post-link');
85
          if (links.length === 0) throw new Error('未找到随机文章链接');
86

87
          links.forEach(link => {
88
            link.href = randomUrl; // 确保 href 正确
89
            link.addEventListener('click', function() {
90
              console.log('跳转到随机文章:', randomUrl);
91
            });
92
          });
93

94
          console.log('随机文章链接初始化成功，URL:', randomUrl);
95
        } catch (error) {
96
          console.error('随机文章功能异常:', error);
97
          // 异常时确保链接可正常跳转（降级处理）
98
          document.querySelectorAll('.random-post-link').forEach(link => {
99
            link.href = '/'; // 跳转到首页（可自定义降级路径）
100
          });
101
        }
102
      })();
103
    </script>
104
  </>
105
)}

第二步：使组件生效##

打开src/components/PostPage.astro文件，按照注释说明导入并激活组件，重点分别在第4和第13行：

1
---
2
import { getPostUrlBySlug } from '@utils/url-utils'
3
import PostCard from './PostCard.astro'
4
import RandomPostCard from './RandomPostCard.astro' //导入组件
5
const { page } = Astro.props
6

7
let delay = 0
8
const interval = 50
9
---
10

11
<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">
12
    <!-- 激活组件 -->
13
    <RandomPostCard />
14
    {page.data.map((entry, i) => (
15
        <PostCard
16
            entry={entry}
17
            title={entry.data.title}
18
            tags={entry.data.tags}
19
            category={entry.data.category}
20
            published={entry.data.published}
21
            updated={entry.data.updated}
22
            url={getPostUrlBySlug(entry.slug)}
23
            image={entry.data.image}
24
            description={entry.data.description}
25
            draft={entry.data.draft}
26
            class:list="onload-animation"
27
            style={`animation-delay: calc(var(--content-delay) + ${(i+1) * interval}ms);`}
28
        />
29
    ))}
30
</div>