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

chhkpiq4  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(91)

我有一个天文项目与几个.astro页在src/pages/topics/在我的src/pages/index.astro文件中我想有一个导航列表与链接到每个主题页。有没有办法自动获得一个列表中的所有网页的主题文件夹,所以我可以迭代它,并产生我的导航列表在index.astro
我看了一下集合,但我不认为那会起作用,因为我的主题页面需要.astro文件,而集合只支持.md文件。我不需要集合的模式检查功能,但这也不是问题,因为我的主题文件都是统一结构的。

2guxujil

2guxujil1#

是的,您可以通过不同的方式获取文件夹中所有页面的列表

解决方案选项

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

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

  • 使用import. meta.glob()网址:https://vitejs.dev/guide/features.html#glob-import

这样,您可以获得任何文件类型的列表,其优点是,由于您得到了按需执行导入的承诺,因此无需执行实际导入,因此效率更高

  • 使用例如节点await fs.readdir();中的文件系统,但是任何env都应该具有类似的功能,例如denofs。

参考示例

  • 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 recursive directory search
https://github.com/MicroWebStacks/astro-big-doc/blob/45c2bafc85623ffab3c394609eb119e2693cd2ee/src/layout/nav_section.js#L11
注意:链接示例https://github.com/MicroWebStacks/astro-big-doc的用例与所问问题相同,从文件列表生成导航菜单,甚至在目录层次结构中递归生成导航菜单

相关问题