脱胎换骨搞帝国CMS移动端模板适配优化

各位帝国CMS的“开国元勋”们，今天唠唠救命话题

咱就说，做帝国站的有没有和我一样的苦命人？前些年仗着PC端是顶流，搞出来的站跟90年代末的大彩电似的——大，够气派，点啥都灵，那时候用帝国做内容还倍儿有面，模板一套改俩就行，流量哗哗的。结果这几年好家伙，全成低头族了！打开咱那“老彩电帝国”搁手机上一看？不是字小得像蚂蚁搬家搬累了撒的碎米，就是图片挤得像春运绿皮车硬座厕所门口，更气人的是导航栏，要么直接飞屏幕外火星子直冒，要么点半天没反应，跟摸石头过河摸到块冻石头似的，抠半天抠不动！

那段时间我蹲后台看数据，差点没给自己掐人中——帝国CMS原来挺顶的收录，移动端跳失率居然能飙到95%！95%啊兄弟姐妹们！相当于辛辛苦苦攒了100桌客人，前脚刚进门喊开席，后脚95桌全掀筷子跑隔壁沙县小吃了！这谁顶得住啊？那时候我急得像热锅上的蚂蚁搬家搬冻石头到绿皮车火星子上烤（别笑，梗得先铺垫牢魔性体系），找了一堆帝国CMS的教程，要么太老要么太官方，看半天跟啃干巴巴的窝窝头似的，没味还噎得慌。

后来咬咬牙踩了N个坑（踩坑的细节后面给你们列避坑清单哈，过来人嘛，绝对不藏私料），终于把我的“老彩电帝国”改成了“折叠屏小别墅帝国”——哦不对，折叠屏受众还是少，改成“人手一部的小米红米华为苹果OPPOVIVO坚果一加魅族锤子（虽然锤子凉了但还有情怀党）适配完美的安卓苹果都能用的帝国CMS站”！现在跳失率降到了30%左右，收录反而还涨了！今天就给大家唠唠怎么脱胎换骨搞帝国CMS移动端模板适配优化脱胎换骨搞帝国CMS移动端模板适配优化，搞完之后你站的流量，绝对像春运抢票大军挤绿皮车硬座厕所门口的架势——挡都挡不住！

避坑第一条：别信那种“一键生成”的帝国CMS移动端模板

我踩的第一个大坑就是这个！当时也是急病乱投医，逛论坛逛到有人吹“一键生成适配99.9%手机的帝国CMS模板”，价格还便宜，99块钱终身使用！我当时眼睛都亮了，跟捡了个大元宝似的赶紧付款下载安装。

结果安装完一看？好家伙，一键生成的东西果然是“流水线裹脚布”——丑也就算了，丑还能忍忍改个配色，关键是适配烂得离谱！图片要么拉得太长像个油条，要么缩得太短像个包子皮，导航栏直接堆在屏幕底部，挤得像菜市场卖菜的摊子摆不下，更气人的是帝国CMS的标签调用直接乱套！帝国CMS移动端模板适配优化是做好了（哦不对是表面生成了个壳子），但内容全错！文章列表全是重复的，详情页打不开，后台还卡顿得像老牛拉破车。

后来找卖家退款，卖家直接装死拉黑！99块钱倒是小事，关键是浪费了我三天三夜的时间！气得我把窝窝头都扔了，换了个沙县小吃的蒸饺当发泄品。所以各位开国元勋们，记住过来人这句话：帝国CMS移动端模板适配优化，别信一键生成！别信一键生成！别信一键生成！（重要的魔性重复三遍，硬堆词但顺嘴吧？）

避坑第二条：别直接复制PC端模板改尺寸

踩完一键生成的坑之后，我又自作聪明踩了第二个坑：直接复制PC端的模板，然后把所有容器的宽度改成100%，字体改成16px，图片改成自适应。当时我还沾沾自喜，觉得自己太聪明了！这不就是帝国CMS移动端模板适配优化嘛？简单！

结果打开手机一看？容器宽度是对了，字体也大了，图片也能自适应了，但整个站还是像绿皮车硬座车厢塞了个双人床——布局全乱！侧边栏直接把正文挤没了，面包屑导航长到能绕地球三圈，搜索框要么太小要么直接飞顶部，点进去之后弹出的页面还是PC端的弹窗，大得像盖被子。

那段时间我又蹲后台看数据，跳失率反而从95%升到了98%！相当于100桌客人全掀筷子跑了，只剩两桌是睡着了忘了醒的！气得我把沙县小吃的蒸饺也吃完了，连醋都喝光了！所以各位开国元勋们，记住过来人这句话：帝国CMS移动端模板适配优化，别直接复制PC端模板改尺寸！别直接复制！别直接复制！（魔性重复继续，顺嘴不？）

干货第一条：先搞清楚帝国CMS移动端适配的核心逻辑

