模板截图:
1首页
2封面页
3列表页
4播放页
模板基础介绍
iKanBot是一套专门适配苹果CMS V10程序的极简纯白影视模板,整体基于HTML5、CSS3搭配原生JavaScript开发,设计思路对标主流影视资讯站点。页面干净清爽,内容排布疏密适中,去除各类多余弹窗、广告位与会员相关模块,只保留影视内容展示核心功能,让访客专注浏览影片资源。
模板核心设计亮点
极简纯白视觉体系页面底色采用纯白#ffffff,搭配浅蓝#4078c0作为主题色,正文文字使用深灰色#333,整体配色柔和耐看,长时间浏览不易视觉疲劳。
标准化HTML5语义结构全站统一使用header、main、section、aside、article、footer等语义标签搭建页面,代码层级清晰,天然适配搜索引擎收录规则。
经典左右分栏布局左侧放置影片主内容展示区,右侧搭配侧边栏榜单、辅助导航,内容主次分明,浏览逻辑清晰。
CSS Grid自适应海报网格默认6列影片卡片布局,鼠标悬浮卡片会产生轻微上浮动效,提升页面交互质感。
全设备响应式适配兼容电脑、平板、手机三类设备,小尺寸屏幕会自动减少卡片展示列数,顶部导航折叠为汉堡菜单,移动端操作便捷。
纯原生轻量化开发不依赖任何第三方UI框架,全局配色统一由CSS变量管控,修改主题色无需大面积改动代码;原生JS代码精简,页面加载速度更快。
兼容系统原生标签完整保留苹果CMS内置{maccms}调用标签,仅调整num参数适配页面布局,不会破坏原有数据调取逻辑。
模板内置完整功能
1、全站统一顶部导航栏,支持二级分类下拉展开;
2、简洁全域搜索框,仅针对视频资源检索,无多余冗余选项;
3、首页划分热门电影、热门剧集两大独立展示模块;
4、视频分类页面附带子分类快捷导航,快速切换细分影片类型;
5、视频详情页整合海报、影片基础资料,多播放线路通过Tab标签一键切换;
6、视频播放页搭载标准16:9播放器,支持线路切换,侧边搭配影片简介卡片;
7、视频搜索结果页面采用网格卡片展示,附带多维度内容筛选条件;
8、侧边栏内置一周口碑影片排行榜,引导用户挖掘优质内容;
9、页面底部预留标准友情链接展示区域,方便站点流量互换;
10、采用IntersectionObserver实现图片懒加载,大幅降低页面初始加载资源占用;
11、通用分页组件,包含首页、上一页、数字页码、下一页、尾页完整跳转按钮;
12、滚动页面后自动显示返回顶部按钮,快速回到页面顶端;
13、页面底部配置RSS订阅入口,满足内容订阅需求。
模板开发技术构成
| 技术名称 | 详细说明 |
| HTML5 | 使用语义化标签构建页面,文件统一UTF-8无BOM编码,避免中文乱码 |
| CSS3 | 结合Grid、Flex双布局,CSS变量统一管理配色,媒体查询实现多端响应式 |
| JavaScript | 采用原生ES6+语法编写交互,无jQuery等第三方脚本依赖 |
| 苹果CMS V10 | 完全兼容系统自带{maccms}全套模板标签体系 |
| SEO配套 | 内置OG协议标签、标准化元数据、层级合理的页面标题,利于自然流量收录 |
模板全部文件模块路径
公共通用页面
全站头部:/html/public/head.html
全站底部:/html/public/foot.html
通用分页组件:/html/public/paging.html
静态资源统一引入:/html/public/include.html
SEO元数据配置文件:/html/public/seo.html
视频核心模块页面
| 页面用途 | 文件路径 |
| 网站首页 | /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/ | 存放模板图标、封面占位图等图片资源 |
模板完整安装操作教程
步骤一:上传完整模板文件夹
将template目录下完整的788文件夹上传至服务器根目录的template文件夹内,最终完整路径为/www/template/788/,不可拆分内部文件、不可删减外层文件夹。
步骤二:后台切换启用模板
1、登录苹果CMS后台管理面板;
2、依次打开系统、网站参数配置、基本设置页面;
3、在当前模板下拉选项中选中788;
4、点击页面保存按钮完成基础切换。
