精雕细琢与强大工具组合卓越结晶2017版逐浪CMS官网改版感

阅前提示：

这是一篇纯技术的干货文章，没有什么艺术性可言，而且为了考虑方便用户，诸多技术细节采用流水帐的记录，以利开发者，闲人慎入！

第一部份：架构篇

用什么样的架构开发，用什么样的布局，就如同画家作画、书家写字，谋定全局。

Zoomla!逐浪CMS2 x3.9.0全面基于MVC架构和微软dotNET4.0，集成最新的windows server 2016黑科技与SQL server大数据技术，显然是最优秀的框架。

为此，官方第一时间将整站后台升级到Zoomla!逐浪CMS2 x3.9.0版本，从而具体良好的框架。

Zoomla!逐浪CMS的开发中，模板层、资源层、数据源、应用层、附件层有着严格的定义。

需要指出的是，虽然我们目前已经进入了2017年大数据时代，但市面上还有一些低端主机厂商依然在兜售基于windows 2008系统的主机，2017-2009=10。军队一辆坦克开三年都要升级，民用一台手机基本也是两年一换，而一个操作系统和硬件环境，10年没换，显然是跑不出逐浪CMS这样的企业级产品的。

更有甚者，对于新时代的网站系统，依然沿袭旧的win2003时代思路，每站分配100M内存，想想手机内存都是4G6G的今天，岂不是叶公好龙、刻舟求剑？

在逐浪云上，部署好Zoomla!逐浪CMS，开始全新的门户开发。

Let’s GO!

第二部份：是建站，又不止是建设网站

这是一个尊重技术、尊重工匠的时代。

我们认识到，今天我们的所面临的网站开发环境，远不是10年前做一个网页挂在www万维网中，就万事大吉，而是以网站开发为起点的全杯应用体验。

网站依然是互联网的中心，尤其是以Google微软fbapples对于下一代站点和APP的规划（Progressive Web App），甚至是国内微信小程序来看，门户、以及以HTML5为核心技术的移动站点将大放异彩，坚定门户技术与B/S技术超越一切，超文本语言是最有生命语言理念。

同时又充分的融入新的技术，如AngulaJS等技术，拥有移动技术，转换思维，从而构建卓越的全栈体验，建立全生态访问矩阵，才是符合时代的平台。

这也正是逐浪CMS团队孜孜不倦的追求。

本次改版目标由此确定：

门户：提供更加卓越漂亮的门户网站，支持4K以及更宽屏幕浏览，而旧版采用宽单屏设计，在高清时代显然不符合时宜，因为越来越多的高清屏，高度很高，容易造中空有失违合，这在诸如苹果官网等平台中已经呈现出趋势，越来越多的平台不再追求“整屏”效果，而是追求“延续浏览”体验。

作为优秀的门户平台，既要展现大气，又不能有体验的违合感，同时支持诸哪键盘操作、响应式等标准规范，做到简洁流畅，又方便访客。

移动：支持响应式架构，为Zoomla!逐浪CMS官方APP提供接口数据支持。

微信：为动力逐浪提供线上微信功能。

电商：支持一键购物，接入各类主流支付工具，方便用户订购产品

办公：通过一特网能力平台，对接一体化的企业办公平台。

社区：提供论坛社区，方便用户获取产品知识。

互动：方便、随手可及的客户服务与互动体系，通过有问必答、在线客服等提供服务。

第三部份：前端篇

诚然，今天为了适应移动化，已经有诸多框架可选。但作为首个引入Bootstrap的国产CMS，逐浪官方决定将此进行到底，并进行示范化的展示，因而还是进行了纯正的Bootstrap设计以为范例。

对于轮播控件，Bootstrap可以进行细致化的定义，如下代码：

<div id="carousel-example-captions" class="carousel slide home17_banner" data-pause="hover" data-ride="carousel" data-keyboard="true" data-interval="21000">

