Astro是否提供API支持单页应用获取其博客最新文章？

Astro本身没有内置的官方API来直接暴露博客文章数据，但你可以通过以下两种简单方式实现，让你的SPA能获取最新文章：

• 生成静态JSON端点
  在Astro项目中创建一个专门的页面来输出文章的JSON数据。比如创建src/pages/api/posts.json.astro文件，内容如下：

  ---
  import { getCollection } from 'astro:content';
  
  // 获取所有博客文章（假设你的文章存在content/posts目录下）
  const posts = await getCollection('posts');
  // 整理需要的字段，比如标题、日期、摘要、链接等
  const postData = posts.map(post => ({
    title: post.data.title,
    date: post.data.date,
    excerpt: post.data.excerpt,
    slug: post.slug,
    url: `/posts/${post.slug}` // 或者你的文章完整URL
  }));
  
  // 设置响应头为JSON类型
  export async function get() {
    return {
      body: JSON.stringify(postData),
      headers: {
        'Content-Type': 'application/json'
      }
    };
  }
  ---
  

  构建Astro项目后，这个文件会生成一个静态的/api/posts.json路径，你的SPA可以直接通过HTTP请求这个地址获取文章数据。

• 使用Serverless函数端点
  如果需要动态获取最新文章（无需重新构建项目），可以用Astro的Serverless函数。创建src/pages/api/posts.ts文件：

  import type { APIRoute } from 'astro';
  import { getCollection } from 'astro:content';
  
  export const GET: APIRoute = async () => {
    const posts = await getCollection('posts');
    const postData = posts.map(post => ({
      title: post.data.title,
      date: post.data.date,
      excerpt: post.data.excerpt,
      slug: post.slug
    }));
  
    return new Response(JSON.stringify(postData), {
      headers: {
        'Content-Type': 'application/json'
      }
    });
  };
  

  部署到支持Serverless的平台后，这个端点会实时返回最新的文章数据，适合需要频繁更新内容的场景。

两种方案都能让你的SPA轻松获取Astro博客的文章信息，根据你的更新频率选择即可。

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