上傳檔案到「/」

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"