Commit e4d9049

HPCesia <me@hpcesia.com>
2026-09-26 05:49:51
pages: add random posts to home page
1 parent 6c6a821
Changed files (5)
src
src/components/Header.astro
@@ -19,7 +19,7 @@ const globalI18n = getIntlayer("global", locale);
     href={getRelativeLocaleUrl("/", locale)}>{SITE_CONFIG.title}</a>
   <nav>
     <ul>
-      <li><a href={getRelativeLocaleUrl("/posts", locale)}>{globalI18n.posts}</a></li>
+      <li><a href={getRelativeLocaleUrl("/posts", locale)}>{globalI18n.posts.title}</a></li>
       <li><a href={getRelativeLocaleUrl("/about", locale)}>{globalI18n.about}</a></li>
       <li><a href={getRelativeLocaleUrl("/links", locale)}>{globalI18n.friendLinks}</a></li>
     </ul>
src/pages/[...locale]/posts/index.astro
@@ -37,9 +37,9 @@ const postsByYear = sortedPosts.reduce(
   {} as Record<number, typeof posts>,
 );
 ---
-<BaseLayout title={globalI18n.posts}>
+<BaseLayout title={globalI18n.posts.title}>
   <div style={{fontSize: "1.2rem"}}>
-    <h1>{globalI18n.posts}</h1>
+    <h1>{globalI18n.posts.title}</h1>
     {
       Object.entries(postsByYear)
         .reverse()
src/pages/[...locale]/index.astro
@@ -4,8 +4,8 @@ import { getCollection } from "astro:content";
 import { getIntlayer } from "intlayer";
 
 import { SITE_CONFIG } from "@/config.ts";
-import { loadLocaleContent } from "@/utils/content.ts";
-import { getLocalePosts } from "@/utils/content.ts";
+import { getLocalePosts, loadLocaleContent } from "@/utils/content.ts";
+import { shuffle } from "@/utils/random.ts";
 import { getLocaleRouteParam } from "@/utils/url.ts";
 
 import BaseLayout from "@/layouts/BaseLayout.astro";
@@ -36,7 +36,9 @@ const sortedPosts = posts.sort(
     <Article />
   </article>
   <div style={{fontSize: "1.2rem"}}>
-    <h2 id="recent-posts">{globalI18n.recentPosts}</h2>
-    <PostsList posts={sortedPosts.slice(0, 4)} />
+    <h2 id="recent-posts">{globalI18n.posts.recent}</h2>
+    <PostsList posts={sortedPosts.slice(0, 5)} />
+    <h2 id="recent-posts">{globalI18n.posts.random}</h2>
+    <PostsList posts={shuffle(sortedPosts).slice(0, 3)} />
   </div>
 </BaseLayout>
src/utils/random.ts
@@ -0,0 +1,20 @@
+export function mulberry32(a: number) {
+  return function () {
+    let t = a += 0x6D2B79F5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+
+export function shuffle<T>(
+  arr: readonly T[],
+  generator = Math.random,
+): T[] {
+  const a = arr.slice();
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(generator() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
src/globalI18n.content.ts
@@ -2,9 +2,12 @@ import { type Dictionary, t } from "intlayer";
 import { SITE_CONFIG } from "./config.ts";
 
 interface Content {
-  posts: string;
+  posts: {
+    title: string;
+    recent: string;
+    random: string;
+  };
   about: string;
-  recentPosts: string;
   feed: string;
   source: string;
   language: string;
@@ -14,14 +17,20 @@ interface Content {
 export default {
   key: "global",
   content: {
-    posts: t({
-      en: "Posts",
-      "zh-CN": "文章",
-    }),
-    recentPosts: t({
-      en: "Recent Posts",
-      "zh-CN": "最近文章",
-    }),
+    posts: {
+      title: t({
+        en: "Posts",
+        "zh-CN": "文章",
+      }),
+      recent: t({
+        en: "Recent Posts",
+        "zh-CN": "最近文章",
+      }),
+      random: t({
+        en: "Random Posts",
+        "zh-CN": "随机文章",
+      }),
+    },
     about: t({
       en: "About",
       "zh-CN": "关于",