EyouCMS模板侧边栏编辑全流程实操指南 零基础可直接上手操作

一、操作前必备准备工作

操作前需满足两个基础前提：一是使用EyouCMS V1.5.0及以上版本，低版本不支持侧边栏可视化编辑功能；二是持有后台超级管理员账号密码，如需修改源代码还需拿到FTP或服务器文件管理权限。

必须先完成备份操作：登录后台点击【系统】-【数据备份】备份整站数据，同时将/template/当前使用模板名称文件夹整体打包下载到本地，避免修改错误无法恢复。

二、方式1：后台可视化编辑（无代码基础推荐）

适合仅需要修改侧边栏内容、排序、增减预设模块的场景，全程不需要写代码。

步骤1：进入可视化编辑模式

登录EyouCMS后台，左侧菜单栏依次点击【模板】-【标签管理】-【可视化编辑】，顶部预览区切换到需要修改侧边栏的页面（首页、文章列表页、内容页等），点击页面右上角【编辑此页】按钮进入编辑状态。

步骤2：定位侧边栏组件

进入编辑模式后，鼠标悬浮到页面侧边栏区域，系统会自动高亮对应组件块，点击组件块右上角的铅笔形状【编辑】图标，即可呼出侧边栏配置面板。

步骤3：修改侧边栏配置

配置面板支持直接修改以下参数，所有修改实时在预览区生效：

• 侧边栏直接在标题输入框修改文字，可调整字号、颜色、对齐方式
• 模块排序：拖动对应模块的上下箭头即可调整展示顺序
• 模块增删：点击模块右上角叉号删除不需要的模块，点击面板底部【添加模块】可选择最新文章、热门标签、作者信息、广告位等30+预设模块
• 单模块参数：点击单个模块的配置按钮，可设置展示条数、是否显示缩略图、时间格式、是否显示浏览量等参数

步骤4：保存发布生效

所有修改确认无误后，点击页面右上角【保存并发布】按钮，随后点击后台【系统】-【缓存管理】清空全站缓存，前台刷新页面即可看到修改后的效果。

三、方式2：源代码编辑（自定义需求场景使用）

如果可视化预设模块满足不了自定义需求，可直接修改模板源代码实现个性化侧边栏效果，需要基础HTML/CSS知识。

步骤1：定位侧边栏模板文件

EyouCMS模板文件统一存放在/template/当前使用模板名称/目录下，不同页面的侧边栏对应路径如下：

• 整站公共侧边栏：/template/当前模板名/public/sidebar.htm
• 文章列表页专属侧边栏：/template/当前模板名/article/lists_sidebar.htm
• 文章内容页专属侧边栏：/template/当前模板名/article/show_sidebar.htm
• 产品页专属侧边栏：/template/当前模板名/shop/sidebar.htm

如果找不到对应文件，可打开对应页面的主模板，搜索{include file="public/sidebar.htm" /}这段引入代码，即可获取侧边栏的实际存储路径。

步骤2：修改侧边栏代码

用代码编辑器打开侧边栏模板文件，以下是常见需求的可直接复制的代码示例：

• 添加自定义文本/图片模块： ```html

  自定义模块标题

  自定义内容，支持插入图片、链接、表格等任意HTML标签

  
  ```
• 添加热门文章调用模块，支持自定义展示数量、排序规则： ```eyou {eyou:arclist row='8' orderby='click' titlelen='18'}
• {$field.title}{$field.click}
{/eyou:arclist} ``` 参数说明：row控制展示条数，orderby=click按点击量排序，titlelen控制标题显示字数，{$field.click}是浏览量变量，不需要可删除。
• 添加标签云模块： ```eyou {eyou:tag row='15' orderby='rand'} {$field.tag} {/eyou:tag} ```
• 修改侧边栏宽度：打开模板CSS文件（路径一般为/template/当前模板名/static/css/style.css），搜索.sidebar选择器，修改width属性值即可，示例： ```css .sidebar { width: 320px; float: right; margin-left: 20px; } ```

步骤3：生效验证

修改完代码保存后，将文件上传覆盖服务器原文件，回到EyouCMS后台清空全站缓存，前台按Ctrl+F5强制刷新页面即可查看效果。

四、常见问题排查

• 修改后前台无变化：首先确认后台已清空全站缓存，其次检查是否修改了对应模板的侧边栏文件，如果站点开启了CDN加速，需要同步刷新CDN节点缓存。
• 可视化编辑找不到侧边栏组件：说明当前模板的侧边栏没有使用系统预设的组件标签，只能用源代码方式修改，也可以联系模板作者添加可视化支持。
• 侧边栏错位：一般是修改代码时遗漏了HTML闭合标签，或者侧边栏宽度+主内容宽度超过了父容器宽度，检查所有标签是否闭合，调整两个区域的宽度总和小于父容器宽度即可解决。
• 移动端侧边栏显示异常：打开CSS文件找到媒体查询代码段（一般为@media screen and (max-width:768px)），修改.sidebar的display属性，需要展示设置为display:block，需要隐藏设置为display:none即可。