帝国CMS内容页段落间距与边距调整实操全教程

前置准备：确认模板核心路径

帝国CMS的模板默认存储在站点根目录的 /e/template/ 文件夹下，你的默认模板名称为 default，修改时直接对应该目录即可，新手禁止使用富文本编辑器（如Word、WPS）修改，需用Notepad++、VS Code等纯文本编辑器操作。

第一步：备份核心文件（必做，避免操作失误）

操作要求：找到两个关键文件，复制一份到电脑本地备份，后续出错可直接替换恢复：

• 内容页模板文件：站点根目录/e/template/default/content.html
• 样式文件：站点根目录/e/template/default/css/style.css

备份文件需命名清晰，如 backup_content.html、backup_style.css，禁止省略此步骤。

第二步：定位内容页正文区域

打开 content.html，使用编辑器的搜索功能，输入关键词 empire:varname=text，此处是帝国CMS输出正文的核心位置，对应包裹正文的HTML标签默认结构为：

``` ```

如果没有 class="content-body yipinkpr7c5-mzwg-ts4k"，需手动添加该class，方便后续统一调整间距，修改后保存文件。

第三步：调整内容与页面边缘的整体边距

打开 style.css，搜索 .content-body，找到默认样式（若没有则新增该选择器），默认可能是：

``` .content-body { line-height: 1.6; font-size: 14px; color: 333; } ```

修改样式，添加内边距避免内容贴边，数值可根据需要调整（1.5rem对应约24px）：

``` .content-body { line-height: 1.6; font-size: 14px; color: 333; padding: 1.5rem; / 上下左右各1.5rem，也可改为20px固定值 / } ```

第四步：调整段落之间的垂直间距

在 style.css 中搜索 p 标签，找到默认的段落样式，一般为：

``` p { margin: 0 0 1em 0; } ```

修改为底部间距1.5rem，解决段落过挤的问题：

``` p { margin: 0 0 1.5rem 0; } ```

如果需要调整段落左右留白，可添加 padding: 0.5rem 0; 到p的样式中。

第五步：调整列表内容的间距（可选，针对带列表的内容）

如果内容页中使用了ul/ol列表，需额外调整间距，在 style.css 末尾添加以下代码：

``` / 列表整体缩进与上下间距 / .content-body ul, .content-body ol { margin: 0 0 1.5rem 1.5rem; } / 列表项之间的垂直间距 / .content-body li { margin: 0 0 0.5rem 0; } ```

第六步：清理缓存使修改生效（必做，帝国CMS核心要求）

修改模板和样式后必须清理缓存，否则静态内容页不会更新，两种清理方式：

• 方式1（后台操作）：登录帝国CMS后台→系统→清理系统缓存→勾选「模板缓存」「静态页面缓存」→点击提交
• 方式2（直接删除文件）：进入站点根目录/e/cache/template/，删除该目录下所有文件

第七步：验证并微调效果

在浏览器中打开任意一条内容页，查看段落间距、内容边距是否符合预期：

• 若段落仍过挤，可将p的margin底部值改为1.75rem；
• 若内容左右留白过多，可将.content-body的padding改为1rem；
• 每次修改样式后必须重新清理缓存，直到达到满意效果。

如果操作后出现布局错乱，立即替换之前备份的两个文件，重新操作即可。