Question

我已经构建了一个静态 next.js 站点，并希望从 Markdown 文档文件夹中生成一组静态页面（但就这个问题而言，可以是任何内容 - 文本文件等）。想象一下我有这个 docs 文件夹：

/docs/foo/bar.md
/docs/foo/baz.md
/docs/bar/foo.md
...
/docs/foobar.md

我能发现完整 URL slug 的唯一方法是在构建时我可以递归 docs 文件夹并发现这些路径：

/docs/foo/bar
/docs/foo/baz
/docs/bar/foo
...
/docs/foobar

通常，如果我知道 diff 子路由，我可以添加这样的文件：

pages/docs/foo/[page].js
pages/docs/bar/[page].js

...但是我在代码时不知道这些子文件夹能够做到这一点，只有在我递归文档的构建时才知道。

我能找到的最近的东西是这样的一条万能路线：

pages/docs/[...slug].js

我知道我可以在应用程序中轻松链接到诸如 /docs/foo/bar 之类的路线，并且我知道我可以像在 this example 中那样在页面本身中获取 slug，但我不确定如果/如何使用 getStaticPaths 和 getStaticProps 在此文件中生成我需要的静态路径？

非常感谢任何帮助！

Answer 1

我刚刚设法解决了这个对我来说不是很明显的问题...

在 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 中，由于 getStaticPaths，next.js 期望提供的 slug 是路径部分的数组，因此构建数组数组可以解决它：

[...slug].js

...然后 export async function getStaticPaths() { // Load the docs from the file system and convert their relative docs paths to arrays const docs = [["foo", "bar"], ["foo", "baz"], ["bar", "foo"], ["foobar"]]; return { paths: docs.map((doc) => { return { params: { slug: doc, }, }; }), fallback: false, }; } 将被上面的每个数组调用，我可以检索降价并将内容准备为页面组件的道具。

从markdown文件夹生成next.js静态页面

1 个答案: