模板文件结构深度解析
苹果CMS的模板系统采用MVC分离架构,核心模板文件存放在/template/目录下，一个标准的影视导航站模板通常包含以下关键文件：
template/
├── index.html // 首页模板
├── list-article.html // 文章列表页
├── list-video.html // 视频列表页
├── detail.html // 播放页
├── search.html // 搜索页
├── channel_article.html // 文章频道页
├── channel_video.html // 视频频道页
├── public/
│ ├── head.html // 公共头部
│ ├── foot.html // 公共底部
│ └── nav.html // 导航栏
├── css/
│ ├── style.css
│ └── mobile.css
└── js/
├── common.js
└── player.js重要提示：在苹果CMS v10+版本中，模板标签统一使用{maccms:xxx}格式，且支持PHP原生代码的嵌套，建议在开发前先清空runtime目录下的缓存文件，避免模板调试不生效。
苹果CMS影视导航站模板开发实战，从结构到美化的完整指南
常用标签调用方法详解
数据列表调用
<!-- 调用最新20条视频 -->
{maccms:vod num="20" type="all" order="desc" by="time"}
<div><a href="[vod:link]">[vod:name]</a></div>
{/maccms:vod}
<!-- 调用分类ID为1的子分类 -->
{maccms:type ids="1" flag="child"}
[type:name]
{/maccms:type}
分页与导航
<!-- 列表分页 -->
<div class="page">[maccms:page]</div>
<!-- 面包屑导航 -->
{maccms:foreach name="obj.arr_parent"}
<a href="[type:link]">[type:name]</a> >
{/maccms:foreach}
自定义字段调用
在detail.html中播放页常用的标签：
<h1>[vod:name]</h1>
<span class="score">[vod:score]</span>
<div class="intro">[vod:content]</div>
<!-- 播放列表 -->
{maccms:vod id="[vod:id]" num="1"}
[vod:player_list]
{/maccms:vod}
移动端适配技巧
-
视口设置：在
head.html中必须加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
响应式图片：使用
srcset属性适配不同屏幕：<img src="[vod:pic]" srcset="[vod:pic]?w=300 300w, [vod:pic]?w=600 600w" sizes="(max-width:600px) 50vw, 100vw">
-
触摸事件优化：在
common.js中添加：document.addEventListener('touchstart', function(e) { // 禁止双指缩放 if (e.touches.length > 1) e.preventDefault(); }, {passive: false}); -
CSS断点设置：
/* 手机端 */ @media (max-width: 480px) { .list-item { width: 48%; } .player-container { min-height: 200px; } } /* 平板端 */ @media (min-width: 481px) and (max-width: 1024px) { .list-item { width: 31%; } }
首页/列表页/播放页美化实例
首页（index.html）焦点图设计
<div class="focus-banner">
{maccms:vod num="5" type="all" order="desc" by="hits"}
<div class="slide-item" style="background:url([vod:pic]) center/cover;">
<h2>[vod:name]</h2>
<p>[vod:remarks]</p>
<a href="[vod:link]" class="play-btn">立即播放</a>
</div>
{/maccms:vod}
</div>
添加CSS动画效果：
.slide-item {
opacity: 0;
transition: opacity 0.5s;
}
.slide-item.active {
opacity: 1;
}
列表页（list-video.html）网格布局优化
<div class="video-grid">
{maccms:vod num="24" paging="yes" order="desc" by="time"}
<div class="grid-item" onclick="location='[vod:link]'">
<div class="poster">
<img src="[vod:pic]" alt="[vod:name]" loading="lazy">
<span class="score">[vod:score]</span>
<span class="hd">[vod:remarks]</span>
</div>
<h3>[vod:name]</h3>
<p>[vod:actor]</p>
</div>
{/maccms:vod}
</div>
播放页（detail.html）沉浸式体验改造
<div class="player-wrapper">
<div class="player-container" id="playerBox">
{maccms:vod id="[vod:id]" num="1"}
<script>MAC.Player({type:'[vod:player_from]',id:'[vod:player_id]'});</script>
{/maccms:vod}
</div>
<div class="episode-list">
<ul>
{maccms:vod id="[vod:id]" num="12" order="asc" by="sort"}
<li class="[vod:current]"><a href="[vod:link]">[vod:name]</a></li>
{/maccms:vod}
</ul>
</div>
</div>
SEO优化标签配置
在head.html中动态生成标题与描述：
<meta name="keywords" content="{if condition="$vo.type_keywords"}{$vo.type_keywords}{else/}{$vo.title},在线观看,高清影视{/if}">
<meta name="description" content="{if condition="$vo.vod_content"}{$vo.vod_content|msubstr=0,120}{else/}最新影视资源免费观看{/if}">URL伪静态规则建议：
RewriteRule ^vod-(\d+)\.html$ index.php/vod/detail/id/$1.html RewriteRule ^type-(\d+)\.html$ index.php/vod/type/id/$1.html
结构化数据注入（Schema.org）：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Movie",
"name": "[vod:name]",
"datePublished": "[vod:time]",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "[vod:score]",
"bestRating": "10"
}
}
</script>
实战建议：完成基础模板后，使用Chrome开发者工具的手机模拟模式测试所有页面，重点检查播放器在全屏模式下的表现，在admin后台的“系统-网站参数”中开启“Gzip压缩”和“静态页面缓存”，能显著提升移动端加载速度，对于影视导航站，建议在首页增加“最新更新”模块的红色角标，使用[vod:state]标签来显示更新状态，配合CSS动画形成视觉引导。
发表评论