苹果CMS影视导航站模板开发实战，从结构到美化的完整指南

模板文件结构深度解析

苹果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}

移动端适配技巧

1. 视口设置：在head.html中必须加入：

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

2. 响应式图片：使用srcset属性适配不同屏幕：

   <img src="[vod:pic]" srcset="[vod:pic]?w=300 300w, [vod:pic]?w=600 600w" sizes="(max-width:600px) 50vw, 100vw">

3. 触摸事件优化：在common.js中添加：

   document.addEventListener('touchstart', function(e) {
    // 禁止双指缩放
    if (e.touches.length > 1) e.preventDefault();
   }, {passive: false});

4. 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动画形成视觉引导。