从零搭建苹果CMS影视大全新主题，模板开发进阶实战

骨架决定血肉

苹果CMS的主题系统采用MVC架构,但经过封装后更接近“视图层驱动”，一个标准主题的目录结构如下：

/template/yourtheme/
├── index.html       // 首页模板
├── list.html        // 列表页模板
├── show.html        // 播放页模板
├── detail.html      // 详情页模板（备用）
├── search.html      // 搜索页模板
├── include/         // 公共模块
│   ├── header.html  // 头部导航
│   ├── footer.html  // 页脚信息
│   ├── left.html    // 侧栏（非必须）
│   └── scripts.html // JS和统计代码
├── css/
│   └── style.css    // 主样式文件
├── images/          // 主题用到的图片
└── config.php       // 主题配置文件（可选）

其中最关键的是index.html、list.html、show.html三兄弟，它们构成了用户浏览的核心流程，苹果CMS的模板引擎基于PHP原生语法，所有变量前都有$obj->前缀，这是区别于普通PHP模板的关键点。

常用标签调用：理解数据流动

模板中90%的标签调用围绕三个核心对象：$obj（当前页面对象）、$pp（通用数据容器）、$type_id（分类ID），以下是高频代码片段：

列表循环：

从零搭建苹果CMS影视大全新主题，模板开发进阶实战

{maccms:vod num="12" type="current" order="desc" by="time"}
<li>
    <a href="{:mac_url_vod_detail($vo)}" title="{$vo.vod_name}">
        <img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name}" />
        <span>{$vo.vod_name}</span>
    </a>
</li>
{/maccms:vod}

分页导航：

<div class="page">
    {maccms:vod paging="true"}
    {if $__PAGING__}
        <a href="{$__PAGING__.page_url}" class="{if $__PAGING__.page_current}current{/if}">{$__PAGING__.page_current}</a>
    {/if}
    {/maccms:vod}
    <a href="{$__PAGING__.page_next_url}">下一页</a>
</div>

分类联动（下拉式切换）：

<select onchange="location=this.value">
{maccms:type order="asc" by="sort"}
<option value="{:mac_url_type($vo)}" {if $vo.type_id eq $type_id}selected{/if}>{$vo.type_name}</option>
{/maccms:type}
</select>

注意：mac_url_vod_detail($vo)这个函数会自动拼接当前播放页的url，无需手动构造参数。

移动端适配：从“能用”到“好用”

移动端流量占比通常超过70%，适配要点有三：

响应式断点卡住常用尺寸

@media (max-width: 640px) {
    .container { padding: 0 10px; }
    .grid-item { width: 48%; margin: 1%; }
}
@media (max-width: 420px) {
    .grid-item { width: 100%; margin: 5px 0; }
    .vod-title { font-size: 14px; }
}

触摸事件优化 苹果CMS自带touchstart事件监听，但需在模板中手动调用滚动加载，在scripts.html中放入：

$(document).on('touchmove', function(){
    if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        $.get(location.href, {page: nextPage}, function(html){
            $('#vod-list').append(html);
        });
    }
});

注意：苹果CMS后台需开启“无限加载”支持。

图片懒加载防抖动 给<img>固定宽高比：

img[data-original] {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    background: #f0f0f0;
}

苹果CMS的mac_url_img函数会自动处理缩略图路径，配合data-original属性实现懒加载。

页面美化实例：三个关键页面的改头换面

首页-影视墙布局

替换传统列表为瀑布流网格,每个条目显示评分和集数：

{maccms:vod num="24" level="1" order="desc" by="time"}
<div class="film-card" onclick="location.href='{:mac_url_vod_detail($vo)}'">
    <div class="film-poster">
        <img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name}" />
        <span class="score">{$vo.vod_score|default='暂无'}</span>
        <span class="episode">{$vo.vod_episode_show}</span>
    </div>
    <p class="film-name">{$vo.vod_name}</p>
</div>
{/maccms:vod}

列表页-分类过滤栏

在列表顶部增加类型、地区、年份的联动过滤：

<div class="filter-bar">
    <select name="type_id" onchange="location=this.value">
        <option value="">全部类型</option>
        {maccms:type parent="1" num="10"}
        <option value="{:mac_url_type($vo)}">{$vo.type_name}</option>
        {/maccms:type}
    </select>
    <select name="area" onchange="location.href='?area='+this.value">
        <option value="">全部地区</option>
        <option value="大陆" {if $param.area eq '大陆'}selected{/if}>大陆</option>
        <option value="港台" {if $param.area eq '港台'}selected{/if}>港台</option>
        <option value="欧美" {if $param.area eq '欧美'}selected{/if}>欧美</option>
    </select>
</div>

播放页-沉浸式播放器

隐藏所有非必要元素,将视频区域做全宽全屏适配：

<style>
.player-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; }
.player-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.play-info { display: news; margin-top: 15px; }
</style>
<div class="player-wrapper">
    {$player_src}
</div>
<div class="play-info">
    <h1>{$obj.vod_name}</h1>
    <p>类型：{$obj.vod_class} / 地区：{$obj.vod_area}</p>
    <p>{$obj.vod_content|mac_filter_html}</p>
</div>

注意：{$player_src}这个变量在show.html中直接输出即可，苹果CMS会自动解析播放器代码。

SEO优化标签配置：让搜索引擎看懂

标签的动态拼接** 每个页面都应生成独立的标题，在header.html中：

{maccms:if $type_id}
    {$type_name} - {$site_name}
{elseif $vod_name}
    {$vod_name} - 在线观看 - {$site_name}
{else}
    {$site_name} - {$site_description|default='最新影视大全'}
{/maccms:if}

关键词与描述

<meta name="keywords" content="{if $type_id}{$type_name},{/if}{$vod_name|default=$site_name}" />
<meta name="description" content="{if $vod_name}{$vod_name}剧情介绍：{$vod_content|strip_tags|mb_substr=0,100}{else}{$site_description}{/if}" />

面包屑导航 有利于搜索引擎理解页面层级：

<div class="breadcrumb">
    <a href="{$maccms.path}">首页</a> >
    <a href="{:mac_url_type($type)}">{$type.type_name}</a> >
    <span>{$vod.vod_name}</span>
</div>

文章ID的自动生成 在config.php中开启：

// 开启路径优化，使URL包含中文拼音
return [
    'rewrite' => [
        'vod' => 'detail/{$vo.vod_id}.html',
        'type' => 'list/{$vo.type_id}.html',
    ],
    'seo' => [
        'vod_title' => '{$vo.vod_name} - {$site_name}',
        'vod_keywords' => '{$vo.vod_name}高清在线观看',
    ]
];

最后提示：开发完成后务必在后台“清理缓存”，否则新模板不会生效，建议先以test文件夹独立测试，确认无误再覆盖正式主题，掌握了以上技术点，你就能在半天内搭建出一个具有良好用户体验和搜索引擎友好度的影视主题。