苹果CMS模板导航菜单修改完整实操指南

一、准备工作与文件定位

在开始修改前，请务必通过FTP工具或服务器文件管理器，连接到你的苹果CMS网站根目录。所有模板文件均位于 template 目录下。你需要先确认当前网站使用的是哪个模板。

登录苹果CMS后台，进入“系统”->“网站参数配置”->“基本设置”，查看“模板目录”一项。假设当前模板目录名为“default”，那么你需要操作的所有文件路径为：/template/default/。

导航菜单的修改主要涉及两个核心文件：

• 导航菜单数据文件：/template/default/public/header.html （此路径为常见情况，具体取决于模板设计）
• 导航菜单样式文件：/template/default/css/style.css （样式文件路径也可能在 /template/default/static/css/ 下）

在修改任何文件前，请务必将原文件进行备份。你可以直接复制一份并重命名为 header.html.bak。

二、修改导航菜单栏目与链接

使用代码编辑器（如VS Code、Notepad++）打开 header.html 文件。导航菜单通常由无序列表

和列表项
• 构成。

  1. 找到导航菜单的HTML结构

  在文件中搜索关键词，如“nav”、“menu”、“导航”或直接查看

  这样的结构。一个典型的导航菜单代码块如下：
  ```
  • 首页
  • 电影
  • 文章
  • 专题
  • 留言
  ```

  2. 增删或修改菜单项

  你可以通过增加或删除

  • ...
  标签对来改变菜单项。
  • 增加一个名为“动漫”的栏目：在“电影”和“文章”的列表项之间插入以下代码：
  ```
  • 动漫
  ```

  ['id'=>1] 表示调用分类ID为1的影片列表，你需要将其替换为你后台“视频分类”中“动漫”分类对应的真实ID。

  • 删除一个菜单项：直接删除对应的整个
  • ...
  标签对即可。
  • 修改菜单名称和链接：修改 与 中间的文字即可改变显示名称；修改 href 属性的值即可改变链接地址。

  对于链接，常用格式有：

  • 站内分类页：{:mac_url('vod/show', ['id'=>分类ID])}
  • 自定义单页：{:mac_url('label/index', ['id'=>'about'])} （需在后台“自定义页面”创建标识为“about”的页面）
  • 外部链接：href="https://www.example.com" target="_blank" （添加 target="_blank" 可在新窗口打开）

  三、调整导航菜单样式（CSS）

  打开对应的CSS文件（如 style.css）。导航样式通常由类选择器控制，如 .nav、.nav li、.nav li a 等。

  1. 修改菜单整体样式

  在CSS文件中找到 .nav 的样式块，你可以调整以下属性：

  ``` .nav { list-style: none; / 去除列表默认圆点 / margin: 0 auto; / 居中 / padding: 0; width: 1200px; / 导航宽度 / background-color: 222; / 背景色 / height: 50px; / 高度 / line-height: 50px; / 行高，使文字垂直居中 / } ```

  2. 修改菜单项样式

  

  找到控制每个菜单项和链接的样式，例如：

  ``` .nav li { float: left; / 横向排列 / position: relative; } .nav li a { display: block; / 将链接变为块级元素 / color: ccc; / 默认文字颜色 / text-decoration: none; / 去除下划线 / padding: 0 20px; / 左右内边距 / font-size: 16px; } .nav li a:hover, .nav li.active a { / 鼠标悬停和当前激活项样式 / color: fff; background-color: e74c3c; / 悬停/激活背景色 / } ```

  修改关键项：直接更改上述代码中的颜色值（如 222, e74c3c）、尺寸值（如 20px, 16px）即可。

  3. 添加下拉菜单样式（如果模板支持）

  如果导航包含下拉菜单，其HTML结构可能在 header.html 中已存在，但被注释或需要激活。CSS中会有类似如下代码控制其显示：

  ``` .nav li ul.submenu { display: none; / 默认隐藏 / position: absolute; top: 50px; left: 0; background: 333; min-width: 160px; } .nav li:hover ul.submenu { display: block; / 鼠标悬停时显示 / } ```

  确保你的HTML结构中存在对应的

  ...
  子列表，并且其父级
  • 在鼠标悬停时，子菜单的 display 属性会变为 block。

    四、使导航与后台分类联动（高级）

    手动修改HTML虽然直接，但每次后台增加分类都要改代码很麻烦。苹果CMS提供了标签调用方式，可以自动读取后台分类生成导航。

    1. 使用Maccms标签动态调用视频分类

    在 header.html 中，将之前手写的电影、电视剧等

  • 项，替换为以下标签代码：
    ``` {maccms:vod type="all" order="asc" by="sort"}
  • {$vo.type_name}
  {/maccms:vod} ```

  这段代码会自动循环输出所有视频分类。参数说明：

  • type="all": 调用所有分类。可用 top 调用一级分类，mid 调用二级分类。
  • order="asc": 按排序号升序排列。
  • by="sort": 以排序字段为依据。
  • {$vo.url}: 分类的链接地址，自动生成。
  • {$vo.type_name}: 分类的名称。

  2. 控制动态调用分类的样式

  动态生成的列表项没有固定的 class，你可以通过其父级

  的类来控制整体样式。如果需要为第一个或当前分类添加特殊样式（如 active），需要在HTML中结合条件判断：
  ``` {maccms:vod type="all" order="asc" by="sort" id="nav"}
  • {$vo.type_name}
  {/maccms:vod} ```

  这段代码中，{if condition="$vo.type_id eq $param.id"} 判断当前访问的分类ID是否与循环到的分类ID一致，如果一致则添加 class="active yipinkpwx27-caoj-l71s"。$nav_i eq 1 则判断如果是第一个分类，且在首页也激活。

  五、修改后的测试与排查

  所有文件修改并保存后，立即刷新网站前台页面查看效果。

  常见问题与解决方案：

  • 修改无效：浏览器有缓存，请按Ctrl+F5强制刷新。如果仍无效，检查修改的文件路径是否正确，确认修改的是当前正在使用的模板。
  • 导航错乱：检查HTML标签是否闭合完整，特别是
  • 和 标签。确保没有缺少结束标签。
  • 样式未生效：检查CSS文件中对应的类名（如 .nav）是否与HTML中的 class 名称完全一致（包括大小写）。使用浏览器的开发者工具（F12），检查元素应用的CSS规则，查看是否有样式被覆盖或拼写错误。
  • 动态调用不显示分类：请确保后台“视频分类”中已经添加了分类数据，并且分类状态是启用的。

  通过以上步骤，你可以完成从基础到高级的苹果CMS模板导航菜单修改。务必遵循“修改前备份，修改后测试”的原则。