对代码命名的一点思考和理解

一个软件最后都会落实到代码。而代码,其背后的架构设计或设计思想或模式固然重要,但我觉得更重要的东西则是良好的命名。混乱或错误的命名不仅让我们对代码难以理解,更糟糕的是,会误导我们的思维,导致对代码的理解完全错误。相反,良好的命名,则可以让我们的代码非常容易读懂,也能向读者正确表达事物以及逻辑的本质,从而使得代码的可维护性就大大增强,读命名好的文章是非常流畅的,会有一种享受的感觉。

继续阅读对代码命名的一点思考和理解

八个简单方法提升WordPress速度

WordPress是一个很棒的开源程序,几乎我认识的站长朋友当中,粗略估算有80%使用Wordpress。但很棒不等于完美,就在我所认识的这些朋友中,几乎所有人都会抱怨Wordpress太臃肿,运行效率太低了,大家有无同感?

所以,今天这篇博文和大家分享8个小贴士来提升WP的运行效率,如果您运用了这些方法后发现确实有帮助,请把这篇博文分享给更多的人好吧?当然为了尊重劳动成果,也烦请指明出处。

 

1、使用高效的缓存插件

WordPress插件们是非常有用的, 我推荐一款缓存插件可以改善页面载入时间,它就是W3 Total Cache,有了这个插件之后咱就不再推荐你其他缓存插件了,因为所有缓存插件有的功能它都有了,而且安装和使用非常方便。

拥有这款插件之后,你的页面载入速度会加快,因为网站的主要元素已经被缓存了。

2. 使用内容分发网络 (CDN)

基本上所有你喜欢的大网站都会使用CDN。简单来说,CDN是把你站点上的文件们(CSS\JS\图片等)发布到最接近用户所在的网络区域,让用户就近下载,这样就能提高站点运行速度。在国内ChinaCache是比较有名的CDN供应商,不过价格贵了一些,像各大门户网站,比如腾讯、新浪、网易等等都是用ChinaCache。所以不管你在哪里,访问这些门户网站都会觉得速度很快。当然啦,对于小站来说,这个成本可能会高一些,

所以,你无论是在南方,或者北方,还是在北美,访问这些门户网站,感觉速度都很快,最主要的原因之一就是CDN发挥了效果。一般小网站是用不起这服务的,所以慢点就慢点了吧,可以租用互联互通的6线机房(6线机房是指包括网通、电信、铁通、移动、联通、教育网等多线接入的骨干网IDC机房,彻底消除各地网络瓶颈,保证互联网访问畅通无阻的高速机房。)

顺便提一下,还有一个WordPress插件Free-CDN,号称也能达到类似的效果,虽然我还没有做过测试…

3、图片优化很重要

Yahoo! 有一个图片优化软件叫Smush.it可以最大程度无损压缩图片,不过,除非你超级有耐心,否则一张张压缩图片的话太浪费时间了,好在,还有一个很给力的WP插件叫WP-SmushIt,这货可以为你网站上所有的图片做一次性压缩,所以没有理由不去用它。

4、优化你的WP数据库

你可以用WP-Optimize这个插件来优化你的WP数据库(清理spam,反复改版的文章,草稿,表格等等为你的服务器腾出更多空间从而提升效率);还有一些插件如WP-CleanerDB-Manger等。

5、开启防盗链机制

盗链是带宽的窃贼,当其他网站直接引用你站点的图片的时候,这会影响占用你本身的服务器资源从而影响网站运行效率,你的站点越出名,就会有越多的人盗用你的图片,解决方法是Wordpress有现成的插件Hotlink Protection。当然也可以通过重写htaccess文件来达到同样的效果,欲深入了解的童鞋可以询问自己的空间商如何设置。

6、为文件添加过期时间

关于这个文件过期时间,听起来很玄乎,其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调用的背景图片和一些装饰性图片)其实在很长一段时间内这些图片都不会有很大的变化,所以对这类文件我们不妨设置长一些的缓存时间,这样浏览器就不需要每次从服务器下载这些文件而直接从缓存中读取,这样绝对可以提升加载速度。

当然,所以做法很简单,只需要在网站的.htaccess文件中加入以下代码,

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

稍微解释一下,text/css表示样式表文件,text/plain代表的纯文本类文件,依次类推。其中A2592000就表示这种类型文件在浏览器中的缓存时间,以秒为单位。一天86400秒,2592000就表示这类文件可以缓存30天。

如果你不是经常修改模板,那样式表文件和javasctipt文件基本上也可以设置缓存一周到一个月左右。text/html文件不要设置太长的缓存时间,因为这些东西修改的频率很高,一天更新一次是有必要的。

7、为你的图片添加延时加载

延时加载就是当用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这玩意儿不仅可以提升站点载入速度,更是可以节省带宽。要轻松的拥有这项功能,请安装WP的jQuery Image Lazy Load 插件吧。

8、控制文章草稿存数数

通常一篇博文我会保存10次以上的草稿,而Wordpress会无限制的存储每个草稿;如果我的博文已经发布了,为啥我还需要这些储存的草稿文章呢?所以这就是为啥我会用 Revision Control 插件来确保这些草稿内容的最小化。通常我会设置只存储2-3篇草稿来防止万一,但存储的数量绝对不会太高,否则你的WordPress backend只会被这些无意义的内容塞满从而降低运行效率。

