迅睿CMS模板布局修改实操指南：从定位模块到刷新生效全步骤

准备工作

1. 确保已安装迅睿CMS，官方下载地址：https://demo.xunruicms.com/download/，并获取后台登录权限；2. 优先使用自定义模板（避免修改官方自带模板导致升级丢失），若未创建自定义模板，可在后台【模板管理】→【模板备份】→【另存为自定义模板】，命名后操作；3. 准备FTP工具，推荐FileZilla，下载地址：https://filezilla-project.org/download.php。

确认当前模板路径

登录迅睿CMS后台，进入【模板管理】→【网站模板】，找到正在使用的自定义模板，点击右侧「编辑」，记下模板的服务器路径，示例路径：/www/server/panel/vhost/你的域名/xunruicms/templates/你的模板名/，根据实际环境调整（宝塔面板默认路径如示例）。

实操步骤

第一步：定位需修改的布局模块

1. 打开需修改的前台页面；2. 右键点击目标布局区域（如头部、主体、侧边栏），选择「检查」（Chrome/Firefox浏览器，按F12也可打开开发者工具）；3. 在开发者工具的「Elements」标签中，找到该区域的HTML标签，记录其class或id名称（如头部class为header，首页主体class为xunrui-main）。

第二步：找到对应布局模板文件

根据路径查找对应文件：全局布局（头部、底部）对应模板目录下的block文件夹，如头部模板：block/header.html；页面布局（首页、列表页）对应content文件夹，如首页模板：content/home/index.html、列表页模板：content/list.html；若使用子模板，路径需添加child前缀，如子模板首页：child/content/home/index.html。

第三步：修改布局代码与样式

用FTP工具连接服务器，打开上述文件，分场景实操： 场景1：修改全局头部宽度 打开block/header.html，默认代码： ```

``` 将container类的max-width从默认1200px改为1400px，修改后代码： ``` ``` 场景2：将首页主体两栏布局改为三栏 打开content/home/index.html，默认主体结构： ``` ``` 调整为三栏结构： ``` ``` 打开后台【模板管理】→【样式管理】→找到当前模板的style.css，添加对应样式： ``` .main-left { width:25%; float:left; } .main-center { width:50%; float:left; } .main-right { width:25%; float:left; } .xunrui-main { overflow:hidden; } / 清除浮动，防止父级高度塌陷 / ``` 注意：必须确保样式选择器与修改后的HTML标签完全对应，类名前若有前缀需保持一致。

第四步：清理缓存并生效

这是生效的核心步骤，必须严格执行：

• 打开迅睿CMS后台，进入【系统设置】→【系统缓存】，点击全部清理；
• 清空浏览器缓存：Windows按Ctrl+Shift+Delete，Mac按Cmd+Shift+Delete，选择「缓存」，点击清理；
• 刷新前台页面，查看布局修改效果。

若未生效，检查：1. 模板文件路径是否正确；2. 代码是否有语法错误；3. 所有缓存是否清理彻底。

常见问题排查

修改后布局错乱

1. 检查父级元素是否添加overflow:hidden，避免浮动元素导致高度塌陷；2. 新增模块宽度总和必须为100%，避免超出父级容器；3. 用开发者工具检查样式优先级，若样式被划掉，需增加选择器权重（如添加父级类名前缀：.xunrui-main .main-left）。

找不到对应模板文件

若FTP中未找到，进入后台【模板管理】→【导入/导出模板】，确认自定义模板是否完整，若为官方模板，需先另存为自定义模板再修改，避免升级丢失。