苹果CMS站长赚钱，从模板开发到流量变现的实战指南

模板文件结构深度解析

苹果CMS的模板系统基于PHP+HTML，核心目录位于/template/下，以一套标准模板为例，其文件结构应当如下：

苹果CMS站长赚钱，从模板开发到流量变现的实战指南

template/your_theme/
├── index.html          # 首页模板
├── list.html           # 列表页模板
├── video.html          # 播放页模板
├── search.html         # 搜索页模板
├── detail.html         # 详情页模板
├── css/
│   ├── style.css       # 主样式文件
│   ├── mobile.css      # 移动端适配样式
│   └── font/           # 字体文件目录
├── js/
│   ├── jquery.min.js   # 核心依赖
│   ├── app.js          # 自定义脚本
│   └── player.js       # 播放器配置
└── images/
    └── logo.png        # 站标默认路径

关键点：苹果CMS支持$GLOBALS['config']读取后台设置，模板变量通过{$变量名}输出，每个模板文件头部必须包含{include file="header"}这样的公共头部调用，尾部同理。

常用标签调用技巧

首页轮播标签

{maccms:vod num="8" type="all" order="desc" by="time"}
<div class="swiper-slide">
    <a href="{:mac_url_vod_detail($vo)}">
        <img src="{$vo.vod_pic|mac_url_img}" alt="{$vo.vod_name}">
        <span class="title">{$vo.vod_name}</span>
    </a>
</div>
{/maccms:vod}

分类列表动态调用

{maccms:type ids="1,2,3" order="asc" by="sort"}
<li class="nav-item {$vo.type_id|mac_get_class_by_id}">
    <a href="{:mac_url_type($vo)}">{$vo.type_name}</a>
</li>
{/maccms:type}

播放页数据渲染

<div class="player-info">
    <h1>{$obj.vod_name}</h1>
    <p class="score">评分：{$obj.vod_score}</p>
    <div class="playlist">
        {maccms:vod_play_list}
        <a href="{$vo.url}" class="play-btn">{$vo.name}</a>
        {/maccms:vod_play_list}
    </div>
</div>

注意事项：{:$vo.url}写法会自动进行URL编码，适合多参数跳转，自定义分页标签使用{$pagehtml}，需配合page=1参数。

移动端适配三板斧

响应式布局核心

在style.css中加入：

@media screen and (max-width: 768px) {
    .container { padding: 0 10px; }
    .nav-list { flex-direction: column; }
    .vod-item { width: 48%; margin: 1%; }
}

触控手势优化

使用hammer.js实现滑动切换：

$('.player-wrapper').on('swipeleft', function() {
    window.location.href = $('.next-episode').attr('href');
});

图片懒加载

苹果CMS原生支持lazyload

<img data-original="{$vo.vod_pic|mac_url_img}" class="lazy" src="placeholder.jpg">

<div class="ad-carousel">
    {maccms:adv id="1"}
    <a href="{$vo.url}" target="_blank"><img src="{$vo.pic}" width="100%"></a>
    {/maccms:adv}
</div>

<select class="filter-select" onchange="location.href=this.value">
    {maccms:type ids="1,2,3,4" order="asc"}
    <option value="{:mac_url_type($vo)}" {if $vo.type_id == $current_type}selected{/if}>{$vo.type_name}</option>
    {/maccms:type}
</select>

<div class="player-tabs">
    {maccms:vod_play}
    <button class="tab-btn {if $key==0}active{/if}" data-player="{$vo.player}">{$vo.player_name}</button>
    {/maccms:vod_play}
</div>
<script>
$('.tab-btn').click(function(){
    var player = $(this).data('player');
    $('.player-container').html('<iframe src="'+player+url+'"></iframe>');
});
</script>

<meta name="robots" content="{$site_seo_robots}">

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Movie",
    "name": "{$obj.vod_name}",
    "datePublished": "{$obj.vod_year}"
}
</script>

<link rel="canonical" href="{:mac_url_type($type_info)}">