Gatsby博客列表如何为奇偶下标项分别设置不同的展示样式

不需要拆分博客数组，直接遍历原数组时通过当前项的下标判断样式即可，修改后的代码如下：

const { blogs } = data.strapi

return (
  <Layout>
    {blogs.map((blog, index) => (
      <article key={blog.id}>
        <header>
          <h1 
            className={index % 2 === 0 ? "text-danger text-end" : "text-primary text-start"}
            {/* 若不用CSS类，也可以直接写内联样式：
            style={{
              color: index % 2 === 0 ? '#ff0000' : '#0000ff',
              textAlign: index % 2 === 0 ? 'right' : 'left'
            }}
            */}
          >
            {blog.title}
          </h1>
          <p>{blog.description}</p>
        </header>
        <hr />
      </article>
    ))}
  </Layout>
)

export default BlogPost;

说明：

• 遍历完整的blogs数组可以保证博客的原有展示顺序不变
• 用三元运算符根据下标index的奇偶性动态绑定样式：下标为0、2、4的项（即首篇、第三篇等奇数排序的博客）应用红色右对齐样式，下标为1、3、5的项应用蓝色左对齐样式
• 记得给遍历生成的<article>标签添加唯一key属性，符合React开发规范

内容的提问来源于stack exchange，提问作者Richard Rodrigues