如何使用 next-mdx-remote 对帖子进行排序？答案

【问题标题】：How to sort posts with next-mdx-remote?如何使用 next-mdx-remote 对帖子进行排序？
【发布时间】：2021-05-26 15:30:36
【问题描述】：

我正在使用 Next.js 和 MDX 编写博客。为此，我下载了我正在尝试适应的this 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>
))}

【问题讨论】：

标签： next.js mdxjs

【解决方案1】：

您不需要为 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

参考：查看这个问题，它有更多关于排序的替代方案和详细信息 - Sort array of objects by string property value

【讨论】：

【解决方案2】：

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

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

return { props: { posts: sortedPosts } }

【讨论】：