使用Next.js调用WordPress API获取文章内容，如何还原原布局？

问题根源 #

你遇到的问题本质是：WordPress API返回的文章HTML只包含区块的基础DOM结构和类名（比如wp-block-columns、wp-block-gallery），但这些类对应的布局样式是存储在WordPress站点的主题或官方区块样式库中的，你的Next.js应用没有加载这些样式，所以无法还原分栏、画廊等结构。

可行的解决办法 #

1. 引入WordPress官方区块样式库 #

这是最省心的方案，WordPress官方维护了一套通用的区块基础样式，覆盖所有核心区块的布局规则：

• 先安装依赖：

  npm install @wordpress/block-library
  

• 在你的文章页面组件中导入样式文件：

  // 基础区块样式
  import '@wordpress/block-library/build-style/style.css';
  // 主题适配样式（可选，用于更贴近原站点的视觉风格）
  import '@wordpress/block-library/build-style/theme.css';
  

  导入后，API返回的区块类名就能自动匹配到对应的布局样式，分栏、网格这类结构会直接生效。

2. 提取目标站点的主题区块样式 #

如果原站点用了自定义主题，官方样式可能无法完全匹配视觉效果，你可以：

• 打开原WordPress站点的文章页面，用浏览器开发者工具（F12）查看样式表，筛选出所有以wp-block-开头的CSS规则，复制这些规则到你的Next.js项目的CSS文件中。
• 注意排除和全局样式冲突的规则，只保留和文章区块相关的部分。

3. 手动编写区块样式（适合精细化控制） #

如果不想引入冗余样式，可以针对API返回的类名逐个编写CSS：
比如分栏的核心样式：

.wp-block-columns {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.wp-block-column {
  flex: 1;
  min-width: 280px;
}

画廊的核心样式：

.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}

这种方式需要逐个处理区块，但能精准控制样式，避免不必要的代码。

结论 #

完全还原作者的原始布局是可以实现的，核心就是给API返回的区块类名配上对应的样式规则。优先推荐用官方区块样式库，能快速解决大部分布局问题；如果需要和原站点视觉完全一致，就提取原站点的主题区块样式。

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