正文

从模板骨架到SEO实战—苹果CMS在线视频站自定义模板全流程拆解

机房驻场手记
机房驻场手记 V管理员 /2阅读/3评论
0805
文章最后更新时间2026年08月05日，若文章内容或图片失效，请留言反馈！

你正在运行一个基于苹果CMS（Apple CMS，一款以PHP+Mysql驱动的开源视频管理程序）的在线视频站，默认模板早已看腻，前台的加载速度、移动端的自适应表现、乃至搜索引擎的收录效率，都卡在了模板的“底层逻辑”上，与其套用网上现成的第三方面皮，不如自己动手构建一套专属模板，我们直接进入代码层，从目录结构讲到标签调用，再到移动端适配与播放页美化，最后落在SEO的每个meta字段上，带你走通完整的开发链路，确保你跟着敲,就能做出一个可上线的成品。

第一步：吃透官方模板的骨架（文件结构）

苹果CMS的模板目录固定在 /application/ 下的 view 文件夹内（或你自定义的 theme 目录），以标准官方模板为例,结构如下：

view/
├── admin/          # 后台管理模板（一般不碰）
├── index/          # 前端主模板目录
│   ├── public/     # 公用部分：header.html, footer.html, banner.html
│   ├── index/      # 首页：index.html
│   ├── label/      # 列表页：list.html（含筛选项）
│   ├── detail/     # 播放页：detail.html（含播放器容器）
│   ├── search/     # 搜索页：search.html
│   ├── user/       # 会员中心模板
│   ├── gbook/      # 留言板
│   └── ...         
├── mobile/         # 移动端独立模板（若开启强制跳转则使用）

关键点：首页、列表页、播放页是三大核心，而 public/header.html 和 footer.html 控制了全站的头尾，也是SEO元标签和底部友情链接的集中地，模板引擎采用HTML+原生PHP混合，或自带的模板标签语法（如 {$obj.vod_name}），您既可以在HTML中直接嵌PHP代码（推荐）,也可使用CMS提供的内置标签。

第二步：常用标签调用——你必须在3分钟内记住的代码

  1. 视频列表调用（列表页核心）：
    在 label/list.html 中，常规循环标签为：

    从模板骨架到SEO实战—苹果CMS在线视频站自定义模板全流程拆解

    从模板骨架到SEO实战—苹果CMS在线视频站自定义模板全流程拆解

    {maccms:vod num="12" paging="yes" class="'.$type_id.'" order="desc" by="time"}
<div class="video-item">
    <a href="{:mac_url_vod_detail($vo)}">
        <img src="{$vo.vod_pic}" alt="{$vo.vod_name}" />
        <p>{$vo.vod_name}</p>
        <span>{$vo.vod_remarks}</span> <!-- 显示“高清”“更新至10集”等备注 -->
    </a>
</div>
{/maccms:vod}

  2. 当前分类变量：在列表页头部，通过 {$type.type_name} 显示分类名，{$type.type_id} 获取分类ID，搜索页同样支持 {$param.wd} 输出搜索关键词。

  3. 播放页的播放器调用：
    detail.html 中不要写死播放器代码,使用动态解析：

    <?php echo $player; ?>  <!-- 输出播放器iframe，系统自动根据播放来源生成 -->

    正确的播放地址变量为 {$obj.vod_play_url}（原始m3u8或mp4），若开启解析,则通过后台配置自动转换。

第三步：移动端适配——别做两套模板，用响应式+独立触屏样式

很多新手一上来就写两套模板，其实苹果CMS自带移动端检测,你需要做的是：

  1. 开启官方移动端模板：在后台“系统”-“网站参数”中启用“移动端模板支持”，并确保 mobile 目录内存在 index.html、detail.html。
  2. 强制使用同一套模板响应式布局：如果你不想维护两套，在 public/header.html 头部加入下面这段CSS来实现基础适配：
    @media (max-width: 768px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); } /* 平板竖屏 */
}
@media (max-width: 480px) {
    .video-grid { grid-template-columns: repeat(3, 1fr); } /* 手机两列 */
    .header-nav { overflow-x: scroll; white-space: nowrap; }
}
  3. 杜绝横向滑动：在 body 上添加 width:100%; overflow-x:hidden;，对视频封面图片使用 aspect-ratio: 2/3; object-fit: cover; 保证比例不跑偏。

特别提醒：移动端播放页点击全屏时，请将播放器的 playsinline 参数设为 playsinline="true" webkit-playsinline="true"，避免安卓/IOS自动全屏影响用户体验。

第四步：三大页面美化实例——照着改就不丑

首页（index.html）：采用“轮播Banner + 分类TV局通栏”布局，在Banner区域，用后台的“幻灯片”数据调用：

{maccms:vod num="5" type="all" order="desc" by="time"}
<div class="swiper-slide"><a href="{:mac_url_vod_detail($vo)}"><img src="{$vo.vod_pic}" /></a></div>
{/maccms:vod}

旁边放“热播榜单”侧栏，调用本月人气：by="hits" 升序。

列表页（list.html）：分页用系统自动生成的 {__PAGING__} 变量，样式改成“加载更多”按钮，用Ajax异步获取 mac_url_vod_list($param)，注意在底部显示当前页分类的“相关标签”，如“动作片”、“科幻片”这些词,方便内链。

播放页（detail.html）：重点展示“播放地址Tab”和“猜你喜欢”，播放地址用 {$obj.vod_play_list} 数组循环输出，并配合 mac_url_play($obj,$player_info['sid'],$n) 生成正确链接。“猜你喜欢”建议调用同分类的随机内容：

{maccms:vod num="8" class="'.$obj.type_id.'" order="desc" by="rnd"}

第五步：SEO优化标签——模板里不写死，让CMS自动输出

这是最容易被忽略但权重最高的部分，你的 public/header.html 头部应是这样的动态结构：

<meta name="keywords" content="{if condition="$obj && $obj['vod_name']"}{$obj.vod_name},{$obj.type_name},在线观看{else}{$GLOBALS['config']['site']['site_keywords']}{/if}">
<meta name="description" content="{if condition="$obj['vod_content']"}{$obj.vod_content|strip_tags|mb_substr=0,120}{else}{$GLOBALS['config']['site']['site_description']}{/if}">

关键条件判断：

  • 首页显示站点名+首页标语。
  • 列表页显示分类名 + 站点名。
  • 播放页显示片名 + 分类 + 简介（截取120个字符），并自动带上 alternate 标签供百度转码。

在 detail.html 底部添加JSON-LD结构化数据脚本（视频对象），这样不仅标题能被识别，缩略图和时长也能被搜索爬虫提取,有效提升视频收录率。

写到最后，你会发现苹果CMS的模板开发本质是“数据变量 + 页面布局”的拼装，真正让你站与站拉开差距的，是对移动端加载速度的抠细节——比如把视频封面替换为WebP格式、将AJAX分页改为懒加载、给视频标签加上预加载 preload="none"，这些在你的自定义模板中，只需几行代码就能完成，但替换来的，是远超其他站的用户体验，赶紧打开你的底层模板，新建文件,按这个思路改起来吧。