a28bb3a54d
- 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.
61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
||
<div>
|
||
<section class="py-20 px-4">
|
||
<div class="container mx-auto max-w-6xl">
|
||
<!-- 内容渲染器 -->
|
||
<div class="prose prose-invert prose-lg max-w-none">
|
||
<ContentRenderer :value="n ?? {}">
|
||
<template #empty>
|
||
<div class="text-center py-12">
|
||
<p class="text-gray-400 text-xl">内容加载中...</p>
|
||
</div>
|
||
</template>
|
||
</ContentRenderer>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const route = useRoute();
|
||
const { data: n } = await useAsyncData("new-detail", () =>
|
||
queryCollection("news").path(`/news/${route.params.slug}`).first()
|
||
);
|
||
|
||
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>
|