正文

苹果CMS站长管理进阶，从模板结构到全端适配的实战手册

机房驻场手记
机房驻场手记 V管理员 /347阅读/3评论
0630
此篇文章发布距今已超过122天，您需要注意文章的内容或图片是否可用！

模板文件结构：别被V10的目录吓到

苹果CMS V10的模板目录默认位于/template/,每个主题文件夹下藏着三个核心子目录：

苹果CMS站长管理进阶，从模板结构到全端适配的实战手册

苹果CMS站长管理进阶，从模板结构到全端适配的实战手册

/template/你的主题名/
├── public/          # 公共资源（CSS/JS/图片）
├── html/            # 页面模板（核心）
│   ├── index.html   # 首页
│   ├── list.html    # 列表页（分类页）
│   ├── vid.html     # 播放页
│   ├── search.html  # 搜索页
│   └── art.html     # 文章页
├── label/           # 标签库（自定义标签函数）
└── runtime/         # 编译缓存（可清空）

重点： 所有前端文件修改后，必须进入后台“清理缓存”，否则apache或nginx会死读旧文件，别问我怎么知道的，当年改CSS改到凌晨三点,结果发现缓存没清。

常用标签调用：别再用死循环了

苹果CMS的标签系统基于Smarty，核心是数据读取与循环控制，以下三个标签覆盖80%场景：

列表循环输出

{maccms:foreach name="obj.vod_list" id="vo"}
<li>
  <a href="{:mac_url_vod_detail($vo)}">{$vo.vod_name}</a>
  <span>{$vo.vod_time|mac_day}</span>
</li>
{/maccms:foreach}
  • mac_url_vod_detail() 自动生成播放页链接
  • mac_day 过滤器将时间戳转成人话（如“3小时前”）

随机推荐

{maccms:vod num="6" order="desc" by="time" level="3"}
<a href="{:mac_url_vod_detail($vo)}">{$vo.vod_name}</a>
{/maccms:vod}
  • level="3" 表示仅显示推荐等级≥3的内容
  • 推荐用于首页“猜你喜欢”模块，混淆随机数防止用户审美疲劳

分页控制

{include file="public/paging"}

这个文件路径必须为/public/paging.html，内部写法复杂但通用，如果你要自定义分页样式，直接复制官方模板里的paging.html修改即可，别手写分页逻辑——苹果CMS的分页参数（比如page和limit）默认绑定在URL中,自己写容易404。

移动端适配：别让用户双指缩放

苹果CMS官方模板的移动端兼容性差,主要原因有三：

  • 字体过小（移动端字号至少16px）
  • 按钮间距不足
  • 未启用视口控制

解决方案：

  1. 在public/header.html的<head>中加入：

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

    user-scalable=no禁止双指缩放,避免用户误操作。

  2. 所有容器宽度改用百分比或vw单位，

    .vod-item { width: 48%; margin: 1%; }
@media (max-width: 768px) { 
.vod-item { width: 100%; margin: 0; } 
}

    这样在小屏下手机会自动切换为单列瀑布流。

  3. 针对触摸操作优化：

    a:hover { opacity:0.8; }   /* 移动端无hover，用opacity替代 */
button { min-height: 44px; } /* 苹果人机交互指南要求 */

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

首页：卡片式布局 vs 图文混排

推荐用卡片式布局，结构清晰，在index.html中写入：

<div class="vod-card">
  <img src="{$vo.vod_pic|mac_default='http://图片占位.jpg'}" alt="{$vo.vod_name}">
  <h3><a href="{:mac_url_vod_detail($vo)}">{$vo.vod_name}</a></h3>
  <p>主演：{$vo.vod_actor|mac_substr=0,30}</p>
  <span class="view-count">{$vo.vod_hits} 次播放</span>
</div>
  • mac_default过滤器：当没有海报时显示占位图
  • 排行榜数据调用：{maccms:vod num="10" order="desc" by="hits" id="rank"}

列表页：分页与排序的平衡

列表页（list.html）最难的是分类筛选,推荐在页面顶部加过滤条：

<div class="filter-bar">
  <a href="{mac_url_type=['id'=>$obj.childids,'by'=>'time']}">最新</a>
  <a href="{mac_url_type=['id'=>$obj.childids,'by'=>'hits']}">最热</a>
  <a href="{mac_url_type=['id'=>$obj.childids,'by'=>'score']}">评分</a>
</div>

mac_url_type函数自动生成带参数的分类链接，无需手动拼接URL，务必用$obj.childids而非$obj.type_id,因为列表页可能包含子分类。

播放页：视频源切换与弹幕开关

播放页（vid.html）是所有流量入口，苹果CMS默认的播放器是Dplayer，但默认主题太丑,可以用以下代码替换播放器容器：

<div id="dplayer" data-url="{$obj.vod_play_url}" data-type="auto"></div>
<script>
// 自动检测视频源格式（MP4/FLV/HLS）
var dp = new DPlayer({
  container: document.getElementById('dplayer'),
  video: { url: '{$obj.vod_play_url}', type: 'auto' },
  danmaku: { 
    id: '{$obj.vod_id}', 
    api: '{:mac_url("api/danmu")}' 
  }
});
</script>
  • data-url标签值直接放入变量，避免Smarty解析时与JS冲突
  • 弹幕API地址必须用mac_url函数生成，否则跨域问题会让你抓狂

SEO优化标签配置：让蜘蛛爱上你的站

苹果CMS后台有SEO设置，但多数站长只改标题和关键词,真正有效的是模板级控制：

动态化

在public/header.html中,不要写死标题：

<meta name="description" content="{$seo_description|default=$site_description}">
<meta name="keywords" content="{$seo_keywords|default=$site_keywords}">

然后去后台“系统-网站参数配置”中，为每个分类单独设置SEO描述，这样蜘蛛爬取不同分类时，会看到不同标题,避免重复内容惩罚。

列表页分页标题加页码

在list.html的<title>中：

注意：首页（$param.page为空时）不要显示页码，否则出现“第1页 - 第1页”的奇葩标题。

播放页结构化数据

在播放页底部加入JSON-LD：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Movie",
  "name": "{$obj.vod_name}",
  "image": "{$obj.vod_pic}",
  "description": "{$obj.vod_blurb}",
  "datePublished": "{$obj.vod_time|mac_date='Y-m-d'}"
}
</script>

这个代码能让百度搜索结果直接展示电影海报和评分,点击率翻倍。

友情链接+站内锚文本

在public/footer.html中：

{site:link name=""}
- **注意**：友情链接要在后台“友情链接”模块添加，且最好用`rel="nofollow"`输出，避免给站外链接传递权重
- **站内锚文本**：在描述中嵌入随机关键词链接，可以写一个自定义标签，但更简单的是用模板循环控制：
```html
{maccms:vod num="3" order="desc" by="hits"}
<p>{$vo.vod_name}在线观看：<a href="{:mac_url_vod_detail($vo)}">点击这里</a></p>
{/maccms:vod}

这种做法有些粗暴,但新手最容易上手。

写在最后

苹果CMS的核心是“小而美”——别追求花哨的CSS动画，别塞入冗余的JS库，一个100KB的模板加载3秒，和一个30KB的模板瞬间渲染，用户的选择永远是后者，所有优化完成后，记得去后台“系统-数据采集”跑一次全站抓取,确保每个新页面都能正常生成。