player-box

作为苹果CMS的长期使用者,你可能已经发现：一个优秀的站点，不仅依赖稳定的后台程序，更在于模板的精细运营，很多站长在初期搭建时，往往陷入“套用模板—修改LOGO—上线”的循环，却忽略了模板文件结构对性能、标签调用对效率、移动端适配对用户留存的关键影响，我们从一位模板开发者的视角出发，拆解苹果CMS模板的底层逻辑，带你完成一次从“能用”到“好用”的升级。

模板文件结构：别让目录成为“黑箱”

苹果CMS的模板默认位于/template目录下，每个模板通常包含以下核心文件：

player-box

template/your_theme/
├── index.html        # 首页
├── list.html         # 列表页（分类/搜索）
├── detail.html       # 播放页
├── search.html       # 搜索结果页
├── player.html       # 播放器内嵌页（可选自定义）
├── public/           # 公共模块目录
│   ├── head.html     # 头部导航
│   └── foot.html     # 底部版权/统计
├── css/              # 样式文件
├── js/               # JavaScript
└── images/           # 静态资源

关键点：

public/中的head.html和foot.html通过{include file="public/head"}方式被所有页面引用，修改一次即可全局生效。
如果你需要自定义播放器皮肤,可新建player.html覆盖默认的vodplay标签渲染逻辑。
list.html同时负责“分类列表”和“搜索结果”，需在代码中通过{$param.wd}判断是否为搜索模式。

常用标签调用方法：效率提升80%

苹果CMS的标签系统基于Smarty,以下为高频调用场景：

数据调用核心标签

<!-- 调用最新10条视频 -->
{maccms:vod num="10" order="desc" by="time"}
<li><a href="{:mac_url_vod_detail($vo)}">{$vo.vod_name}</a></li>
{/maccms:vod}
<!-- 调用热门分类（如电影）的前5条 -->
{maccms:vod num="5" type="1" order="desc" by="hits"}
<div class="item">{$vo.vod_name} - 播放: {$vo.vod_hits}</div>
{/maccms:vod}
<!-- 当前分类的上级导航 -->
{maccms:type ids="parent" order="asc" by="sort"}
<a href="{:mac_url_type($vo)}">{$vo.type_name}</a>
{/maccms:type}

数据格式化注意点

$vo.vod_name：直接输出视频名，如需截断则用{$vo.vod_name|mac_substring=20}。
$vo.vod_pic：图片地址，建议配合{$vo.vod_pic|mac_url_img}生成带CDN前缀的URL。
自定义字段：如{$vo.vod_actor}用于演员表，若该字段为空可用{empty name="$vo.vod_actor"}暂无{/empty}兜底。

移动端适配技巧：别让用户用手势缩放

苹果CMS模板的移动端适配,90%的问题源于未正确配置viewport和响应式布局。

强制开启移动端模式

在head.html中加入：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

user-scalable=no禁止缩放，避免播放页被误缩放。
若需要横向布局的列表页,可添加min-width: 320px到容器。

列表页卡片式改造

PC端常用表格或平铺,移动端建议改为垂直流式，在list.html中修改：

@media (max-width: 640px) {
    .vod-list-item {
        display: flex; 
        padding: 10px; 
        border-bottom: 1px solid #eee;
    }
    .vod-list-item img { 
        width: 80px; 
        height: 120px; 
        margin-right: 10px; 
    }
}

标签联动：用{maccms:vod}循环时，每个$vo对应一个.vod-list-item，支持触控点击。
播放按钮：移动端在图片上浮层添加<a href="{:mac_url_vod_play($vo)}">▶</a>即可。

播放页防误触

播放页detail.html中，将播放器区域与评论/推荐列表隔离：

    width: 100%; 
    max-width: 100vw; 
    aspect-ratio: 16/9; 
    overflow: hidden;
}

利用aspect-ratio固定比例，避免不同分辨率下播放器变形。

首页/列表页/播放页美化实例

首页：从“堆积”到“分层”

痛点：许多站长把首页做成滚动长条，用户找不到重点。
改法：采用“轮播+卡片网格”结构。

<!-- 轮播区：调用5条推荐视频 -->
<div class="swiper" id="topSwiper">
{maccms:vod num="5" order="desc" by="time"}
<div class="swiper-slide">
    <img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name}">
    <div class="caption">{$vo.vod_name}</div>
</div>
{/maccms:vod}
</div>
<!-- 最新更新区：24小时内更新的视频列表 -->
<h3>最近更新</h3>
<ul class="grid-list">
{maccms:vod num="12" order="desc" by="time" day="1"}
<li><a href="{:mac_url_vod_detail($vo)}">{$vo.vod_name}</a></li>
{/maccms:vod}
</ul>