好了,今天的分享就到这里,希望对大家有帮助,其实这些要点不仅仅对Wordpress有帮助,对其他开源网站也同样奏效。:-)

本文作者: Fimen

注:本文转载自:http://www.wpcourse.com/8-methods-speed-up-your-wordpress.html

淘宝店铺导航栏CSS代码之分步详解

  1. /* 第一部分、静态背景颜色 */
  2. /* 1、首页/店铺动态/其它导航类目的背景色,这里设为红色 */
  3. .skin-box-bd .menu-list .link{background:red;}
  4. /* 2、所有分类的背景色(最左边的),一样设为红色 */
  5. .all-cats .link{background:red;}
  6. /* 到这里,发觉右边的颜色还没有变呢,好的,接着下一步 */
  7. /* 3、导航条整个分类段背景色,还是要设为红色,整体布局好看些 */
  8. .skin-box-bd .menu-list{background:red;}
  9. /* 注意观察,最右边还有一丝地方没有变 */
  10. /* 4、导航条背景色(是最底层了吧),修补导航右侧缺口,再设为红色 */
  11. .skin-box-bd{background:red;}
  12. /* 小结:有点成功感了!换换其它颜色试试看吧 */
  13. /* 背景色最好搭配页头背景图,才能整体大气美观 */
  14.  
  15. /* 第二部分、分隔线、静态文字的颜色 */
  16. /* 5、首页等分类的右边的分隔线颜色,设为白色 */
  17. .menu-list .menu{border-color:white;}
  18. /* 6、所有分类的右边的分隔线颜色,设为白色 */
  19. .all-cats .link{border-color:white;}
  20. /* 7、首页/店铺动态/其它导航类目的文字颜色 */
  21. .menu-list .menu .title{color:yellow;}
  22. /* 8、所有分类的文字颜色(最左边那个),*/
  23. .all-cats .link .title{color:yellow;}
  24. /* 小结:其实原来默认文字的颜色也挺好的 */
  25.  
  26. /* 第三部分、分类下的颜色 */
  27. /* 9、二级分类的背景色,设为灰色 */
  28. .popup-content{background:gray;}
  29. /* 10、三级分类的背景色,我设为深灰色 */
  30. .popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
  31. /* 11、二级分类的文字颜色,设为黄色 */
  32. .popup-content .cat-name{color:yellow;}
  33. /* 12、三级分类的文字颜色。(如果后面要鼠标滑过变色<21.22>,这句要写) */
  34. .popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
  35. /* 小结:上面这句不写,和二级分类颜色是一样的 */
  36.  
  37. /* 第四部分、鼠标滑过变背景色 */
  38. /* 13、鼠标滑过首页/店铺动态/其它导航类目变换背景色,这设为蓝色 */
  39. .menu-list .menu-hover .link{background:blue;}
  40. /* 14、鼠标滑过所有分类(最左边那个)变换背景色,这同样设为蓝色 */
  41. .all-cats-hover .link{background:blue;}
  42. /* 15、鼠标滑过所有分类下的二级分类变换背景色,这设为蓝色 */
  43. .popup-content .cats-tree .cat-hd-hover{background:blue;}
  44. /* 16、鼠标滑过所有分类下的三级分类变换背景色,这设为深蓝色 */
  45. .popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
  46. /* 17、鼠标滑过导航类目下的宝贝分类变换背景色,这设为蓝色 */
  47. .menu-popup-cats .sub-cat-hover{background:blue;}
  48. /* 小结:这个所有分类,与首页后面的,是要分开设计的 */
  49.  
  50. /* 第五部分、鼠标滑过变文字颜色 */
  51. /* 18、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色,这设为红色 */
  52. .menu-list .menu-hover .title{color:red;}
  53. /* 19、鼠标滑过所有分类(最左边那个)变换文字颜色,这同样设为红色 */
  54. .all-cats-hover .link .title{color:red;}
  55. /* 20、鼠标滑过导航类目下的宝贝分类变换文字颜色,这设为红色 */
  56. .menu-popup-cats .sub-cat-hover .cat-name{color:red;}
  57. /* 21、鼠标滑过所有分类下的二级分类变换文字颜色,这设为红色 */
  58.  .popup-content .cat-hd-hover .cat-name{color:red;}
  59. /* 22、鼠标滑过所有分类下的三级分类变换文字颜色,这设为红色 */
  60.  .popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
  61. /* 小结:这部分还是默认白色的好看 */
  62.  
  63. /* 第六部分、导航项目激活状态 */
  64. /* 23、激活项目的文字背景色(难看,所以none)、文字颜色(选白色) */
  65. .skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
  66. /* 24、激活项目的项目背景色(项目框),选紫色 */
  67. .skin-box-bd .menu-list .menu-selected .link{background:purple;}
  68. /* 小结:最多人忽视这部分,其实也是很多人想知道的 */
  69.  
  70. /* 总结:如果可以的话,搞个傻瓜式的编辑器,就不简单了吗 */

 

 

---------------------------------------------------------------------

1:颜色代码可以是英文单词,如white(白)、black(黑)、red(红),

     也可以是白色#ffffff、黑色#000000等等表示。

2:背景色也可用图片,如:{background:url(图片地址);}