AstroJS:我可以得到一个文件夹中所有页面的列表吗?

Question

我在我的src/pages/index.astro文件中有一个在src/pages/topics/中有几个.astro页面的天文项目，我想有一个链接到每个主题页面的导航列表。是否有一种方法可以自动获得主题文件夹内所有页面的列表，以便我可以迭代它并在index.astro中生成我的导航列表。

我看了一下集合，但我不认为这会起作用，因为我的主题页面需要是.astro文件，集合只支持.md文件。我不需要集合的模式检查功能，但这也不是问题，因为我的主题文件都是统一结构的。

Answer 1

是，您可以通过不同的方式获得文件夹内所有页面的列表

<标题>解决方案选择

• using Astro.glob() https://docs.astro.build/en/reference/api-reference/#astroglob

但不建议这样做，因为它以一种迫切的方式执行所有文件的完整导入

• using import.meta.glob() https://vitejs.dev/guide/features.html#glob-import

这样可以得到任意文件类型的列表，优点是不必执行实际的导入，因为您得到了按需执行导入的承诺，因此效率更高

• 使用文件系统，例如在节点await fs.readdir();中，但任何环境都应该具有类似的功能，例如deno fs。

引用

的示例

• import.meta.glob()

const posts = import.meta.glob('../../../data/blog/**/*.{md,mdx}')//relative to this component file
const component_path = process.cwd()+'/src/pages/blog/'
const Post_path = Object.keys(posts).find((path)=>(resolve(component_path,path) == page_path))

https://github.com/MicroWebStacks/astro-big-doc/blob/45c2bafc85623ffab3c394609eb119e2693cd2ee/src/pages/blog/%5B...page%5D.astro L27

文件系统

async function parse_dir_recursive(dir) {
const subdirs = await fs.readdir(dir);
const files = await Promise.all(subdirs.map(async (subdir) => {
const res = resolve(dir, subdir);
return (await fs.stat(res)).isDirectory() ? parse_dir_recursive(res) : res;
}));
return files.reduce((a, f) => a.concat(f), []);
}

node . js fs。Readdir递归目录搜索

https://github.com/MicroWebStacks/astro-big-doc/blob/45c2bafc85623ffab3c394609eb119e2693cd2ee/src/layout/nav_section.js不断化解

注意:链接的示例https://github.com/MicroWebStacks/astro-big-doc具有与所问问题相同的用例，从文件列表甚至递归地在目录层次结构中生成导航菜单