1

我正在使用 Next.js 和 MDX 编写博客。为此，我下载了我正在尝试调整的这个 repo 。但我找不到如何对帖子进行排序。目前它们按字母顺序排列，但我想按日期（或自定义排序）对它们进行排序。我怎样才能做到这一点？

这是代码：

{posts.map((post) => (
    <section key={post.filePath}>
        <Link
            as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
            href={`/posts/[slug]`}
        >
            <a>{post.data.title}</a>
        </Link>
    </section>
))}

export function getStaticProps() {
    const posts = postFilePaths.map((filePath) => {
        const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
        const { content, data } = matter(source);

        return {
            content,
            data,
            filePath,
        };
    });

    return { props: { posts } };
}

编辑：

我试图对元素图进行排序。它起作用了，但是每次我重新加载页面时，它都会按字母顺序排列。这可以从哪里来？

这是我的新代码：

const SortedPosts = posts.sort((a, b) =>
    a.position > b.position ? 1 : -1
);

{SortedPosts.map((post) => (
    <section key={post.filePath} position={post.data.position}>
        <Link
            as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
            href={`/posts/[slug]`}
        >
            <a>{post.data.title}</a>
        </Link>
    </section>
))}
4

2 回答 2

0

如果您不想自己编写逻辑，请导入一个库，例如lodash. 之后，在您的 getStaticProps 函数中，在返回帖子之前执行以下操作：

const sortedPosts = _.reverse(_.sortBy(posts, (post) => post.data.publishedOn))

return { props: { posts: sortedPosts } }
于 2021-09-24T14:33:16.913 回答
0

您不需要为 SortedPosts 创建单独的变量，您可以在返回之前使用 sort 函数简单地对现有的帖子数组进行就地排序getStaticProps()

export function getStaticProps() {
    const posts = postFilePaths.map((filePath) => {
    // existing code
    });

    posts.sort((a, b) => a.position > b.position ? 1 : -1 );
    return { props: { posts } };
}

提示：如果你想颠倒顺序，你可以简单地交换-1和1例如：从1 : -1到 -1 : 1

参考：查看这个问题，它有更多关于排序的替代方案和详细信息 -按字符串属性值排序对象数组

于 2021-10-29T19:44:59.357 回答