feat(news): enhance SEO meta tags and add clarification article

- Update news detail page to use `useSeoMeta` for comprehensive Open Graph and Twitter Card support.
- Implement logic to prioritize `ogImage` and `seoTitle` with fallbacks to standard fields.
- Add new content article clarifying the distinction between the Alumni Association and the Alumni Liaison Office.
- Add documentation drafts for onboarding messages and announcement design.

app/pages/news/[slug].vue

@@ -18,16 +18,43 @@
 </template>
 
 <script lang="ts" setup>
-const route = useRoute()
-const { data: n } = await useAsyncData('new-detail', () =>
-  queryCollection('news')
-    .path(`/news/${route.params.slug}`)
-    .first()
-)
+const route = useRoute();
+const { data: n } = await useAsyncData("new-detail", () =>
+  queryCollection("news").path(`/news/${route.params.slug}`).first()
+);
 
-useHead({
-  title: n.value?.title
-})
+if (n.value) {
+  // 1. 确定图片：优先用 ogImage，没有就用 cover
+  const shareImage = n.value.ogImage || n.value.cover;
+
+  // 2. 确定标题和描述：优先用 seoTitle，没有就用 title
+  const shareTitle = n.value.seoTitle || n.value.title;
+  const shareDesc = n.value.seoDescription || n.value.description;
+
+  // 3. 注入 SEO
+  useSeoMeta({
+    // 基础
+    title: shareTitle,
+    description: shareDesc,
+
+    // Open Graph (Facebook / WhatsApp)
+    ogTitle: shareTitle,
+    ogDescription: shareDesc,
+    ogImage: shareImage,
+    ogType: "article",
+
+    // Twitter Card
+    twitterCard: "summary_large_image",
+    twitterTitle: shareTitle,
+    twitterDescription: shareDesc,
+    twitterImage: shareImage,
+  });
+
+  // 如果你用了 nuxt-og-image 模块生成动态图
+  if (shareImage) {
+    defineOgImage({ url: shareImage });
+  }
+}
 </script>
 
 <style></style>

content/news/20251128-misunderstanding-yphsalumni-and-alumnigroup.md

@@ -0,0 +1,40 @@
+---
+title: "永平中学校友会与校友联络处的区别"
+date: "2025-11-28"
+updated: "2025-11-28"
+author: "永平中学校友会"
+description: "毕业校友常说“我都加入校友群组了”，实则误入了校友联络处。本文厘清其与永平中学校友会的区别与使命。"
+cover: "https://img.tootaio.com/i/2025/11/28/ex7pen.jpeg"
+tags: ["永平中学", "校友会", "校友联络处", "区别", "公告"]
+category: "公告"
+highlight: true
+seoTitle: "永平中学校友会与校友联络处的区别 | 官方说明"
+seoDescription: "毕业校友常说“我都加入校友群组了”，实则误入了校友联络处。本文厘清其与永平中学校友会的区别与使命。"
+ogImage: "https://img.tootaio.com/i/2025/11/28/ex7pen.jpeg"
+---
+
+**永平中学校友会致广大校友的一封信**
+
+亲爱的永平中学校友们：
+
+在近期的毕业典礼上，我们欣喜地听到许多新校友分享“我已加入校友群组”的喜悦。这份对母校的深切情谊，令我们深深感动。
+
+我们同时也注意到，部分校友可能产生了一个美丽的误会：大家加入的“校友联络处”群组，是由学校董事会设立的官方联络平台，主要负责校友信息的收集与传达。而我们所熟知的“永平中学校友会”，则是一个由历届毕业生**自发创建、独立运作的校友社区组织**。
+
+自成立以来，永平中学校友会始终秉承以下宗旨，由校友共建、为校友服务：
+
+- **联结校友情谊**：搭建纯粹、活跃的交流平台，让友谊跨越届别。
+- **支持母校发展**：凝聚校友力量，回馈我们共同的永平中学。
+- **推动教育、文化与社区活动**：举办丰富多彩的活动，丰富校友生活。
+- **建立校友与在校生之间的桥梁**：传承经验与关怀，助力学弟学妹成长。
+
+校友联络处与校友会，二者服务校友的初心一致，是相辅相成的伙伴。我们由衷欢迎每一位热心校友加入我们这个充满活力的毕业生社区，共同为母校的发展注入来自校友群体的独特力量！
+
+**加入我们，共同书写校友故事：**
+
+校友会官方平台：https://yphsalumni.org/
+
+<!-- 联系我们：[请在此处填入邮箱或具体负责人联系方式] -->
+
+永平中学校友会<br/>
+2025年11月28日

docs/20251128-misunderstanding-yphsalumni-and-alumnigroup.md

@@ -0,0 +1,54 @@
+下面给你一个**实用、可直接交给设计师落地的公告封面设计方案**，基于你们「校友会 vs 校友联络处」容易混淆这一情境，重点是**清晰、正式、易识别、避免再次误会**。
+
+---
+
+# 🎨 公告封面设计方案（适用于官网首页 / Banner / WhatsApp 分享图）
+
+## **1. 视觉主题**
+
+**关键词：清晰区隔、正式感、组织可信度**
+色调保持学校主色系（如#fb9e3a、#fcef91），并加上一条亮色做强调，提升官方感。
+
+---
+
+## **2. 版式构成**
+
+### ### **A. 顶部：醒目的组织身份**
+
+**「永平中学校友会」**
+
+* 使用学校和校友会 logo（左） + 标题文字（右）
+* 字体使用较厚重、带权威感的 Serif / Sans Serif
+* 加上小字「官方公告」标签
+
+---
+
+### **B. 中间：公告主标题（视觉核心）**
+
+标题建议直接点出“澄清 & 提醒”的意图：
+
+* **《校友会与校友联络处群组区分公告》**
+
+字体加粗，居中，字号大，确保在手机上也能一眼看懂。
+
+---
+
+### **C. 配图 / 图标建议**
+
+#### **徽章背景淡化**
+
+校徽做 20% 透明大背景，体现官方权威。
+
+---
+
+## **3. 尺寸 & 格式（设计师直接可用）**
+
+* Website banner: **1920×1080**
+
+---
+
+## **4. 文案建议（印在封面下方的小字）**
+
+> “近期部分校友误将校友联络处群组误认为校友会官方群组，特此澄清。”
+
+---

docs/Onboarding Message.md

@@ -0,0 +1,56 @@
+**主题：欢迎加入永平中学校友会！**
+
+亲爱的校友，您好！
+
+感谢您加入 **永平中学校友会（Yong Peng High School Alumni Association）**！
+自您成为会员的这一刻起，我们正式迎来了一位新的伙伴，也多了一份共同守护母校与社区的力量。
+
+---
+
+## 🎉 **我们是谁？**
+
+永平中学校友会成立以来，一直致力于：
+
+* **联结校友情谊**
+* **支持母校发展**
+* **推动教育、文化与社区活动**
+* **建立校友与在校生之间的桥梁**
+
+您的加入，让我们更有力量继续前进。
+
+---
+
+## 📌 **作为会员，您可享有：**
+
+* 活动、讲座、聚会的**优先参与权**
+* 校友资讯、重要公告的**第一时间通知**
+* 参与校友会项目、社区计划的**贡献机会**
+* 与来自各领域校友建立联系的**交流平台**
+
+---
+
+## 🗓️ **接下来能做什么？**
+
+为帮助您更快融入校友会生态，我们建议：
+
+1. **保存本会的官方联系方式**（WhatsApp / 社媒）
+2. **访问我们的官网**
+3. **留意即将发布的活动资讯**
+4. 若愿意参与志工 / 筹委，请随时回复我们
+
+---
+
+## ❤️ **我们欢迎您与我们同行**
+
+无论您身处何地，校友会的大门永远为您敞开。
+让我们一同继续延续永中的精神，传承、回馈、成长。
+
+若您有任何疑问，欢迎随时与我们联系。
+
+谢谢您再次加入我们，
+**欢迎回家！**
+
+**永平中学校友会**
+Yong Peng High School Alumni Association
+https://yphsalumni.org
+