69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* 文章骨架屏组件。
|
|
*
|
|
* ## 为什么本项目没有使用路由级 `loading.tsx`
|
|
*
|
|
* 路由级 `loading.tsx` 会创建 Suspense 边界，Next.js 会**立即以 200 状态**
|
|
* 流式输出骨架屏；之后页面内的 `notFound()` 只能替换内容，无法再改写已经
|
|
* 发出的状态码。
|
|
*
|
|
* 实测结果（Next.js 16.3.8）：
|
|
* - 存在 `app/[locale]/loading.tsx` 时，`/zh/posts/<草稿>` 与
|
|
* `/zh/posts/<不存在>` 均返回 **200**（内容却是 404 页面）；
|
|
* - 移除后，二者正确返回 **404**。
|
|
*
|
|
* 对博客而言，让不存在的 URL 返回 200 会被搜索引擎当作有效页面收录，
|
|
* 属于必须避免的 SEO 缺陷。因此这里**牺牲路由级骨架屏**，
|
|
* 保证状态码正确；骨架屏仅作为组件按需使用（例如包裹已知存在的
|
|
* 慢速数据区块）。
|
|
*/
|
|
export function PostListSkeleton({ count = 6 }: { count?: number }) {
|
|
return (
|
|
<div
|
|
className="grid grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-3"
|
|
aria-hidden="true"
|
|
>
|
|
{Array.from({ length: count }).map((_, index) => (
|
|
<div
|
|
// 骨架屏为静态占位，使用索引作 key 不会引起状态错位
|
|
key={index}
|
|
className={cn(
|
|
"flex flex-col gap-sm rounded-lg border border-hairline bg-canvas p-xl",
|
|
)}
|
|
>
|
|
{/* 日期 + 阅读时长 */}
|
|
<div className="h-4 w-40 animate-pulse rounded-sm bg-hairline-soft" />
|
|
{/* 标题 */}
|
|
<div className="h-6 w-full animate-pulse rounded-md bg-hairline" />
|
|
{/* 摘要两行 */}
|
|
<div className="h-4 w-full animate-pulse rounded-sm bg-hairline-soft" />
|
|
<div className="h-4 w-3/4 animate-pulse rounded-sm bg-hairline-soft" />
|
|
{/* 标签 */}
|
|
<div className="mt-xs flex gap-xs">
|
|
<div className="h-5 w-14 animate-pulse rounded-sm bg-hairline-soft" />
|
|
<div className="h-5 w-16 animate-pulse rounded-sm bg-hairline-soft" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 文章详情页正文骨架 */
|
|
export function PostBodySkeleton() {
|
|
return (
|
|
<div className="mt-xl flex flex-col gap-md" aria-hidden="true">
|
|
{Array.from({ length: 10 }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="h-4 animate-pulse rounded-sm bg-hairline-soft"
|
|
style={{ width: `${[100, 96, 88, 100, 92, 100, 84][index % 7]}%` }}
|
|
/>
|
|
))}
|
|
<div className="mt-md h-40 w-full animate-pulse rounded-md bg-surface-code/20" />
|
|
</div>
|
|
);
|
|
}
|