上傳檔案到「/」

PhotoGrid.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+/**
+ * PhotoGrid — Instagram-style masonry grid for Docusaurus.
+ *
+ * Usage in any .mdx page:
+ *
+ *   import PhotoGrid from "@site/src/components/PhotoGrid";
+ *
+ *   <PhotoGrid
+ *     photos={[
+ *       "/img/gallery/cat-01.jpg",
+ *       "/img/gallery/sunset-02.webp",
+ *       "/img/gallery/meme-03.png",
+ *     ]}
+ *   />
+ *
+ * Props:
+ *   photos   — string[]  — paths relative to /static (required)
+ *   columns  — number    — desktop columns, default 3
+ *   gap      — string    — grid gap, default "12px"
+ */
+export default function PhotoGrid({ photos = [], columns = 3, gap = "12px" }) {
+  if (!photos.length) return null;
+
+  return (
+    <>
+      <style>{`
+        .photo-grid {
+          column-count: ${columns};
+          column-gap: ${gap};
+        }
+        .photo-grid__item {
+          break-inside: avoid;
+          margin-bottom: ${gap};
+          cursor: pointer;
+          display: block;
+          border-radius: 6px;
+          overflow: hidden;
+          line-height: 0;
+          transition: opacity 0.2s ease;
+        }
+        .photo-grid__item:hover {
+          opacity: 0.85;
+        }
+        .photo-grid__item img {
+          width: 100%;
+          height: auto;
+          display: block;
+        }
+        @media (max-width: 768px) {
+          .photo-grid {
+            column-count: 1 !important;
+          }
+        }
+        @media (min-width: 769px) and (max-width: 1024px) {
+          .photo-grid {
+            column-count: 2 !important;
+          }
+        }
+      `}</style>
+
+      <div className="photo-grid">
+        {photos.map((src, i) => (
+          <a
+            key={i}
+            className="photo-grid__item"
+            href={src}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={src} alt="" loading="lazy" />
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}

crepe.mdx

@@ -0,0 +1,18 @@
+---
+title: ᓚᘏᗢ
+description: 貓貓貓
+hide_table_of_contents: true
+---
+
+import PhotoGrid from "@site/src/components/PhotoGrid";
+
+# ᓚᘏᗢ `/crepe`
+
+<PhotoGrid
+  photos={[
+    "/img/cat/tail.webp",    
+    "/img/cat/cat-tag.jpg",
+    "/img/cat/cat-blog-paper.jpg",
+    // ↑ 加圖就在這裡多塞一行，就這樣，沒了
+  ]}
+/>