暗黑风格与视觉布局
StarFlix针对苹果CMS V10设计,整体采用纯黑色#0a0a0a作为页面底色,以红色#e50914用于按钮、标签和交互元素,形成明显的暗黑影视视觉风格。
页面以影片海报卡片为主要内容载体,并通过统一的排版方式组织不同影视板块。大屏设备采用宽屏展示,平板调整为4列海报网格,手机端则根据屏幕空间采用2至3列布局,同时将顶部导航折叠为侧边汉堡菜单。
影视浏览功能
首页轮播:提供全屏巨幅轮播横幅,可展示影片简介、评分及播放入口。
横向内容分区:通过卡片区域展示热门电影、热播剧集、高分佳作、新片上线等内容。
多条件筛选:支持影片类型、出产地区、上映年份、语言和首字母等条件筛选。
多线路播放:播放页面提供线路Tab切换,并使用系统播放源。
影片详情:详情页面使用虚化背景海报,并集中呈现评分、演员阵容、剧情简介和同类推荐。
图片加载:内置图片懒加载机制,图片按照页面需要进行加载。
移动端导航:手机端采用折叠式侧边菜单,适配触屏操作。
返回顶部:页面滚动后提供悬浮返回顶部按钮。
模板技术组成
HTML5:使用语义化标签组织页面结构,并包含Meta标签布局。
CSS3:结合Grid网格与Flex弹性布局,并通过CSS变量统一管理页面配色。
原生JavaScript:负责页面交互,不依赖jQuery。
苹果CMS V10模板引擎:使用苹果CMS原生模板机制,并兼容
{maccms}调用标签。
模板安装与配置
将完整模板文件夹上传至程序根目录的
template/目录。登录苹果CMS后台,进入「系统」→「网站参数配置」,在网站模板选项中选择模板文件夹名称,默认名称为
muban,然后保存。进入后台「视频」→「分类管理」,逐个编辑视频分类,并配置封面、筛选、详情、播放和搜索所对应的模板页面。
进入后台系统缓存管理,清空模板缓存和数据缓存,随后刷新网站前台。
使用时需要注意的设置
模板仅兼容苹果CMS V10,苹果CMS V7、V8无法正常渲染。修改模板调用标签时,系统{maccms}标签仅允许调整num数值来改变列表数量,其余参数不要修改。
首页导航使用分类ID进行匹配,导航中的ID需要与后台视频分类ID对应,否则可能出现分类无法正常展示的情况。
播放页面直接使用系统原生变量{$player_data}和{$player_js}进行播放器渲染,不需要额外修改播放器渲染代码。
苹果CMS模板网在整理模板文件时,建议部署完成后按照首页、分类、详情和播放页面逐项检查配置,尤其需要确认导航分类ID及后台页面模板设置是否对应。
资源截图:
1首页
2封面页
3列表页
4播放页
5手机端
