如何为Next.js中通过Ghost Content API获取的博客文章添加样式？

Ghost的Content API仅负责提供内容数据，不会返回主题关联的样式，下面是几种可行的处理方案：

1. 复用Ghost主题的文章样式 #

• 找到你Ghost后台正在使用的主题，提取其中针对文章内容的CSS文件（一般在主题的assets/css目录下，比如content.css或post.css）
• 将这份CSS文件复制到Next.js项目中，通过全局样式导入或页面组件内导入的方式引入
• 渲染文章HTML时，确保容器的类名和Ghost主题中对应样式的选择器匹配，比如用<div className="post-content" dangerouslySetInnerHTML={{ __html: post.html }} />，对应主题里的.post-content样式规则

2. 自定义文章内容样式 #

• 完全根据你的Next.js项目风格，为富文本常用标签编写样式，示例如下：

  .article-content p {
    line-height: 1.8;
    margin-bottom: 1.2rem;
    color: #333;
  }
  .article-content h1, .article-content h2 {
    margin: 1.8rem 0 1rem;
    font-weight: 700;
    color: #111;
  }
  .article-content blockquote {
    border-left: 4px solid #2563eb;
    padding-left: 1.2rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #555;
  }
  .article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
  }
  .article-content code {
    background-color: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
  }
  

• 把Ghost返回的HTML包裹在带有上述类名的容器中，即可应用自定义样式

3. 切换为Markdown格式渲染（可选） #

• 若你的Ghost版本支持输出Markdown内容，可修改API请求参数，获取文章的Markdown格式内容
• 在Next.js中使用react-markdown类库渲染Markdown，示例代码：

  import ReactMarkdown from 'react-markdown';
  import remarkGfm from 'remark-gfm'; // 支持GFM语法（表格、任务列表等）
  
  // 组件内渲染部分
  <div className="article-content">
    <ReactMarkdown remarkPlugins={[remarkGfm]}>
      {post.markdown}
    </ReactMarkdown>
  </div>
  

• 同样为.article-content编写样式，即可完全控制渲染效果

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