从Hugo迁移至Astro：如何配置嵌套路由与自动索引文件？

一、先解决404错误：替换Hugo的_index.md为Astro的索引文件格式 #

Astro的路由系统不识别Hugo的_index.md命名规则，目录的索引页必须命名为index.md或index.astro。你需要：

• 将所有目录下的_index.md重命名为index.astro（推荐用astro组件，方便后续动态渲染内容）或index.md
• 确保索引文件放在对应目录下，比如/src/pages/authors/index.astro对应/authors/路由，/src/pages/authors/socrates/index.astro对应/authors/socrates/路由

二、自动展示嵌套目录内容的两种实现方式 #

方式1：用Astro Content Collections（推荐，规范且易维护） #

Astro 2.0+的Content Collections可以统一管理内容并方便分组查询，适合你的多层嵌套场景：

1. 重构内容目录结构
   将原src/pages/authors/下的所有md文件移到src/content/authors/目录，保持原有层级：

   src/content/authors/
     socrates/
       republic/
         book-1/
           chapter-1.md
           chapter-2.md
         book-2/
           chapter-1.md
     plato/
       symposium/
         chapter-1.md
   

2. 定义集合配置
   在src/content/config.ts中创建集合规则，指定内容的元数据schema：

   import { defineCollection, z } from 'astro:content';
   
   const authorsCollection = defineCollection({
     schema: z.object({
       title: z.string(), // 章节标题
       author: z.string(), // 作者名
       work: z.string(), // 著作名
       book: z.string().optional(), // 卷/册名（可选）
     }),
   });
   
   export const collections = {
     'authors': authorsCollection,
   };
   

3. 在索引页动态渲染内容
   以src/pages/authors/index.astro为例，获取所有内容并按层级分组展示：

   ---
   import { getCollection } from 'astro:content';
   
   // 获取所有作者相关的内容文档
   const allChapters = await getCollection('authors');
   // 按作者名分组
   const groupedByAuthor = Object.groupBy(allChapters, item => item.data.author);
   ---
   
   <h1>所有作者</h1>
   <ul>
     {Object.entries(groupedByAuthor).map(([authorName, works]) => {
       // 按著作名分组
       const groupedByWork = Object.groupBy(works, item => item.data.work);
       return (
         <li key={authorName}>
           <h2>{authorName}</h2>
           <ul>
             {Object.entries(groupedByWork).map(([workName, chapters]) => {
               // 按卷/册分组（无卷则归为默认组）
               const groupedByBook = Object.groupBy(chapters, item => item.data.book || '无分卷');
               return (
                 <li key={workName}>
                   <h3>{workName}</h3>
                   <ul>
                     {Object.entries(groupedByBook).map(([bookName, bookChapters]) => (
                       <li key={bookName}>
                         <h4>{bookName}</h4>
                         <ul>
                           {bookChapters.map(chapter => (
                             <li key={chapter.id}>
                               <a href={`/authors/${chapter.slug}`}>{chapter.data.title}</a>
                             </li>
                           ))}
                         </ul>
                       </li>
                     ))}
                   </ul>
                 </li>
               );
             })}
           </ul>
         </li>
       );
     })}
   </ul>
   

   同理，你可以在/src/pages/authors/socrates/index.astro中只筛选该作者的内容，实现更细粒度的索引页。

方式2：用Astro.glob()直接读取页面文件 #

如果不想迁移到Content Collections，可通过Astro.glob()扫描src/pages下的文件并处理：

以src/pages/authors/index.astro为例：

---
// 扫描authors目录下所有md文件
const allPages = await Astro.glob('./**/*.md');

// 构建层级映射
const authorMap = new Map();

allPages.forEach(page => {
  // 从文件路径中提取层级信息（需根据你的实际路径调整切片位置）
  const pathSegments = page.file.split('/').slice(4, -1);
  const [author, work, book, chapter] = pathSegments;
  const href = page.url;
  const title = page.frontmatter.title || chapter;

  // 逐层构建映射
  if (!authorMap.has(author)) {
    authorMap.set(author, { works: new Map() });
  }
  const authorEntry = authorMap.get(author);

  if (!authorEntry.works.has(work)) {
    authorEntry.works.set(work, { books: new Map() });
  }
  const workEntry = authorEntry.works.get(work);

  if (!workEntry.books.has(book)) {
    workEntry.books.set(book, { chapters: [] });
  }
  workEntry.books.get(book).chapters.push({ href, title });
});
---

<h1>所有作者</h1>
<ul>
  {Array.from(authorMap.entries()).map(([authorName, authorData]) => (
    <li key={authorName}>
      <h2>{authorName}</h2>
      <ul>
        {Array.from(authorData.works.entries()).map(([workName, workData]) => (
          <li key={workName}>
            <h3>{workName}</h3>
            <ul>
              {Array.from(workData.books.entries()).map(([bookName, bookData]) => (
                <li key={bookName}>
                  <h4>{bookName}</h4>
                  <ul>
                    {bookData.chapters.map(chapter => (
                      <li key={chapter.href}>
                        <a href={chapter.href}>{chapter.title}</a>
                      </li>
                    ))}
                  </ul>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </li>
  ))}
</ul>

三、注意事项 #

• 确保所有页面文件都在src/pages目录下，Astro默认以此目录作为路由根目录
• 运行astro dev测试时，可通过终端的路由列表确认索引页是否被正确识别
• 如果使用Content Collections，记得给每个md文件的frontmatter补充schema中定义的字段，否则会编译报错

内容的提问来源于stack exchange，提问作者Juan Dalisay Jr.