踩完两个大坑之后，我终于静下心来啃窝窝头配白开水（哦不对啃技术文档配奶茶，奶茶是精神支柱，土味正能量得跟上），搞清楚了帝国CMS移动端模板适配优化的核心逻辑——其实就是“换房子户型”！PC端是“三室一厅一厨两卫带大阳台的大平层”，空间大，想怎么布局怎么布局；移动端是“一室一厅一厨一卫带小飘窗的单身公寓”，空间小，得把所有没用的东西都拆了，只留最核心的东西。

核心逻辑搞清楚之后，接下来就好办了！咱先给单身公寓“打地基”——也就是用帝国CMS的多端模板功能！很多开国元勋可能都不知道帝国CMS自带多端模板功能吧？我也是啃技术文档啃到半夜三点才发现的！土味正能量来了：只要功夫深，铁杵磨成针！只要肯钻研，帝国CMS也能变神仙！

怎么开启帝国CMS的多端模板功能呢？很简单，跟着我操作：

• 第一步：登录帝国CMS后台，找到系统设置→系统参数设置→信息设置；
• 第二步：找到开启多端访问，勾选是；
• 第三步：找到默认访问端，可以选PC端或者移动端，根据自己的需求来；
• 第四步：保存设置，刷新后台缓存，刷新前台页面——搞定！

开启多端模板功能之后，咱就可以给单身公寓“装修”啦——也就是制作专属的帝国CMS移动端模板！

干货第二条：制作专属帝国CMS移动端模板的几个小技巧

制作专属帝国CMS移动端模板，我总结了几个踩过坑之后总结出来的小技巧，绝对实用：

技巧1：单身公寓布局要“精简精简再精简”

大平层有大阳台可以放秋千，单身公寓小飘窗只能放一盆多肉；大平层有侧边栏可以放广告位、热门文章、友情链接，单身公寓只能放最核心的热门文章；大平层有顶部导航栏可以放10个菜单，单身公寓只能放3-5个核心菜单，剩下的可以放在汉堡菜单里（汉堡菜单就是那种三条横线的菜单，很魔性对吧？像汉堡包的面包夹肉饼）。

土味正能量又来了：少即是多，精即是美！精简布局跳失率降，内容为王收录量涨！

技巧2：单身公寓的“家具尺寸”要“合适合适再合适”

家具尺寸指的就是容器宽度、字体大小、图片尺寸、按钮大小这些：

• 容器宽度：必须设置成100%，最大宽度可以设置成750px（现在主流手机的宽度都是750px左右）；
• 字体大小：正文必须设置成16px-18px，标题可以设置成20px-24px，太小的话用户看不清楚，太大的话占空间；
• 图片尺寸：必须用帝国CMS的自动生成缩略图功能，生成适配移动端的小图片，比如750px×400px，然后设置成max-width:100%，height:auto，这样图片就能自适应了；
• 按钮大小：必须设置成至少44px×44px，因为现在主流手机的手指触摸区域至少是44px×44px，太小的话用户点半天没反应，跟摸石头过河似的。

这里给大家放一段自动生成缩略图的帝国CMS标签调用代码哈，绝对靠谱，过来人亲测：

``` [e:loop={'news',10,18,0,'','newstime DESC'}]

[/e:loop] ```

这段代码是什么意思呢？大概就是说：调用news栏目最新的10篇文章，每篇文章显示缩略图、标题（最多20个字）、简介（最多50个字），如果没有缩略图的话就显示默认图片。绝对简单实用，各位开国元勋们可以直接拿去用！

技巧3：单身公寓的“水电煤气”要“通畅通畅再通畅”

水电煤气指的就是加载速度、链接跳转、后台管理这些：

• 加载速度：必须压缩所有图片、CSS、JS文件，压缩图片可以用 TinyPNG，压缩CSS、JS文件可以用帝国CMS后台的模板合并压缩功能，压缩之后加载速度能快很多，用户体验好，收录量也会涨；
• 链接跳转：必须设置成301永久重定向或者同端跳转，同端跳转的意思就是PC端打开PC端模板，移动端打开移动端模板，不要跳来跳去的，用户体验差；
• 后台管理：必须熟悉帝国CMS的多端模板后台管理功能，比如修改模板、设置栏目、发布内容，这些都和PC端差不多，只是多了个访问端的选择，很简单。

土味正能量又来了：加载快，体验好，收录涨，流量爆！水电通，煤气足，单身公寓变金屋！

最后再给各位开国元勋们打个气

其实帝国CMS移动端模板适配优化并没有大家想象的那么难，只要肯花时间肯钻研，踩几个坑没关系，爬起来继续走就是了！我也是踩了两个大坑才搞成的，现在我的“折叠屏小别墅帝国”不对是“人手一部的适配完美的帝国CMS站”流量哗哗的，广告收入也涨了不少，上个月还换了个新手机！

各位开国元勋们，加油！相信你们一定能把自己的“老彩电帝国”改成“金屋帝国”！土味正能量终极版：帝国CMS在手，天下我有！模板适配优化，流量不愁！