如何获取Astro站点中的所有URL（包含动态页面）

嘿，我刚好碰到过一模一样的问题！确实import.meta.glob只能拿到页面文件的物理路径，那些带[slug]、[id]的动态页面它没法自动解析出实际可用的URL——毕竟Astro本身不知道你的动态路由对应哪些具体的slug或ID，这些都得从你的数据源里来对吧？

下面是我摸索出来的可行方案，分几步走：先搞定静态页面，再处理动态页面，最后把两者合并就行。

第一步：收集静态页面的URL #

首先用import.meta.glob获取所有静态页面文件，然后把文件路径转换成站点的URL路径，记得过滤掉动态路由的文件（文件名带[]的那种）：

// 提取所有静态页面的URL
function getStaticUrls() {
  // 获取src/pages下的所有页面文件，支持astro、md、mdx格式
  const staticPageFiles = import.meta.glob('/src/pages/**/*.{astro,md,mdx}', { eager: true });
  
  return Object.keys(staticPageFiles)
    .filter(filePath => !filePath.includes('[')) // 过滤掉动态路由文件
    .map(filePath => {
      // 把文件路径转换成URL路径
      let url = filePath.replace(/^\/src\/pages/, '');
      
      // 处理index文件：比如src/pages/blog/index.astro 转成 /blog
      url = url.replace(/\/index\.(astro|md|mdx)$/, '/');
      
      // 处理单独页面文件：比如src/pages/about.astro 转成 /about
      url = url.replace(/\.(astro|md|mdx)$/, '');
      
      // 确保根路径是 '/' 而不是空字符串
      return url || '/';
    });
}

第二步：收集动态页面的URL #

这部分得根据你动态页面的数据源来处理，因为动态页面的URL全靠你提供的数据源生成。举两个常见场景的例子：

场景1：基于Content Collection的动态页面 #

如果你用Astro的Content Collection来管理内容（比如博客文章），可以直接用getCollection获取所有文档，然后提取slug生成URL：

import { getCollection } from 'astro:content';

// 提取博客动态页面的URL
async function getBlogDynamicUrls() {
  // 获取blog collection下的所有文章
  const blogPosts = await getCollection('blog');
  // 拼接成 /blog/[slug] 格式的URL
  return blogPosts.map(post => `/blog/${post.slug}`);
}

场景2：基于getStaticPaths的动态页面 #

如果你的动态页面是用getStaticPaths来生成路径的（比如产品详情页），可以直接导入页面里的getStaticPaths函数，拿到所有生成的路径后转换成URL：

假设你有src/pages/products/[id].astro，里面的getStaticPaths是这样的：

export async function getStaticPaths() {
  // 从API或本地文件获取产品数据
  const products = await fetch('https://your-api.com/products').then(res => res.json());
  return products.map(product => ({
    params: { id: product.id.toString() },
  }));
}

那你可以这样提取URL：

// 导入页面的getStaticPaths函数
import { getStaticPaths as getProductStaticPaths } from '../src/pages/products/[id].astro';

// 提取产品动态页面的URL
async function getProductDynamicUrls() {
  const productPaths = await getProductStaticPaths();
  return productPaths.map(path => `/products/${path.params.id}`);
}

第三步：合并所有URL #

最后把静态和动态的URL合并起来，去重后就是整个站点的所有URL了：

async function getAllSiteUrls() {
  const staticUrls = getStaticUrls();
  const blogDynamicUrls = await getBlogDynamicUrls();
  const productDynamicUrls = await getProductDynamicUrls();
  
  // 合并并去重，避免可能的重复URL
  return [...new Set([...staticUrls, ...blogDynamicUrls, ...productDynamicUrls])];
}

小提醒 #

这个方法最好在构建时或服务器端运行，比如用来生成站点地图（sitemap）、导航菜单或者做链接检查。如果要在前端组件里用，记得用Astro的server输出模式或者在服务端渲染的逻辑里调用（不过Astro里更多是在构建时处理这类需求）。

备注：内容来源于stack exchange，提问作者CrossScar