From aa7dd8c3027061afca6e3cdf0e36601056a30e80 Mon Sep 17 00:00:00 2001
From: Wiwi Kuan <wiwi@noreply.localhost>
Date: Fri, 27 Mar 2026 01:50:51 +0000
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E5=82=B3=E6=AA=94=E6=A1=88=E5=88=B0?=
 =?UTF-8?q?=E3=80=8C/=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 PhotoGrid.jsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/PhotoGrid.jsx b/PhotoGrid.jsx
index b370f7f..c9967c2 100644
--- a/PhotoGrid.jsx
+++ b/PhotoGrid.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 /**
  * PhotoGrid — Instagram-style masonry grid for Docusaurus.
@@ -13,15 +13,27 @@ import React from "react";
  *       "/img/gallery/sunset-02.webp",
  *       "/img/gallery/meme-03.png",
  *     ]}
+ *     shuffle
  *   />
  *
  * Props:
  *   photos   — string[]  — paths relative to /static (required)
  *   columns  — number    — desktop columns, default 3
  *   gap      — string    — grid gap, default "12px"
+ *   shuffle  — boolean   — randomize order on each page load, default false
  */
-export default function PhotoGrid({ photos = [], columns = 3, gap = "12px" }) {
-  if (!photos.length) return null;
+export default function PhotoGrid({ photos = [], columns = 3, gap = "12px", shuffle = false }) {
+  const displayPhotos = useMemo(() => {
+    if (!shuffle) return photos;
+    const arr = [...photos];
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+  }, [photos, shuffle]);
+
+  if (!displayPhotos.length) return null;
 
   return (
     <>
@@ -61,9 +73,9 @@ export default function PhotoGrid({ photos = [], columns = 3, gap = "12px" }) {
       `}</style>
 
       <div className="photo-grid">
-        {photos.map((src, i) => (
+        {displayPhotos.map((src, i) => (
           <a
-            key={i}
+            key={src}
             className="photo-grid__item"
             href={src}
             target="_blank"