Contentful集成博客页面样式调整与标签展示技术求助

1. 博客主页网格布局实现 #

给博客卡片的父容器添加CSS Grid样式即可实现目标布局：

1. 在blogs.js中，给包裹所有BlogCard的容器添加类名（如blog-grid）：

// blogs.js 渲染部分
return (
  <div className="blog-grid">
    {blogs.map(blog => (
      <BlogCard key={blog.id} {...blog} />
    ))}
  </div>
);

2. 添加对应的CSS：

.blog-grid {
  display: grid;
  /* 根据目标布局设置列数，示例为3列等宽 */
  grid-template-columns: repeat(3, 1fr);
  /* 设置卡片之间的间距 */
  gap: 2rem;
  /* 响应式适配，根据屏幕宽度调整列数 */
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

3. 确保BlogCard组件的宽度设为100%，避免卡片溢出：

.blog-card {
  width: 100%;
}

2. 单篇博客段落间距设置 #

在slug.js中，给渲染博客内容的容器添加段落间距样式：

1. 给内容容器添加类名（如blog-content）：

// slug.js 渲染部分
return (
  <div className="blog-post">
    <h1>{blog.title}</h1>
    <div className="blog-content" dangerouslySetInnerHTML={{ __html: blog.content }} />
  </div>
);

2. 添加对应的CSS：

.blog-content p {
  margin-bottom: 1.5rem; /* 调整该值控制段落间距 */
  line-height: 1.6; /* 可选，优化行高提升可读性 */
}

若样式未生效，可增加选择器优先级（如.blog-post .blog-content p），避免被全局样式覆盖。

3. 标签获取与展示 #

从Contentful获取标签 #

在API请求中，确保查询字段包含标签（假设Contentful中标签字段名为tags，类型为字符串数组）：

// blogs.js 或 slug.js 的 getStaticProps 中
export async function getStaticProps() {
  const res = await fetch(`https://cdn.contentful.com/spaces/[你的空间ID]/entries?content_type=blog&select=fields.title,fields.slug,fields.tags`);
  const data = await res.json();
  return {
    props: {
      blogs: data.items.map(item => ({
        ...item.fields,
        id: item.sys.id
      }))
    }
  };
}

在博客主页展示标签（BlogCard组件） #

修改BlogCard组件，接收并渲染tags属性：

function BlogCard({ title, slug, tags }) {
  return (
    <div className="blog-card">
      <h3><a href={`/blogs/${slug}`}>{title}</a></h3>
      <div className="blog-tags">
        {tags.map(tag => (
          <span key={tag} className="tag">{tag}</span>
        ))}
      </div>
    </div>
  );
}

添加标签基础样式：

.blog-tags {
  margin-top: 0.5rem;
}
.tag {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.2rem 0.6rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 0.875rem;
}

在单篇博客页面（slug.js）展示标签 #

在slug.js的页面渲染部分添加标签展示逻辑：

export default function BlogPost({ blog }) {
  return (
    <div className="blog-post">
      <h1>{blog.title}</h1>
      <div className="blog-tags">
        {blog.tags.map(tag => (
          <span key={tag} className="tag">{tag}</span>
        ))}
      </div>
      <div className="blog-content" dangerouslySetInnerHTML={{ __html: blog.content }} />
    </div>
  );
}

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