留言

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist/
 .astro/
 *.log
+.env.local

src/data/messages.ts

@@ -1,6 +1,6 @@
 export const messagesIntro = {
   title: "留言墙",
-  text: "可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。"
+  text: "在这里留下给一年后的自己、老同学或整个班级的一句话。新的留言会像便利贴一样贴在这面墙上。"
 };
 
 export const featuredMessage = {
@@ -18,3 +18,11 @@ export const messages = [
     text: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
   }
 ];
+
+export const twikooConfig = {
+  envId: import.meta.env.PUBLIC_TWIKOO_ENV_ID ?? "",
+  scriptSrc: "https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.nocss.js",
+  styleSrc: "https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.css",
+  path: "/messages/",
+  lang: "zh-CN"
+};

src/pages/messages.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-import { featuredMessage, messages, messagesIntro } from "../data/messages";
+import { featuredMessage, messagesIntro, twikooConfig } from "../data/messages";
 import { site } from "../data/site";
 ---
 
@@ -15,25 +15,157 @@ import { site } from "../data/site";
       </div>
     </section>
 
-    <section class="gallery-band">
+    <section class="gallery-band sticky-message-band">
       <div class="section-inner">
-        <div class="message-wall">
+        <article class="message featured message-preamble">
-          <article class="message featured">
           <p>“{featuredMessage.text}”</p>
           <cite>{featuredMessage.author}</cite>
         </article>
-          <div class="small-messages">
+
         {
-              messages.map((message) => (
+          twikooConfig.envId ? (
-                <article class="message">
+            <div
-                  <h3>{message.title}</h3>
+              id="tcomment"
-                  <p>{message.text}</p>
+              class="twikoo-sticky-wall"
-                </article>
+              data-env-id={twikooConfig.envId}
-              ))
+              data-path={twikooConfig.path}
+              data-lang={twikooConfig.lang}
+            />
+          ) : (
+            <div class="twikoo-empty-note">
+              <h2>Twikoo 评论区待配置</h2>
+              <p>
+                在本地或部署平台设置 <code>PUBLIC_TWIKOO_ENV_ID</code> 后，这里会自动加载评论区。
+              </p>
+            </div>
+          )
         }
       </div>
-        </div>
-      </div>
     </section>
   </main>
+
+  {
+    twikooConfig.envId && (
+      <>
+        <link rel="stylesheet" href={twikooConfig.styleSrc} />
+        <style is:inline>
+          #tcomment.twikoo-sticky-wall {
+            --sticky-1: #fff1a8;
+            --sticky-2: #dff1c7;
+            --sticky-3: #d8ebf7;
+            --sticky-4: #f8d7d0;
+            --sticky-5: #eadcf4;
+            --sticky-tape: rgba(255, 255, 255, 0.62);
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-submit {
+            margin-bottom: 2rem !important;
+            padding: 1.25rem !important;
+            border: 1px solid var(--line) !important;
+            border-radius: 8px !important;
+            background: #fffdf7 !important;
+            box-shadow: var(--shadow) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-send {
+            border-color: var(--green) !important;
+            background: var(--green) !important;
+            color: #fffdf7 !important;
+            font-weight: 800 !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-title {
+            margin: 1.5rem 0 0.75rem !important;
+            color: var(--green) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment {
+            position: relative !important;
+            margin-top: 1.35rem !important;
+            padding: 1.25rem !important;
+            border-radius: 3px !important;
+            background: var(--sticky-1) !important;
+            box-shadow:
+              0 16px 30px rgba(39, 55, 52, 0.14),
+              inset 0 -18px 28px rgba(255, 255, 255, 0.18) !important;
+            transform: rotate(-0.7deg) !important;
+            transform-origin: center !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n + 2) {
+            background: var(--sticky-2) !important;
+            transform: translateY(6px) rotate(0.6deg) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n + 3) {
+            background: var(--sticky-3) !important;
+            transform: rotate(-0.3deg) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n + 4) {
+            background: var(--sticky-4) !important;
+            transform: translateY(8px) rotate(0.8deg) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n) {
+            background: var(--sticky-5) !important;
+            transform: rotate(-0.5deg) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment::before {
+            content: "" !important;
+            position: absolute !important;
+            top: 0.45rem !important;
+            left: 50% !important;
+            width: 3.5rem !important;
+            height: 0.8rem !important;
+            background: var(--sticky-tape) !important;
+            box-shadow: 0 1px 4px rgba(39, 55, 52, 0.13) !important;
+            transform: translateX(-50%) rotate(2deg) !important;
+            pointer-events: none !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-content,
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-content p {
+            color: var(--ink) !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-replies .tk-comment {
+            background: rgba(255, 253, 247, 0.6) !important;
+            border-radius: 6px !important;
+            padding: 0.75rem !important;
+            transform: none !important;
+            box-shadow: none !important;
+          }
+
+          #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-replies .tk-comment::before {
+            content: none !important;
+          }
+
+          @media (max-width: 560px) {
+            #tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment {
+              transform: none !important;
+            }
+          }
+        </style>
+        <script is:inline src={twikooConfig.scriptSrc} defer></script>
+        <script is:inline>
+          window.addEventListener("DOMContentLoaded", function () {
+            const container = document.querySelector("#tcomment");
+
+            if (!container || !window.twikoo) {
+              return;
+            }
+
+            window.twikoo.init({
+              envId: container.dataset.envId,
+              el: "#tcomment",
+              path: container.dataset.path || location.pathname,
+              lang: container.dataset.lang || "zh-CN"
+            });
+          });
+        </script>
+      </>
+    )
+  }
 </BaseLayout>

src/styles/global.css

@@ -695,6 +695,38 @@ h2 {
   gap: 18px;
 }
 
+.sticky-message-band {
+  background:
+    linear-gradient(0deg, rgba(255, 253, 247, 0.45), rgba(255, 253, 247, 0.45)),
+    var(--soft);
+}
+
+.message-preamble {
+  margin-bottom: 24px;
+}
+
+.twikoo-empty-note {
+  padding: 28px;
+  border: 1px dashed rgba(55, 109, 90, 0.34);
+  border-radius: 8px;
+  background: #fffdf7;
+}
+
+.twikoo-empty-note h2 {
+  margin-bottom: 10px;
+  font-size: clamp(24px, 3vw, 34px);
+}
+
+.twikoo-empty-note p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.twikoo-empty-note code {
+  color: var(--green);
+  font-weight: 800;
+}
+
 .ending {
   text-align: center;
   background: #1f2b2a;
@@ -736,6 +768,9 @@ footer {
   .stats,
   .section-title,
   .message-wall,
+  .twikoo-sticky-wall .tk-comments,
+  .twikoo-sticky-wall .tk-comments-container,
+  .twikoo-sticky-wall .tk-comments-list,
   .person-hero-inner,
   .detail-grid {
     grid-template-columns: 1fr;
@@ -808,6 +843,11 @@ footer {
     grid-column: auto;
   }
 
+  .twikoo-sticky-wall .tk-submit,
+  .twikoo-sticky-wall .tk-comment {
+    transform: none !important;
+  }
+
   .scrap-image {
     min-height: 220px;
   }