其中，data-keyboard指定了支持键盘驱动轮播控件，而Dta-interval指定了每次滚动的时间，为各个动画轮播的时间进行了细微定制。

当然，如果开发过程中，不想自动滚动，也可以采用data-pause=”hover”来指定，使之固定不播放，从而方便调试。

动画上，我们引用了经典学院派的animate.js，这个脚本在逐浪CMS中已经引入很多个版本，在dist的各个目录下都能看到。

为了配合animate效果，我们还引入了wow.js这个脚本（以下可能称为wow.min.js，二者意义相同）。

wow.min.js这是一个非常有趣的脚本，Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。wow.min.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。

WOW.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。

使用方法：

1、加入animate.css

<link href=”http://www.bbsxiaomi.com/case/css/animate.min.css” rel=”stylesheet”>

2、加入wow.js

<script src=”http://www.bbsxiaomi.com/js/wow.min.js”></script>

3、元素中加入class

<div class=”wow animated tada”>tada</div>

4、可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如

<div class=”wow animated wobble” data-wow-duration=”4s” data-wow-delay=”3s”></>wobble</div>

5、wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

<script>

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

new WOW().init();

};

</script>

6、也可以自定义wow.js

var wow = new WOW({

boxClass: ‘wow’,

animateClass: ‘animated’,

offset: 0,

mobile: true,

live: true

});

wow.init();

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

增加顺序动画

在标签上增加

data-wow-delay=

“0.3s”

如：

感兴趣的朋友可以点此下载wow.js：

https://www.z01.com/Template/office/style/js/wow.min.js

第四部份：图像篇

对于程序员和代码人员来说，图像是短板。

但没有理由忽视它。

这里分享几个压图的小技巧。

有时会很好奇，比如微软windows操作系统的桌面背景图高清晰，可是文件却压得好小。

还有苹果公司官网的图片也是相当清晰明亮，文件也不大。

现行摄影网站多数会限制上图大小，比如不超过200K。摄影作品在Photoshop调图完成后，正常情况下使用“存储”或“存储为”命令通过改变压缩率可以将文件控到符合要求。但是对于一些超高像素相机出的片子，和一般像素相机拍摄的细节非常丰富的片子，以及后期使用软件功能形成的“大文件”结果，最后保存JPG小图时往往无法将文件大小降下来。

下图就是一张细节丰富的照片，保存JPG时原尺寸为5000×3333像素，300PPI，文件大小竟然有13.29MB，使用“存储”或“存储为”命令，图片质量降到0也不能低于200K大小。

换一个命令，使用“存储为Web所用格式”命令，压缩率更大，文件大小降下来了。在选项中注意选择是否保留文件和相机信息，包括EXIF信息。

当然，图片元素信息选择为无,这个主要记载你的图片是什么型号相机拍摄的，我们还可以点击右上小三角设置选择优化文件大小，可以存为你想要的大小了。

经过比对分析，JPG图片变小效果非常明显，对于PNG图片也有效（只是比率很小，一般小1-10K），但对于“寸土寸金”的流量来说，也是难得可贵，值得一试。

第五部份：视觉优化中的两个坑

话说Zoomla!作为至今中国CMS厂商alexa排名第一的平台，每年都会有改版。

一般网站尊敬2-3年一大改版，每年一小改版的进度迭代推进。

这从逐浪官网的脚本命名规则也能看出来，最近的一个CSS脚本是2014.css，虽然是2014年创建的，但一直有不断的更新和维护。

新版逐浪CMS官网采用了global.css这个标准名称，时行全新设计，摒弃旧式约定，整个站点改版完成，CSS文件不超过500行，取得了卓越的成效。

然而在实际设计中，我们还是遇到了一起坑。

首先是webfont加速事宜。

我们知道，当前市面上的webfont中文字库，均采用有限字库引用法，即用几个字，就引用相应文件（包括国内的字蜘font-spider.org均是采用同类方案，一旦加一个字符就要重新更新字库引用文件，相当麻烦）。

