简介苹果CMSv10首涂第30套模板是一套可深度DIY装修的视频站点主题面向使用苹果CMS搭建影视/资源站的站长无需改代码即可像装修淘宝店一样对首页、栏目页、详情页、播放页进行模块化布局与配色调整内置10多个模块并支持添加、修改、删除、排序导航和图标按钮也能灵活配置。主题采用CSS3与H5特性编写全部原创手写样式、未依赖框架流式布局与移动端细节优化让页面加载更轻快操作体验更顺滑。压缩包共141个文件以html模板、php后端逻辑、css/js样式脚本为主另有png/gif图标素材与woff/ttf字体文件整体仅5.54MB结构简洁便于二开。目前已有315人学习下载适合想快速搭建个性化苹果CMS站点、又希望保留灵活装修能力的站长使用。1. 苹果CMS v10首涂第30套DIY主题模板先弄懂装修逻辑再动手苹果CMS v10主题模板能让你像给淘宝店铺装修一样调整整站页面这句话不是广告而是首涂第30套这包模板的默认能力。它没有把页面输出写死在HTML里而是把首页、栏目页、详情页、播放页拆成独立模块通过/template/shoutu30/admin/admin.php进入装修后台添加、修改、删除、拖动模块后前台模板按配置重新组装。对用苹果v10搭视频站的站长和PHP开发者来说这等于把“找程序员改模板”变成“后台点两下”。新手不需要完全理解苹果CMS模板标签也能完成页面调整熟手则能透过这套主题理解可视化装修背后的数据结构属于一套能拿来做二开参考的实用模板素材。2. 模板目录结构与页面装配原理动手前我先从目录结构判断它和普通苹果CMS主题的差异。这套主题的根目录是/template/shoutu30/里面既放了前台CSS也放了后台装修用的PHP和UI资源说明它在设计上就是“前台渲染 后台管理”共用一套资源。搞清楚哪些文件被前台加载、哪些只服务后台是避免后续页面样式错乱的第一步。2.1 主题根目录下各文件该放在哪里下载解包后文件清单里至少能看到[点击查最新更新].bat、layui.css、style.css、ui.css、swiper.min.css、layer.css、demo.css、laydate.css、iconfont.css、code.css。实际安装时主题文件会被放到苹果CMS的模板目录下我习惯先按这个结构整理/template/shoutu30/ ├── index.html # 首页模板 ├── article.html # 详情页模板 ├── type.html # 栏目页模板 ├── play.html # 播放页模板 ├── css/ │ ├── style.css # 前台基础样式 │ ├── ui.css # UI组件样式 │ ├── iconfont.css # 图标字体样式 │ └── code.css # 代码高亮样式 ├── js/ │ ├── jquery.min.js │ ├── swiper.min.js # 轮播组件 │ └── common.js └── admin/ ├── admin.php # 装修后台入口 ├── layui.css ├── layer.css ├── laydate.css └── demo.css[点击查最新更新].bat是Windows下的更新说明脚本看了里面的内容再动手。layui.css、layer.css、laydate.css、demo.css这组是后台管理界面用的不要放进前台页面的公共头部。swiper.min.css和swiper.min.js配套加载控制轮播样式和滑动行为。注意具体文件命名可能和打包习惯有关但查找思路是一致的——先确认admin目录是否存在再逐个打开前台.html模板看它到底引用了哪些css/js文件。2.2 模板引擎如何把模块配置变成HTML苹果CMS v10基于PHP模板文件里混着HTML和模板标签。例如详情页常见的标签是这种写法div classdetail-title h1{$vod.name}/h1 span导演{$vod.director}/span /div这里的{$vod.name}不是普通变量而是模板引擎占位符渲染时会被替换成当前影片的name字段。装修主题更进一步它让“模块配置”也成为模板变量。后台保存的模块数组大致长这样$modules [ [ name banner, title 首页Banner, sort 1, config [ data_source type, data_id 1, show_num 5, ], ], ];前台模板遍历这个数组把每个模块的HTML片段按sort顺序拼接。常见做法是在模板里写一个循环?php if (!empty($modules)): ? ?php foreach ($modules as $module): ? section classwidget-?php echo $module[name]; ? ?php if ($module[name] banner): ? div classbanner-box !-- 这里放轮播结构 -- /div ?php elseif ($module[name] hot): ? ul classhot-list !-- 这里放热播榜 -- /ul ?php endif; ? /section ?php endforeach; ? ?php endif; ?这段循环需要一个$modules变量来源要么由admin.php写入苹果CMS的配置表要么写入独立的JSON文件。两种方式各有适用场景我总结了区别存储方式优点缺点适用场景数据库配置表修改即时生效不用处理文件权限每次保存多一条SQL需要做缓存线上环境多人维护独立JSON文件方便备份和版本控制定位问题简单目录需要写权限并发写可能丢数据本地开发单机部署配置存数据库还是文件直接影响你后续改排序的方式。数据库方案在后台“模块管理”里直接改数字即可文件方案则要保证PHP进程有权限写theme_config.json否则保存按钮会报500。2.3 前台资源和后台UI资源必须分开加载很多人第一次弄这个模板会把layui.css误加到前台公共模板结果首页、详情页全部变成layui风格按钮和表单全变了。避免这个问题要在index.html等前台模板里只引入下面这组link relstylesheet href{$theme}style.css link relstylesheet href{$theme}ui.css link relstylesheet href{$theme}iconfont.cssstyle.css定基础样式ui.css覆盖组件细节iconfont.css提供图标字体顺序不要互换。swiper.min.css只在有轮播的页面引入code.css如果帖子或详情页里用到代码高亮再引入。如何确认当前页面到底加载了哪些CSS打开浏览器开发者工具在Elements面板里看head区的link列表。如果出现layui.css马上在模板代码里搜索“layui”把它从前台公共模板移除再清理一次苹果CMS缓存即可。3. 后台装修实现模块增删排序与导航按钮配置这一章我会把装修后台的核心逻辑拆开。你不需要完全重写这套代码但理解了数据结构和保存流程遇到“模块保存后不见了”或者“排序没反应”时能更快定位问题。3.1 自定义菜单入口与权限校验苹果CMS v10后台支持自定义菜单可以把外链挂到左侧导航。首涂30套的管理入口是/template/shoutu30/admin/admin.php你需要在苹果CMS后台的菜单管理里加上这条记录菜单名称首涂30套装修 链接地址/template/shoutu30/admin/admin.php路径要写站内相对路径不要写http://开头的完整地址否则后台会把它当成外部站点。保存后左侧菜单会出现“首涂30套装修”点击进入装修后台。这个PHP文件放在模板目录下意味着知道路径的人都可以直接访问所以文件顶部一定要有登录校验。常见做法是复用苹果CMS后台的会话类似这样?php session_start(); if (empty($_SESSION[admin_id]) empty($_SESSION[admin_name])) { exit(请先在苹果CMS后台登录后再访问); } define(SHOUTU_ADMIN, true);这段代码先取后台登录时写入的会话字段没登录直接退出。字段名admin_id和admin_name要和你本机实际打印出来的$_SESSION保持一致如果后台登录后写的是user_id这里就要跟着改。3.2 模块添加、删除、排序的数据表设计可视化装修的本质是把页面变成配置数据。我一般会给模块建一张独立的表字段不复杂重点在排序和状态CREATE TABLE mac_shoutu_module ( id int(11) NOT NULL AUTO_INCREMENT, page varchar(20) NOT NULL DEFAULT index, module_name varchar(30) NOT NULL, module_type varchar(30) NOT NULL, module_config text NOT NULL, sort int(11) NOT NULL DEFAULT 0, status tinyint(1) NOT NULL DEFAULT 1, PRIMARY KEY (id), KEY idx_page_status_sort (page,status,sort) ) ENGINEInnoDB DEFAULT CHARSETutf8;page字段区分首页、栏目页、详情页、播放页module_type指的是模块类型比如banner、hot、video_list。module_config存JSON字符串保存时用json_encode写入读取时用json_decode还原为数组。sort字段的值越小越靠前status为0时该模块不渲染。模块类型和常用参数的对应关系我整理成了一张表module_type用途常用配置参数banner首页顶部轮播数据来源、轮播数量、切换间隔hot热播榜分类ID、排序字段、显示条数category分类入口显示哪些分类、图标类名video_list视频列表数据来源、每页条数、是否显示标题拖拽排序保存时前端会提交排序后的id数组后台接收后按顺序更新sort值if (isset($_POST[sort_ids])) { $sortList array_map(intval, $_POST[sort_ids]); foreach ($sortList as $index $id) { $db-exec(UPDATE mac_shoutu_module SET sort {$index} WHERE id {$id}); } exit(json_encode([code 1, msg 排序已保存])); }这里array_map(intval, $_POST[sort_ids])必须加它能把数组里每个元素转成整数防止把字符串拼进SQL造成注入。每个UPDATE单独执行虽然看起来不够高效但模块数量一般不会超过几十条实际性能可以接受。3.3 导航和图标按钮的自定义逻辑导航在装修后台里通常是一组可增删的重复项。保存的数据结构是标准数组$navItems [ [ title 首页, link /, target _self, icon icon-shouye ], [ title 电影, link /index.php/vod/type/id/1.html, target _self, icon icon-movie ], ];前台渲染时输出固定HTML结构图标和标题都由后台数据决定a href{$item.link} target{$item.target} i classiconfont {$item.icon}/i span{$item.title}/span /a这里的{$item.icon}会直接进入class属性如果后台没有校验就保存了带引号的恶意字符串页面很容易被插入额外标签。稳妥的做法是白名单过滤只允许预设图标类名出现$allowedIcons [icon-shouye, icon-movie, icon-news, icon-live, icon-fenlei]; if (!in_array($icon, $allowedIcons, true)) { $icon icon-shouye; }白名单校验比strip_tags更可靠因为图标本身就是从一个固定集合里选的不需要允许任意值。4. 流式布局与移动端适配的CSS3实现首涂30套强调原创手写样式、未使用框架这句话落在CSS上意味着布局和断点全部要自己控制。真正写起来并不难关键是掌握流式布局的几个核心断点以及移动端点击、滚动的细节。4.1 从固定宽到流式栅格移动端适配的第一步是容器宽度不再写死像素而是用百分比配合断点。我一般用这种写法.container { width: 100%; padding: 0 15px; } media (min-width: 768px) { .container { width: 720px; margin: 0 auto; } } media (min-width: 992px) { .container { width: 960px; } } media (min-width: 1200px) { .container { width: 1200px; } }默认手机端占满宽度768px以上切换到固定宽度并居中避免大屏上内容被拉得过宽。对应栅格列数也可以这样设置屏幕宽度容器宽度推荐栅格列数适配对象小于768px100%2列手机768px 到 991px720px3列平板竖屏992px 到 1199px960px4列平板横屏、小笔记本大于等于1200px1200px6列桌面列表区域用grid实现比较省事.module-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } media (min-width: 768px) { .module-list { grid-template-columns: repeat(4, 1fr); } } media (min-width: 1200px) { .module-list { grid-template-columns: repeat(6, 1fr); } }repeat(2, 1fr)表示两等分gap替代老的margin方案间距不会因为某一列有浮动而被挤掉。流式布局不要用float加固定width拼列数改用flex/grid后模块总数不够也不会出现最后一行错位。4.2 移动端点击、滚动的细节处理手机端打开苹果CMS页面最常见的两个问题点击卡片时出现灰色闪烁列表滚动不跟手。CSS层面可以这样处理* { -webkit-tap-highlight-color: transparent; } body { -webkit-overflow-scrolling: touch; } .swiper-wrapper { transform: translateZ(0); backface-visibility: hidden; }tap-highlight-color去掉点击高亮-webkit-overflow-scrolling让iOS上的滚动更接近原生手感translateZ(0)触发GPU加速让轮播滑动更顺。不过GPU加速不能滥用所有元素都加反而会浪费内存。轮播组件用的是swiper.min.js初始化参数会直接影响体验new Swiper(.banner-swiper, { autoplay: { delay: 3000, disableOnInteraction: false }, loop: true, speed: 600, pagination: { el: .banner-pagination, clickable: true } });disableOnInteraction: false表示用户手动滑动后不停下自动播放loop: true要求至少三张图图片只有一张时最好关掉循环。clickable: true允许点击分页小圆点跳转这是移动端用户的习惯操作。4.3 图片懒加载与缩略图尺寸苹果CMS视频封面字段是{$vod.pic}原图可能很大不优化会拖慢首屏。可以在图片标签上直接加原生懒加载属性img src{$vod.pic} loadinglazy classlazy-img alt{$vod.name}loadinglazy是浏览器原生功能不需要额外JS滚动到可视区域才加载。CSS给图片一个占位底色避免懒加载过程中出现大面积空白.lazy-img { width: 100%; height: auto; background: #f0f0f0; transition: opacity .3s; }如果封面是固定海报比例强烈建议用aspect-ratio固定盒子高度避免图片加载完成后把页面往下顶.poster-card { aspect-ratio: 2 / 3; object-fit: cover; }aspect-ratio比老旧的padding-top百分比方案直观而且不会因为图片高度不统一出现模块错位。5. 换皮与排错实战样式失效、模块丢失与后台菜单不显示这章我直接列出拿到首涂30套后最常见的几个坑以及对应的排查指令。如果你已经装好模板但页面没有变化从第一个问题开始查。5.1 安装后页面没变化先检查模板目录和缓存苹果CMS后台的“系统”-“模板管理”里默认模板必须切换成shoutu30。切换后如果前台还是旧样式多半是缓存没清。清缓存不要只看后台按钮还要去runtime/目录手工确认find runtime -type f -name *.php -delete这条命令只删PHP缓存文件不动模板源文件。清理后再刷新前台如果页面结构有变化但样式不对继续看下面。5.2 正文没有样式检查是否错误引入了layui页面能出内容但所有按钮、卡片都像被重置过大概率是前台模板引入了后台UI样式。搜索整套模板里所有.html文件grep -r layui /template/shoutu30 --include*.html一旦发现输出里有layui.css或layer.css把它们从前台模板的公共头部link中删掉只保留style.css、ui.css、iconfont.css和必要的swiper.min.css。这组后台样式只给/template/shoutu30/admin/admin.php用。5.3 模块排序保存后不生效多半是缓存层在作怪我在用这套主题时把模块配置写进了数据库前台读取后又套了一层Redis缓存。后台改完排序前台还是旧顺序就是因为没清Redis。排查命令redis-cli keys mac* | head -20 redis-cli flushdbflushdb会清空当前库所有key线上环境不要随便执行最好先keys看看有哪些缓存只删和mac_shoutu相关的redis-cli --scan --pattern *shoutu* | xargs -r redis-cli del删除后再刷新页面排序就会按新sort值走。如果还是不对打开浏览器开发者工具查看网络请求确认模块配置接口返回的是新数据。5.4 模块丢失时先检测JSON格式模块配置如果存的是JSON文件保存后突然丢失多是把module_config写成了非法JSON。用PHP命令行验证最直接php -r var_dump(json_decode(file_get_contents(theme_config.json), true));返回NULL说明JSON解析失败回退到更早的格式化结构注意中文双引号不要被编辑器自动替换成全角。修复后重新保存再把文件权限调整为0644、目录调整为0755。5.5 无限制版在本地部署时需要注意伪静态这个包标注了无限制版去掉域名校验后本地开发确实方便但本地Nginx如果没配好伪静态后台菜单链接可能打不开。确保站点伪静态规则允许/template/shoutu30/admin/admin.php这种路径被直接命中location ~ /template/.*\.php$ { include fastcgi_params; fastcgi_pass unix:/tmp/php-cgi.sock; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; }这段配置可以放在server段里让template目录下的PHP文件绕过普通前台路由规则。配好后重启Nginx再访问后台装修入口正常就能看到模块管理页。如果还是404检查Nginx的location顺序把带\.php$的规则放在catch-all规则之前。本文还有配套的精品资源点击获取