正文

苹果CMS综艺站模板全攻略，从文件骨架到播放页视觉重构

机房驻场手记
机房驻场手记 V管理员 /3阅读/3评论
0815
文章最后更新时间2026年08月15日，若文章内容或图片失效，请留言反馈！

模板文件结构——先把“房子”的框架搭对

苹果CMS（V10）的模板目录默认位于 /application/index/view/ 下，综艺站建议新建独立主题文件夹，zongyi_new，核心文件必须包含：

zongyi_new/
├── index.html          // 首页（综艺聚合大屏）
├── list.html           // 列表页（支持typeid分类）
├── detail.html         // 播放页（含选集与播放器）
├── search.html         // 搜索结果页
├── head.html           // 公共头部（导航+搜索框）
├── footer.html         // 公共底部（友情链接+版权）
├── pc/                 // PC端专用样式与JS
│   ├── css/
│   ├── js/
└── mobile/             // 移动端独立CSS（或使用响应式）

关键点：typeid 对应后台“分类管理”中的综艺板块ID，列表页可以通过 {$typeid} 动态获取当前分类，结合 {:get_type_name($typeid)} 显示分类标题。

苹果CMS综艺站模板全攻略，从文件骨架到播放页视觉重构

苹果CMS综艺站模板全攻略，从文件骨架到播放页视觉重构

常用标签调用——5分钟上手数据输出

  • 最新综艺：{:get_list('vod', 20, 'vod_time desc')}，返回数组可用 {$vo.vod_name}、{$vo.vod_pic}、{$vo.vod_score} 输出。
  • 热门排行：{:get_list('vod', 10, 'vod_hits desc', '', 'vod_id,vod_name,vod_pic')}，注意限制字段减少数据库压力。
  • 分类循环：在 list.html 中用 {:get_type_list()} 遍历栏目，每个分类链接用 {:url('home/vod/type',['id'=>$type['type_id']])}。
  • 播放来源：{$obj.vod_play_list} 是多维数组，需要先 {:array_chunk($obj.vod_play_list[0]['urls'], 30, true)} 分页切片，避免选集过长。

移动端适配——不靠插件，原生断点布局

在 <head> 中加入：

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

CSS 媒体查询策略：

  • 屏宽 ≤ 768px 时，隐藏PC端侧边栏，grid-template-columns 从“1fr 3fr 1fr”降为单列。
  • 播放页选集按钮使用 flex-wrap: wrap，每个按钮 min-width: 22%，保证7个按钮一行（约iPhone SE宽度）。
  • 强制图片自适应：.vod-pic img { width:100%; height:auto; aspect-ratio: 16/10; object-fit:cover; }，避免综艺横图拉伸变扁。

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

首页——综艺“瀑布流”卡片
删除传统表格布局，改用 display: flex + gap: 15px，每张卡片下方叠加渐变遮罩显示“已更新至第X期”：

<div class="card">
  <a href="{:url('home/vod/detail',['id'=>$vo.vod_id])}">
    <img src="{$vo.vod_pic}" alt="{$vo.vod_name}">
    <div class="overlay">
      <span class="ep">更新至 {$vo.vod_remarks}</span>
    </div>
  </a>
  <h3>{$vo.vod_name}</h3>
</div>

列表页——筛选与排序双行条
顶部第一行放“类型筛选”（如纪实/选秀/脱口秀），用 {:get_type_list($type_id, 2)} 输出子分类，第二行是排序按钮：最新、最热、评分，对应URL参数：

{:url('home/vod/type',['id'=>$typeid,'order'=>'hits'])}

后台需要提前在“分类扩展”里开启排序字段映射。

播放页——沉浸式播放体验
播放器容器设为 width:100%; max-width:1200px; margin:0 auto;，下一步选集按钮改为“横向滚动条”专为触屏设计：

.scroll-list { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll-list a { flex:0 0 64px; margin-right:6px; }

剧集列表下方增加“猜你喜欢”模块，调用 {:get_list('vod', 8, 'vod_rand()', '', 'vod_id,vod_name')}，注意 vod_rand() 在数据量大于5000时效率下降，建议提前用缓存。

SEO优化标签配置——把“免费流量”挖透

苹果CMS允许在后台“系统参数”→SEO设置 中定义动态规则，综艺站建议做三处强化： 规则**：
列表页改为 {分类名}_最新综艺大全_【站点名】，播放页改为 {视频名}_第X期在线观看_【站点名】，在模板中直接写 <title>{$vod_name}_{$type_name}_{$site_name}</title> 比后台规则更直观。

  1. Meta描述：
    首页描述加入“高清综艺免费在线观看”，播放页用 {:mb_substr($obj['vod_content'],0,120,'utf-8')} 截取内容简介。

  2. 面包屑导航：
    列表页增加 <link rel="canonical" href="{$url}">，并用 <ol class="breadcrumb"> 输出“首页 > 综艺 > 大陆综艺”，注意给每个分类项加 itemprop="url"。

  3. 图片懒加载：
    对所有 vod_pic 使用 data-src，配合原生 IntersectionObserver JS，减少初始HTTP请求，百度蜘蛛会优先抓取有 alt 属性的图片。

最后检查清单：清除模板缓存（runtime/ 目录）、后台“更新数据缓存”、手机端真机测试点击响应速度（若首页图片超30张，建议开启阿里云OSS存储），按此流程操作，一个全新综艺站模板从零到上线，4小时即可完成，遇到标签不生效时，优先检查标签参数是否用英文单引号包裹，模板后缀必须为 .html。