Astro.build中如何获取页面内容生成meta描述？

场景1：普通Astro页面（非Markdown/MDX） #

对于纯Astro组件页面，需要先将页面内容存入变量，再传入createDescription函数：

---
import Layout from "../layouts/app.astro"
import { createDescription } from "./getContents.ts";

// 初始化变量存储页面内容
let pageContent = '';
---
<Layout
    description={createDescription(pageContent)}
>
    {pageContent = `
        <div class="page-content">
            这是页面的第一段核心内容，会被提取为Meta描述。
            
            这是第二段内容，不会被纳入描述范围。
        </div>
    `}
</Layout>

场景2：基于Content Collections的Markdown/MDX页面 #

如果页面由Astro Content Collections管理的Markdown/MDX文件生成，可直接从entry对象获取原始文本内容：

先优化createDescription函数，增强兼容性：

export function createDescription(content: string) {
    // 移除HTML标签（处理渲染后的内容）
    const plainText = content.replace(/<[^>]*>/g, '');
    // 分割段落并过滤空行
    const paragraphs = plainText.split('\n\n').filter(p => p.trim().length > 0);
    // 返回第一段或默认描述
    return paragraphs[0]?.trim() || '你的默认页面描述';
}

页面中获取内容并生成描述：

---
import Layout from "../layouts/app.astro"
import { createDescription } from "./getContents.ts";
import { getEntryBySlug } from 'astro:content';

// 根据slug获取对应内容条目
const entry = await getEntryBySlug('your-collection-name', 'post-slug');
// 获取原始文本内容
const rawContent = entry.body;
const desc = createDescription(rawContent);
---
<Layout description={desc}>
    <Content entry={entry} />
</Layout>

场景3：在Layout组件中自动生成描述 #

可以把描述生成逻辑封装到Layout组件，自动从插槽内容提取：

在layouts/app.astro中：

---
import { createDescription } from "../getContents.ts";

export interface Props {
    description?: string;
}

const { description } = Astro.props;
// 渲染默认插槽并获取内容
const slotHtml = await Astro.slots.render('default');
// 优先使用传入的description，否则自动生成
const finalDesc = description || createDescription(slotHtml);
---
<html>
<head>
    <meta name="description" content={finalDesc} />
</head>
<body>
    <slot />
</body>
</html>

页面无需手动处理描述，直接使用Layout即可：

---
import Layout from "../layouts/app.astro"
---
<Layout>
    这是页面第一段内容，会被自动提取为Meta描述。
    
    这是页面其他内容。
</Layout>

内容的提问来源于stack exchange，提问作者Keygun2k1