1首页
2封面页
3列表页
4播放页影视资源坊分享一款轻量化纯白极简模板iKanBot;专为苹果cms V10做出。使用原生前端技术开发,无多余弹窗、会员广告组件,专注影视信息展现,契合追求干净清爽浏览感受的影视网站。
iKanBot整组模板基于HTML⑤CSS3与原生JS开发,设计借鉴主流影视资讯站外观,页面干净无冗余组件;去掉弹窗广告,付费会员等多余功能,只保留影片浏览、搜索、播放关键能力,页面加载速率快,访客观看感受舒适。
极简纯白视觉体系:页面底色#ffffff,主色调浅蓝#4078c0;正文深灰#333,配色克制柔和;长时间浏览不易视觉疲劳;
HTML5语义化结构全站统一headermain、section、asidearticle、footer语义标签,代码层级规范。天然适配搜索引擎收录规则。
经久左右分栏布局左侧影片主信息区,右侧侧边栏放置榜单、推荐信息,信息层级清楚,阅读逻辑顺畅;
CSS Grid,自适应海报网格PC端6列影片卡片布局;鼠标悬浮自带轻微上浮动效,简约精巧。
三端完整响应式电脑、平板、手机手动适配,移动端手动减少海报列数;顶部导航折叠为汉堡菜单;适配手机触摸操作;
纯原生无第三方依赖不引入任何UI框架;全局配色通过CSS变量统一管理,修改主题色只需修改一处变量;JS使用原生ES6+编写;代码轻量化无冗余。
兼容系统原生标签所有{maccms}调取标签保留原版语法;仅调整num数值适配不同屏幕布局,不必重写数据调取代码。
①全站通用导航栏,兼容二级下拉子栏目,快速切换影片栏目;
②清爽全域搜索框,仅针对视频模型搜索,页面干净无多余筛选按钮;
③主页分双组件展现走俏电影、连续剧,分区清楚;
④视频栏目页附带子栏目导航,快速切换细分题材;
⑤视频详情页整合海报,影片资料、TAB多播放线路切换;
⑥播放页使用标准16:9播放器,兼容线路切换,侧边附带影片概述卡片;
⑦搜索结果页面网格展现影片,搭配多维度筛选条件;
⑧侧边栏内置一周口碑排行榜,引导用户浏览走俏信息;
⑨底部预留友情网址展现区域;
⑩图像使用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/ | 模板图标、占位海报、装饰图片资源目录 |
①服务器部署苹果cms V10 10.0及以上版本;
②PHP版本7.0及以上,MySQL5.6及以上数据库;
③服务器开启伪静态URL重写,Apache/Nginx均可。
将template/muban完整文件夹上传至网站根文件夹template文件夹,最终网址示例:/www/template/788/
①登录苹果cms后台管理平台;
②依次开启 系统 → 网站选项设置 → 基本设置;
③在当前模板下拉选项选中788,点击保存。