简约线条视觉
模板围绕苹果CMS V10设计,以1px边框和分割线作为主要视觉元素,页面整体保持简洁的排版方式。顶部区域整合LOGO、搜索框以及一级、二级分类导航,分类内容集中展示,便于从统一导航进入不同栏目。
全局样式使用CSS变量管理,修改主题配色时可以集中调整相关变量。模板同时减少评分、评论、收藏和排行榜等非核心模块,将页面重点放在影视与文章内容展示上。
影视与资讯功能
首页推荐:提供Banner轮播区域,并结合分类内容进行展示。
视频列表:支持多列自适应布局,PC端可根据屏幕宽度采用6列或5列,移动端调整为3列或2列。
文章列表:根据设备尺寸采用4列、3列或2列展示方式。
视频详情:展示影片海报和基础信息,并提供多标签播放地址切换。
视频播放:采用16:9播放器布局,可切换不同播放线路。
文章内容:提供标准正文排版,并在页面底部展示相关文章。
多条件筛选:可按照类型、地区、年份、语言和首字母组合筛选内容。
排序方式:支持按照发布时间和播放人气进行排序。
双搜索:视频搜索和文章搜索分别提供对应的结果页面。
通用功能:包含分页、面包屑、友情链接和返回顶部等页面组件。
响应式页面适配
模板通过CSS Grid、Flexbox和媒体查询完成不同屏幕尺寸下的布局调整,适配范围为320px至1280px。视频和文章列表会随着可用宽度变化自动调整列数,使桌面端与移动端采用不同的内容密度。
模板文件结构
公共页面集中在html/public/目录,主要文件包括:
html/public/head.html:通用头部,包含LOGO、搜索框和导航栏。html/public/foot.html:通用尾部,包含版权信息和RSS链接。html/public/paging.html:统一分页组件。html/public/seo.html:标题、关键词和描述配置。html/public/include.html:统一引入CSS、JS等公共资源。
首页文件为html/index/index.html。视频页面位于html/vod/,包含详情、播放、搜索、分类和筛选页面;文章页面位于html/art/,对应提供详情、搜索、分类和筛选页面。
模板安装
FTP上传
将完整的
muban模板文件夹上传到苹果CMS程序的template目录,参考路径为/www/wwwroot/你的域名/template/muban/。登录网站后台,进入系统 → 网站参数设置 → 基本设置。
在当前模板选项中选择
muban并保存。
后台上传压缩包
将
muban模板文件夹打包成zip或tar.gz格式。进入系统 → 模板管理 → 上传模板。
上传后点击安装,再进入基本设置切换为对应模板。
修改模板时的配置项
模板仅支持苹果CMS V10。需要更换LOGO时,可以直接替换images目录中的对应图片文件。
顶部导航分类通过head.html中的调用进行配置:
{maccms:type ids="1,2,3,4,5"}根据站点实际分类ID调整上述位置即可。首页分类调用则在index.html中修改对应配置:
{maccms:type ids="1,2,3,4"}修改时应按照自身站点的分类ID进行替换,其他模板页面结构可根据对应文件进行维护。
资源截图:
1首页
2视频封面列表页
3视频详情页
4视频播放页
5新闻封面列表页
6新闻内容页
7手机端