使用day="1"只抓取当天更新的内容，提升时效感。
轮播插件推荐swiper.min.js，体积小且兼容苹果CMS。

列表页：分类筛选+排序

实战：在list.html顶部添加排序按钮。

<div class="sort-bar">
    <a href="?order=time" class="{if $param.order eq 'time'}active{/if}">最新</a>
    <a href="?order=hits" class="{if $param.order eq 'hits'}active{/if}">最热</a>
    <a href="?order=score" class="{if $param.order eq 'score'}active{/if}">评分</a>
</div>

苹果CMS内置$param.order接收此参数，list.html中的{maccms:vod}无需修改，自动按传入参数排序。

播放页：内容聚合+续看按钮

价值点：提供“上一集/下一集”和“我的收藏”入口。

<!-- 使用$obj获取当前视频信息 -->
<div class="episode-list">
{maccms:vod num="999" ids="$obj.vod_id" order="desc" by="sort"}
<a href="{:mac_url_vod_play($vo)}" class="{if $vo.cur egt $obj.vod_continu}watched{/if}">
    第{$vo.vod_continu}集
</a>
{/maccms:vod}
</div>

$obj.vod_continu是苹果CMS内置的续读字段，自动记录用户上次播放位置。
添加<a href="#">收藏本片</a>，绑定JavaScript接口/api/collect?type=vod&id={$obj.vod_id}。

SEO优化标签配置：看不见的流量入口

苹果CMS原生支持SEO,但大量站长只改了标题，忽略了以下三点：

title规则细化

在后台“系统-网站参数配置”中，将标题规则改为：

# 分类页：分类名_网站名
{category name}-{网站名称}
# 播放页：视频名_第{n}集_网站名
{vod_name}_{vod_continu}_{网站名称}

避免所有页面都带上“最新热播”等无关词，提升关键词密度。
播放页加入{vod_continu}防止集数重复被搜索引擎判定为相似页面。

keywords和description动态输出

在head.html中加入：

<meta name="keywords" content="{if $param.wd}{$param.wd},{/if}{$MAC_KEYWORDS}">
<meta name="description" content="{$MAC_DESCRIPTION|mac_default='最新电影电视剧'}">

$MAC_KEYWORDS和$MAC_DESCRIPTION由苹果CMS根据当前页面自动填充（如分类页为类型关键词）。

注意：如果调用{maccms:vod}的数据，需手动设置：

<meta name="description" content="{$vo.vod_name}剧情介绍：{$vo.vod_blurb|mac_substring=80}">

伪静态与URL优化

在后台“URL优化”中：

开启“伪静态”，避免?ac=list&id=1这类参数。
对于分类列表,设置/list-{type_id}.html格式，搜索引擎更友好。
不要开启“所有页面全伪静态”——播放页的/play-{vod_id}.html和/detail-{vod_id}.html会互相冲突，建议只保留/detail-。

避坑与进阶：一个运营老手的忠告

本地调试：修改模板前，先将config/app.php中的'debug' => false改为true，打开错误提示。
缓存清理：模板改动后，在后台“数据管理-缓存更新”中清理模板缓存。
标签调试：如果你不确定标签是否生效，在模板中临时插入{dump($vo)}，刷新页面即可看到该标签的完整数据结构。

苹果CMS模板的开发,本质是一场“对用户搜索习惯”的模拟，理解文件结构是骨架，标签调用是神经，移动端适配和SEO是皮肤与肌肉，当你把首页的轮播图卡在3屏内，把播放页的相邻集按钮放在拇指最容易触摸的区域，把每个页面的title写成人人会搜的关键词组合时，你的站点就已经超过了80%的同行，别忘了每周检查一次后台的“数据报表”，根据用户行为反向调整模板——这才是运营的闭环。

打开你的苹果CMS后台,从修改public/head.html里的viewport开始吧。

正文

player-box

模板文件结构：别让目录成为“黑箱”

常用标签调用方法：效率提升80%

数据调用核心标签

数据格式化注意点

移动端适配技巧：别让用户用手势缩放

强制开启移动端模式

列表页卡片式改造

播放页防误触

首页/列表页/播放页美化实例

首页：从“堆积”到“分层”

列表页：分类筛选+排序

播放页：内容聚合+续看按钮

SEO优化标签配置：看不见的流量入口

title规则细化

keywords和description动态输出

伪静态与URL优化

避坑与进阶：一个运营老手的忠告

相关阅读

发表评论取消回复

目录[+]