模板截图:
1首页
2封面页
3列表页
4播放页
影视站长圈分享一款轻量化纯白极简模板iKanBot,专为苹果cms V10打造,采用原生前端技术开发,无多余弹窗、会员广告模块,专注影视内容展示,适合追求干净清爽浏览体验的影视站点。
模板基础介绍
iKanBot整套模板基于HTML5、CSS3与原生JS开发,设计参考主流影视资讯站风格,页面干净无冗余组件,去掉弹窗广告、付费会员等多余功能,只保留影片浏览、搜索、播放核心能力,页面加载速度快,访客观看体验舒适。
模板核心特点
极简纯白视觉体系:页面底色#ffffff,主色调浅蓝#4078c0,正文深灰#333,配色克制柔和,长时间浏览不易视觉疲劳。
HTML5语义化结构全站统一header、main、section、aside、article、footer语义标签,代码层级规范,天然适配搜索引擎收录规则。
经典左右分栏布局左侧影片主内容区,右侧侧边栏放置榜单、推荐内容,信息层级清晰,阅读逻辑顺畅。
CSS Grid自适应海报网格PC端6列影片卡片布局,鼠标悬浮自带轻微上浮动效,简约精致。
三端完整响应式电脑、平板、手机自动适配,移动端自动减少海报列数,顶部导航折叠为汉堡菜单,适配手机触摸操作。
纯原生无第三方依赖不引入任何UI框架,全局配色通过CSS变量统一管理,修改主题色只需改动一处变量;JS使用原生ES6+编写,代码轻量化无冗余。
兼容系统原生标签全部{maccms}调用标签保留原版语法,仅调整num数值适配不同屏幕布局,无需重写数据调取代码。
模板内置完整功能
1、全站通用导航栏,支持二级下拉子分类,快速切换影片栏目;
2、简洁全域搜索框,仅针对视频模型检索,页面干净无多余筛选按钮;
3、首页分双模块展示热门电影、连续剧,分区清晰;
4、视频分类页面附带子分类导航,快速切换细分题材;
5、视频详情页整合海报、影片资料、TAB多播放线路切换;
6、播放页面采用标准16:9播放器,支持线路切换,侧边附带影片简介卡片;
7、搜索结果页面网格展示影片,搭配多维度筛选条件;
8、侧边栏内置一周口碑排行榜,引导用户浏览热门内容;
9、底部预留友情链接展示区域;
10、图片采用IntersectionObserver原生懒加载,大幅优化页面加载速度;
11、标准化分页组件,包含首页、上一页、数字页码、下一页、尾页;
12、滚动返回顶部悬浮按钮、页面RSS订阅入口。
模板开发技术栈
| 技术名称 | 详细说明 |
| HTML5 | 语义化标签,文件统一UTF-8无BOM编码,杜绝中文乱码 |
| CSS3 | Grid+Flex双布局,CSS变量全局配色,媒体查询实现响应式适配 |
| JavaScript | 原生ES6语法开发,完全不依赖jQuery,脚本体积更小 |
| 苹果cms V10 | 完美兼容系统原生{maccms}模板标签,无需二次改造调取逻辑 |
| SEO优化 | 内置OG协议、标准化meta标签、规范标题层级,提升收录效果 |
模板文件模块明细
公共通用模块
| 文件路径 | 功能说明 |
| /html/public/head.html | 全站公共头部,导航、搜索、顶部菜单统一存放 |
| /html/public/foot.html | 全站公共底部,版权、友情链接、RSS入口 |
| /html/public/paging.html | 全站统一分页组件,所有页面共用 |
| /html/public/include.html | 统一引入CSS、JS静态资源,集中管理 |
| /html/public/seo.html | 统一输出TDK、OG等SEO元数据 |
核心视频模块页面
| 页面用途 | 文件路径 |
| 网站首页 | /html/index/index.html |
| 视频分类封面页 | /html/vod/type.html |
| 视频多条件筛选页 | /html/vod/show.html |
| 视频详情介绍页 | /html/vod/detail.html |
| 视频播放页面 | /html/vod/play.html |
| 视频搜索结果页 | /html/vod/search.html |
静态资源文件
| 资源路径 | 作用 |
| /css/style.css | 全站统一主样式表,所有自定义样式存放于此 |
| /js/script.js | 全局交互脚本,轮播、菜单、懒加载、返回顶部等逻辑 |
| /images/ | 模板图标、占位海报、装饰图片资源目录 |
完整模板安装步骤
运行环境前置要求
1、服务器部署苹果cms V10 10.0及以上版本;
2、PHP版本7.0及以上,MySQL5.6及以上数据库;
3、服务器开启伪静态URL重写,Apache/Nginx均可。
步骤一:上传模板文件
将template/muban完整文件夹上传至站点根目录template文件夹,最终路径示例:/www/template/788/
步骤二:后台切换启用模板
1、登录苹果cms后台管理系统;
2、依次打开 系统 → 网站参数配置 → 基本设置;
3、在当前模板下拉选项选中788,点击保存。
2、禁止恶意使用本站资源从事违法行为,一律用于者承担。
3、本站资源版权均归原作者所有,如需商业,请购买正版。
4、转载或引用本网站内容须注明原网址,并标明本网站网址:www.yszzq.com
