--- /** * Blog Article Detail Page - 行銷放大鏡文章詳情 * URL: /xing-xiao-fang-da-jing/[slug] * Fetches from Payload CMS and renders with Lexical content */ import Layout from '../../layouts/Layout.astro' import RelatedPosts from '../../components/blog/RelatedPosts.astro' import { fetchPostBySlug, fetchRelatedPosts, formatDate } from '../../lib/api/blog' import { serializeLexical } from '../../lib/serializeLexical' // Get slug from params const { slug } = Astro.params // Validate slug if (!slug) { return Astro.redirect('/404') } // Fetch post by slug const post = await fetchPostBySlug(slug) // Handle 404 for non-existent or unpublished posts if (!post) { return Astro.redirect('/404') } // Fetch related posts const categorySlugs = post.categories?.map(c => c.slug) || [] const relatedPosts = await fetchRelatedPosts(post.id, categorySlugs, 4) // Format date const displayDate = formatDate(post.publishedAt) // Get primary category const category = post.categories?.[0] // Serialize Lexical content to HTML (must await the async function) const contentHtml = await serializeLexical(post.content) // SEO metadata const metaTitle = post.meta?.title || post.title const metaDescription = post.meta?.description || post.excerpt || '' const metaImage = post.meta?.image?.url || post.ogImage?.url || post.heroImage?.url || '' ---
{ category && ( ) }

{post.title}

{ displayDate && ( ) }
{ post.heroImage?.url && (
{post.heroImage.alt
) }