这样的优点是文件小、加载快。缺点是灵活性不够，维护成本高，一旦要加一个文字或减一个文字就要重新引用。

为此，逐浪软件旗下的逐浪字库团队提供了一个全库解决方案（感兴趣可以访问www.ziti163.com/webofnt）。

显然，全库加载是慢的，如何解决呢？

逐浪的优秀前端设计师是这样考虑的：

我做不到过大文件极速加载完，但可以做到将客户看到的第一屏最快展示出来，其它在后面自由排队，显然也是一种思路。

具体应用上，由逐浪官网引用了一款极细的逐浪超细宋webfont，在初加载时，我们将微软雅黑超细和ST黑体超细（用于mac设备）作为备选。

webfont有一个特征，就是当一个字体在下载时，会用OS内置的备用字库作为显示，后台慢慢的等待下载，完成后再呈现出最终效果。

其CSS写作是：

font-family:"ZoomlaXSongExtraLight","Microsoft YaHei UI light","STheitiSc-light";

我们遇到的第二个坑是视频加载过慢。

首引引用了一个视频，并创造性的引用了一个随心加载，点击PC右下角的惊叹号，视频和标语会变化，如下图：

最初我们将这台笔记本电脑背景设置成透明的PNG，带来的问题是每次都要等好久才能加载出视频（一般超过5秒不能加载成功，就是失败的站点）。

解决此问题用的小聪明是：原来透明的PNG，改成带视频其中一帧的JPG文件，从而使视觉上感受不到加载延迟：

老师说，只要有效的方法，就是好方法

在此提出两个解决思路，只是为了说明在通往开发的自由之路上，只要想办法，总是有解决方案的，更何况在逐浪软件的开发工具箱上，拥有无限种可能。

顺便说一下，在mac的web及平面设计中，一般采用黑体-简 Heiti SC来取得与雅黑同等效果，即黑体-简（细体|中等）对应window下微软雅黑Reguler默认效果。

MAC中细黑的网页效果，可以使用STheitiSc-light，也可以使用STHeitiTC-Light，二者区别SC是大陆国标字，TC是港澳台标准的字。

举个例子，国标逗号句号顿号是左下角的，TC的是居中的，还有一些字的写法，草字头的TC是两个分开的加号。

第六部：终极加速

就是避免一切不需要的查询，整个逐浪官网只引用了两个查询标签，其它均是固定的内容，也是没有必要的查询。

固然CMS使人更方便，但对于一些固态内容，显然没必要用标签（动态标签），否则会让代码思路更加复杂。

甚至于标签中也追求极致的简约，比如target属性，虽然可以通过节点来识别是否弹出新窗口，但官方新闻这一块，我们铁定是必须target=”_blank”的，就直接写明，不需要来动态，省去不必要的动作，自然查询就更快了。

Web开发之路是孤独的，同时技术也是不断演化的，这一篇博文只是开发过程的一段小记，我们将不断优化设计，整理思维，用以献给所有支持逐浪软件发展的人们。

第七部：结语：

web开发中，既要小气抠门，一点点的细节都要管控住，同时又要适当的前瞻，在5G即将到来、更高速的网络下，门户和web的形态将如何表现？

这都是体现开发者匠胆琴心之处。

曾有朋友在引用SSL加密浏览后一段时间，拆除效果，理由是加载过慢。

事实上，只要恰当引用、科学设计，速度并不会慢，而且会带更好的安全性。

顺便预报一下，在新版逐浪CMS中，提供了全新的webfont字库引用等功能，将更加方便，其中zfont、zIco两大全新解决方案也将第一次面对广大站长开放，引用起来非常方便，如：

<style>

整个引用库在逐浪云上，即：

@import url("https://code.z01.com/Zfont.css");

精彩值得期待！

来源：逐浪CMS软件