使用 Contentful 按创建日期对帖子进行排序

Question

我正在使用 Contentful 来管理我正在制作的网站的博客文章。 我设置了内容模型并让它在我的页面上很好地显示，但如果我更新旧帖子，它会将其移动到页面顶部。 它们是按最近更新而不是创建日期排序的。 有没有办法改变它们在网站上的排序方式？或者我必须在我的代码中管理它？

这是我获取帖子的代码：

const getPosts = async () => {
    try {
      const response = await client.getEntries({
        content_type: "contentType",
      });
      const posts = response.items.map((content) => {
        const title = content.fields.postTitle;
        const post = content.fields.postContent.content;
        const date = content.fields.date;
        const headerImagesObject = content.fields.photoSlideshow;
        const id = content.sys.id;
        const imageFileArray = [];
        headerImagesObject.forEach(function (image) {
          const file = image.fields.file.url;
          imageFileArray.push(file);
        });
        return { title, date, post, imageFileArray, id };
      });
      setPosts(posts);
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };

然后将它们放在页面上，我有这个：

<div>
        {posts.map((content) => {
          const { title, date, post, imageFileArray, id } = content;
          return (
            <article
              key={id}
              className="mb-24 mx-6 xl:mx-64 lg:mx-32 bg-blog-bg px-12 py-12 rounded"
            >
              <div className="xl:flex xl:flex-col xl:items-center">
                <Splide
                  className="slideshow-container"
                  options={{
                    gap: "1rem",
                    type: "loop",
                    width: "50vw",
                    autoplay: true,
                    pagination: false,
                    speed: 3000,
                    interval: 4000,
                    pauseOnHover: true,
                    pauseOnFocus: true,
                  }}
                >
                  {imageFileArray.map((image) => {
                    return (
                      <SplideSlide key={image}>
                        <div>
                          <img src={image} alt="image" />
                        </div>
                      </SplideSlide>
                    );
                  })}
                </Splide>
                <div className="flex justify-between items-center my-6 flex-col">
                  <h3 className="text-4xl font-bold">{title}</h3>
                  <h5>{date}</h5>
                </div>
                <div className="post-container">
                  {post.map((content) => {
                    let nodeType = content.nodeType;
                    if (nodeType == "embedded-asset-block") {
                      let bodyImage = content.data.target.fields.file.url;
                      let imageDesc = content.data.target.fields.title;
                      return (
                        <img
                          src={bodyImage}
                          alt={imageDesc}
                          key={imageDesc}
                          className="h-64 m-4 rounded"
                        />
                      );
                    }
                    if (nodeType == "paragraph") {
                      let pContent = content.content[0].value;
                      if (pContent == "") {
                        return <hr key={pContent} className="opacity-0"></hr>;
                      } else {
                        return <p key={pContent}>{pContent}</p>;
                      }
                    }
                    if (/^heading-[1-8]$/.test(nodeType)) {
                      let nodeTypeArray = Array.from(nodeType);
                      let headerType = nodeTypeArray[nodeTypeArray.length - 1];
                      let headerValue = content.content[0].value;
                      let headerClasses = `text-2xl`;
                      if (headerType === "1") {
                        headerClasses = `text-4xl font-bold my-4`;
                      } else if (headerType === "2") {
                        headerClasses = `text-3xl font-semibold my-4`;
                      } else if (headerType === "3") {
                        headerClasses = `text-2xl font-semibold my-4`;
                      } else if (headerType === "4") {
                        headerClasses = `text-1xl font-semibold my-4`;
                      } else if (headerType === "5") {
                        headerClasses = `text-xl font-semibold my-4`;
                      }
                      return React.createElement(
                        `h${headerType}`,
                        { key: headerValue, className: headerClasses },
                        headerValue
                      );
                    }
                  })}
                </div>
              </div>
            </article>
          );
        })}
      </div>

不确定这是否有帮助。但我不知道如何以正确的方式订购它们。为什么Contentful按更新排序？

Answer 1

您可以通过将

order

参数添加到

client.getEntries

函数来实现此目的，如下所示：

const getPosts = async () => {
    try {
      const response = await client.getEntries({
        content_type: "contentType",
        order: 'sys.createdAt'
      })
  // rest of your code goes here

}

如果您想要相反，请使用：

const getPosts = async () => {
      try {
         const response = await client.getEntries({
           content_type: "contentType",
           order: '-sys.createdAt'
         })
     // rest of your code goes here
    
    }