别让目录结构成为你的绊脚石
很多开发者在接手苹果CMS模板时,第一反应是直接修改CSS和HTML，却忽略了文件结构的逻辑关系，一个规范的模板目录通常包含以下核心文件夹：
从零搭建电影站，苹果CMS模板开发的五个核心实战技巧
template/你的模板名/：存放所有模板文件static/你的模板名/：静态资源（CSS、JS、图片）admin/：后台管理界面（非必要不修改）
template目录下的index、list、detail三个文件夹分别对应首页、列表页和播放页的HTML结构，这里有一个容易被忽视的细节：每个页面文件夹内必须包含head.html和foot.html两个公共模块文件，它们通过{include file="模块路径"}标签被引入，实现头部导航和底部版权信息的统一管理。
实战中,建议将导航栏的CSS单独抽离为nav.css，放在static目录下，避免在header.html中写死样式，这样当需要切换皮肤时，只需替换CSS文件，无需改动HTML结构。
常用标签调用：从“写死”到“动态”的关键一步
苹果CMS的标签系统分为全局标签和模块标签,以下是三个必会的基础调用：
获取分类列表：
{maccms:type ids="1,2,3" order="asc" by="sort"}
<a href="{$vo.type_link}">{$vo.type_name}</a>
{/maccms:type}
注意：ids参数支持逗号分隔的多个分类ID，若需显示所有分类，可省略该参数。order="asc"按排序值升序，by="sort"按后台设置的手动排序。
调用最新视频：
{maccms:vod num="12" order="desc" by="time"}
<div class="movie-item">
<img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name}">
<h3>{$vo.vod_name}</h3>
<span>评分：{$vo.vod_score}</span>
</div>
{/maccms:vod}
这里的关键是|mac_url_img过滤器，它能自动处理图片路径的完整性，避免因相对路径导致图片加载失败。
分页标签配合：
在列表页中，必须要将分页代码放在{maccms:vod}循环之外：
<div class="page">{$__PAGING__}</div>
控制器会自动生成上一页、下一页的链接，无需手动拼接URL，如果需要自定义分页样式，可以通过CSS隐藏原生“下一页”按钮，用图片替换。
移动端适配：别让用户在你的站上“放大缩小”
很多模板在PC端完美,手机端却出现横向滚动条或元素错位，这里分享三个关键修复方案：
视口标签必加：
在head.html的<head>标签内，必须包含：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
user-scalable=no防止用户在播放页面误触缩放，影响播放体验。
图片懒加载与响应式： 苹果CMS自带的图片标签支持懒加载，但需要配合CSS：
img.lazy { background: url(loading.gif) no-repeat center; }
在{maccms:vod}循环中，将<img>的src替换为data-original，再引入懒加载JS，用max-width:100%限制图片最大宽度，防止溢出。
列表页卡片布局： 移动端建议使用两列网格布局，通过CSS媒体查询实现：
@media (max-width: 768px) {
.movie-list .item { width: 50%; }
.movie-list .item:nth-child(2n+1) { clear: both; }
}
注意清除浮动,否则第三项会错位，如果使用Flex布局，则无需担心此问题。
页面美化实例：从“毛坯房”到“精装房”
首页：打造视觉焦点 在首页顶部增加一个轮播区域，调用后台推荐视频：
{maccms:vod num="5" order="desc" by="time" level="1"}
<div class="swiper-slide">
<a href="{$vo.vod_url}">
<img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name}">
<div class="slide-title">{$vo.vod_name}</div>
</a>
</div>
{/maccms:vod}
这里level="1"表示只显示推荐视频，配合Swiper.js实现自动轮播，注意设置loop:true让轮播无缝循环。
列表页：增加筛选交互 在分类页顶部添加排序筛选项：
<div class="filter">
<a href="{mac_url type='list' id=$maccms.type_id order='time'}">最新</a>
<a href="{mac_url type='list' id=$maccms.type_id order='hits'}">最热</a>
<a href="{mac_url type='list' id=$maccms.type_id order='score'}">评分</a>
</div>
通过order参数动态改变列表排序，无需刷新页面，注意{mac_url}会自动生成带排序参数的URL。
播放页：沉浸式体验优化 播放页的核心是让用户快速找到目标剧集：
<div class="episode-list">
{maccms:vod num="30" p="1" order="asc" by="sort"}
<a href="{$vo.vod_url}?ep={$vo.vod_ep}" class="{if condition="$vo.vod_ep eq $param.ep"}active{/if}">
第{$vo.vod_ep}集
</a>
{/maccms:vod}
</div>
用condition判断当前集数，高亮显示，如果剧集超过30集，建议增加“展开全部”按钮，通过JS控制显示。
SEO优化标签配置：让搜索引擎爱上你的站
苹果CMS的SEO配置集中在后台“系统-网站参数”中，但模板层面的优化同样关键：
标签动态化：**
在首页index.html的<title>标签内使用：
列表页和详情页分别使用：
注意详情页不要直接堆砌关键词,用演员名增加相关性。
面包屑导航结构化： 在每个页面头部添加：
<div class="breadcrumb">
<a href="/">首页</a> >
<a href="{mac_url type='list' id=$maccms.type_id}">{$maccms.type_name}</a> >
<span>{$obj.vod_name}</span>
</div>
配合itemscope和itemtype微数据，在移动端搜索结果的富摘要中显示路径。
图片ALT属性必填：
在{maccms:vod}循环中，务必给图片添加ALT描述：
<img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name} - {$vo.vod_actor}">
这不仅能提升搜索引擎对图片的抓取,还能在图片加载失败时提示用户内容。
伪静态与URL优化： 确保在后台开启“URL伪静态”，并选择“数字模式”或“字母模式”，不要使用默认的“动态模式”，否则URL中的问号和参数会导致搜索引擎放弃收录。
