WEB应用

小网站最简单实用的动静分离优化方案

很久没写文章了,博客已经长草了,今天挤点时间分享一些小干货,也是回应一下不少站长朋友的留言问题。 有不少站长朋友问张戈博客的静态文件为啥是另外一个域名?有啥好处?如何实现? 其实这算是一种动静分离的做法,不过我这里用了偷懒的办法实现,而非彻底的动静分离,不过最终效果的区别并不大。 先啰嗦一下动静分离的概念和好处。 一、动静分离 我们的网站简单来说分为2种数据资源,一种是动态的数据,即PHP等程序语言实时吐出来的数据,在网页内容上主要是HTML代码,另一种则是静态资源,比如图片、css、js、视频等(当然,图片等资源也可能是实时动态生成的,比如PHP缩略图,这里就不展开讨论了)。 一般网站初建,因为流量小、业务简单等原因,都默认将两种数据放到一台服务器上提供服务。访问量大到一定程度之后,就可能出现带宽不足、甚至磁盘高IO等问题。这时,作为运维工程师或者架构师就会给出动静分离优化的建议了。做法并不复杂,运维工程师会将图片等静态资源同步到另一台WEB服务器,然后新增绑定一个二级域名,比如static.domain.com,最后让开发将网页代码中的静态资源替换成这个二级域名即可。 这样一来,图片等静态资源的访问就落到了新增的服务器上,从而分担了大部分访问数据流量和IO负载,我们还可以针对性的给静态资源WEB做一些优化,比如JS/CSS/图片压缩、内存缓存、浏览器缓存等等。进一步,我们还可以将静态资源接入CDN,实现资源就近访问。 可以用一张图来表示: 二、好处分析 1、常规做法的好处 从上文的通俗解释来看,很明显的一个好处就是解决带宽问题,像博客圈子里的服务器,绝大部分主机都是国内的小管道云服务器(带宽小于2M),并发访问量上来之后,就能很明显的感觉到带宽成为了瓶颈。 不过,博客圈大部分都是“一穷二白”,一般都不愿意再买一台服务器来专门承载静态资源,而且多台服务器之间的数据同步等日常维护问题也变相提高了折腾门槛。因此,国内大部分小博客都热衷于套一层CDN来解决带宽问题,确实是一个很好的解决方案。在《分享张戈博客的WordPress优化方案,缓解国内云服务器配置低下的问题》一文中,也是特别提到了这一茬。 2、本文分享方案的好处 上文说张戈博客使用了一种偷懒的方案,做法很简单:网站只用一台服务器,但是会新增绑定一个和主站完全不一样的二级域名,比如张戈博客主站是zhang.ge,而二级域名用的是 res.zgboke.com,并且给这个二级域名套了一层CDN。 这样做又有什么好处?和直接套一层CDN(比如云加速)有什么不同? 第1个好处:显而易见比常规动静分离成本更低,分离前后服务器数量不变; 第2个好处:解决主站直接使用一级域名带来的cookies“污染”,即静态资源不会再带上主站的cookies数据,减小了体积。这个在上文提到的优化方案一文中也着重提到,详细就不再赘述; 第3个好处:这个方案对于网站内容没法备案又想体验国内CDN加速快感的网站绝对是福音!很多网站因为内容特殊(邪恶脸)没法完成备案,所以无法使用国内的CDN,那么就可以用本文分享的方法,直接花钱买一个备过案的垃圾域名,做好动静分离,然后将这个二级域名接入国内的CDN,网站速度绝对可以得到质的飞跃,是不是爽歪歪? 第4个好处:这个和第二个比较类似,主要针对在百度云加速购买了付费套餐的朋友。因为,对于一般流量的网站,你只需要在百度云加速给一个域名购买一个专业版,那么就可以分离多个二级域名给N个网站使用,那么多个人合买一个专业版完全不成问题吧?当然,现在百度云加速也学聪明了,现在流量限制50G/天(我开始用这个方案的时候无此限制),但是对于普通网站已经很够用了!!! 第5个好处:CDN配置更加比较简单,因为这种静态二级域名,接入CDN之后,完全不用考虑缓存规则的问题,因为直接设置成全部缓存就好了!简单粗暴。 三、部署教程 啰嗦了好长篇幅,下面给出具体做法! 原理贼简单,就是在服务器上利用反向代理新增了一个新网站,内容则是反向代理了我们的主站,从而实现了2个域名共享相同的网站数据。 Vhost示范规则如下: 这样就在本地新增了和主站共用一份数据的二级域名,只提供静态资源访问,其他访问都跳到主站对应页面。 完成新增后,只需要使用以前分享的七牛CDN代码或者CDN插件,将网站的静态资源替换为这个新二级域名,比如以前分享的纯代码版,加到functions.php即可完成替换: 完成部署后,我们网站的前台页面中的图片、js等静态资源链接就全部换成了新的二级域名了。 Tips:其他部署方法 如果网站未启用https,完全可以更简单,只需要在我们的主站vhost配置的server_name参数中新增一个域名即可,比如: server_name zhang.ge res.zgboke.com; 当然,强迫症患儿们,还可以根据域名判断,来进行上述Vhost类似跳转,此处就不展开了。 同样的,对于虚拟主机来说,只需要在虚拟主机控制面板中新增一个二级域名绑定即可。但是这个方法不适用于https站点,因为一般的https证书并不能用于2个完全不一样域名。 最后,我们将这个二级域名接入CDN即可,接入方法就不啰嗦了,自己折腾吧!
阅读全文
网站建设

博客网页导致电脑CPU飙升的问题解决记录

已经有好几个访客朋友匿名反馈只要打开我的博客电脑的CPU就狂转: 因为忙一直也没当一回事,一是我自己的MacbookAir打开并没有异常,二是因为我近期都没进行过折腾改造,不应该有问题才对。 直到今天空下来才想到这个问题还没去验证一番,于是让几个朋友试了下,都反馈确实有问题!Windows下CPU狂转,MAC下风扇呼呼响(奇怪的是我的MAC没问题),看来确实有必要解决下了。 我对于网页导致CPU飙升,也没听过说过有什么解决套路,问了几个前端朋友也说不好定位(有知道的朋友可以留言分享下),只能骑驴找马试试看了。 首先,我看了下是否因为的CSS大括号写成全角带来的问题,结果并未发现异常【相关文章】; 然后,在火狐、谷歌查看了下开发者模式,发现也没有明显报错,又陷入了僵局; 2017-11-12补充:上次排查认为是防镜像代码出现死循环导致CPU爆卡,于是对代码做了下规避,结果还是有朋友在文章下面留言说爆卡!说风扇呼呼响,CPU 100%,有点诡异!主要是我的Mac Book Air并没有出现风扇呼呼响的情况,以为好了。于是开着博客网页看了下top命令,结果发现CPU100%++,看来依然没解决!尼玛。。。 实在没辙,于是打开了使用了相同主题的知更鸟博客试了下, 发现也是100%++,看来是通病。于是顺着看了几个用知更鸟主题的网站,发现有部分又是没问题的。。。 于是从外观上看了下差异,一眼就看到了Logo扫光特效!!!一闪一闪的很有可能是真凶了!于是看了下没问题的博客,发现都没开这个特效,当我把这个特效关了之后,CPU负载瞬间就陡降了! 所以,造成CPU爆卡的原因之一是:知更鸟主题的Logo扫光特效! 拓展:这功能本来也没什么L用,华而不实,一直忙就忘记关掉了,现在发现居然会导致CPU爆卡,试了几个使用了这个特效的网站,也存在同样的问题,大家可以试下。 简单看了下扫光特效的CSS代码,主要使用keyframes来实现的动画,因此也看了些资料。验证这个特效是否会导致CPU上升,可以点击如下网址测试效果: http://www.runoob.com/try/try.php?filename=trycss3_keyframes 反正我点击运行之后,CPU至少升到60%+,如果再加快速度,CPU负载会更高,有兴趣的朋友可以自己测试玩玩。 造成CPU负载较高的原因之二是:底部滚动推荐条! 关掉扫光之后,顺便测试了下我博客底部的滚动条,发现也会带来较高的CPU负载,如果发现风扇依然呼呼的朋友,可以再关掉滚动条试下。。。但是,这个功能我就不去掉了,总要有所取舍。 造成CPU负载较高的原因之三是:防镜像代码中存在死循环。 三个问题全部规避试了下,使用QQ浏览器时,CPU负载依然在50%左右,使用谷歌基本只有20%以下,估计和浏览器内核版本也有所关系,暂时找不出问题了,以后再看看吧! 下面是之前排查过程,无关紧要。 按照我个人经验,这种导致CPU爆卡的肯定是有什么死循环之类的js定时任务导致的。于是按下F12瞄了下有没有异常代码,结果一眼就瞄到了很久之前加入的防止镜像的img+js代码【相关文章】: 几乎本能的确定就是这个代码导致的,这段代码的防镜像原理是指定img为错误的src地址,然后触发onerror错误事件来进行域名判断的,这个过程应该是个死循环,也就是不断的产生onerror事件和域名判断,从而带来了CPU飙升问题。 于是注释了这段代码,让朋友试下,结果一切恢复正常了,果然这就是真凶! 目前没时间研究这段代码的兼容性问题,只好先注释了。理论上应该只需要给这个事件逻辑加上一个延时机制,比如延时个1s以上,应该就可以解决了,也就是和while true不加sleep一样的道理!感兴趣的同学可以去研究研究。 好了,这个问题就记录到这,用到这段代码的朋友也可以看看是否存在相同的问题。 20171021补充:博友【时光在路上】已经留言告知解决onerror事件导致死循环的方法,感谢! 解释如下: 当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环。 为了避免死循环的情况,我们可以在执行完onerror事件后,置于onerror=null 来清除onerror事件,参考代码如下: 原文地址:http://www.cnblogs.com/52php/p/5677847.html 果然,还是和我猜的那样存在死循环问题,本来想着循环判断也挺好的,所以只需要加一个延时,应该就可以解决高负载的问题。不过onerror既然可以清空,那我还是使用清空方案吧! 修改后的防镜像代码如下: 原代码中新增this.onerror=null;来置空onerror事件即可。 看来还是认知不够用,只想到了死循环可以加延时来解决,却忘记了搜索引擎找下【onerror死循环】相关问题解决方法,失策失策。 无聊继续看了下, 发现我前面想的延时方案也已经有前人分享过了,这里继续拓展延伸一下: img加载图片偶尔会出错,利用onerror可以加载一个缺省图片,也可以重载同一张图片。 但是都要考虑,重载的图片仍然错误,就会陷入死循环。 下面给出一个带重试次数,并且延迟加载的实现,超过重试次数仍不能正常显示的,显示缺省图片。 原文地址:http://www.iteye.com/topic/1118362 当然,防镜像那个代码就没必要弄这么复杂了,本文就记录这么多,有兴趣的自己去折腾吧。  
阅读全文
WEB应用

libmemcached编译安装报错解决记录

我负责的几个公司内部网站,仅集成了php原生memcache组件,不支持memcached分片存储的自动容灾方案,近期出现过几例因memcache服务器故障引起WEB爆卡的尴尬事,所以接到了一个给现网php集成memcached模块的需求。 内部的个别系统有多老、多难用我就不吐槽了,slackware、suse用过的人都知道。。。不说了,总之老老实实的编译安装吧。 memcached这个php模块依赖于libmemcached,所以集成前先要编译安装libmemcached。 按照常规编译方法,对libmemcached进行编译安装,结果如下报错: error: cinttypes: No such file or directory 查了下资料,发现是因为gcc版本过低,看了下系统当前的gcc版本,是4.1.2,决定升级之。 简单记录下gcc编译过程: 1、安装gmp 2、安装mpfr 4、安装mpc 5、安装gcc 对于这种老掉牙的服务器、程序,编译安装gcc的时候也不敢直接全局覆盖安装(编译不指定路径),于是将gcc-4.5.1安装到/usr/local/gcc-4.5.1 Ps:更多可选参数请参考官方文档。gcc编译安装必须注意依赖包的顺序,可谓环环相扣。 编译安装后,由于是指定的安装路径,所以系统用的依然是原来的gcc,所以为了本次编译libmemcached,需要将新版本软链过去,暂时使用(简单方案) 进入libmemcached源码目录继续编译,结果如下报错: error: bits/c++0x_warning.h: No such file or directory error: cstdint: No such file or directory error: tr1_impl/cinttypes: No such file or directory 真是醉人,明明都升级了还报错!没办法,继续耐着性子看信息,发现libmemcached在configure之后有如下统计信息: 赫然发现了图中还有个c++显示是4.1.2的老版本!!!于是,原来把c++给漏了,顺手补之: 再去编译安装,就行云流水,再无报错!后面编译memcached就不多说了,不会的可以参考前文教程。最后,记得取消gcc和c++的软链接,还原到4.1.2版本即可(当然,若无异常也可以继续保留)。
阅读全文
网站建设

分享一个网站防镜像以及解决七牛静态页面跳转的js方案

导读:作为站长,基本都遇到过网站被人镜像的烦恼吧?最典型的代表就是谷歌搜索,大家都懂的。很多时候反代我们网站的人可能就是拿你的网站练下手,学习下反向代理。当遇到网站被反代,而且排名还比你好的时候,有没有要暴走的冲动...本文分享一种简单有效网站防镜像的方案,适合任何html页面。 一、前人分享 挺早之前,看到boke112转载过一篇网站防镜像教程,分享了从.htaccess、php以及js三个方向禁止他人恶意反向代理我们的网站。当时看完觉得三个方法都不完善: 先分析下原理: .htaccess方案是禁止从代理IP过来的请求 js方案如果发现浏览器url地址不是预期的,那么直接跳转到我们规定的域名。 php方案的原理和js方案类似,通过 $_SERVER 变量判断域名判断请求是否符合预期,不是就跳转走。 再分析下缺憾: .htaccess方案,只要请求中含有代理IP(HTTP_X_FORWARDED_FOR不为空)就禁止访问,那如果用CDN的就全部GG了,而且这个值是可以在做反向代理的时候置空的,比如Nginx中可以这样做: php方案中,$_SERVER的值同样可以在反向代理时伪造,比如: 二、优化版本 已推出最终版,所以,此优化版本可以不用了 js方案,这个也是我今天要分享的方案,之前在boke112我也留言分享了张戈博客的做法,不过好像留言被删除了。文章中的js方案可是可以,但是是写死的跳转。也就是说不管在哪个页面,最终跳转都是首页!显然,这个方案还不够精细化,我们可以做得更细致! 所以,网站防镜像最简单有效的做法就是在<head>部分插入如下js代码即可: 这里对文章js方案做了更细致的改善,也就是跳转之前想将当前url做一次替换,把当前url中的域名换成我们规定的域名,确保跳转后就是用户想要的页面,而不是强硬的跳到首页! js方案相对于其他方案来说,它的优势在于无法在反代时伪造,浏览器反馈的就是真实的访问情况,直接粗暴。当然,用 Nginx 的第三方内容过滤模块 ngx_http_subs_filter_module 也可以对反代的页面内容进行过滤,当然这是更高级的手法了,这里就不深入介绍了(请注意这段话,本文分享的只是一个方案,并非绝对有效的方法!!)。 三、最终版本 ①、WordPress专用版 龙笑天下很好的整理总结了目前几种防镜像的js方案,我看到最后一个借助了img的onerror事件,想法不错,就重新写了一个更简洁,兼容性更好的代码: 将此代码添加到主题functions.php文件当中即可。其他类似js可以不用上了,不过也不会冲突。 Ps:本来是丢到wp_head的,经过测试发现图片放到head,浏览器会自动进行错误调整,导致一些本来在head的元素被丢到了body当中,比如style.css,估计网页标准中head里面就不应该放置图片,所以移到了footer当中。 2017年10月21日补充:这段代码会因为onerror死循环造成浏览网页的电脑高负载(CPU飙升),因此在代码onerror触发事件中加入onerror清空机制,即加入this.onerror=null【相关文章】。 ②、HTML通用版 既然是js代码,那么肯定可以用于任何符合html规范的页面了。要不是为了可以放到wp的functions.php,都没必要写成php的模式,直接用html代码即可: 将以上代码中的 自行拆分成自己的域名,避免被镜像代码替换掉,比如: 然后将代码添加到网站的<body>之后即可(不建议放置到<head>里面,具体原因上文已说明),WP一般为header.php文件,其他建站程序请自行搞定,这个版本适合任何网页。 ③、通过UA禁止 JS版本效果确实可以,但是有一个小弊端,大部分搜索引擎不能识别js,所以蜘蛛还是能正常抓取镜像网站,有可能会影响SEO。要彻底解决镜像站问题,就得直接禁止镜像网站服务器抓取我们的网页。 有网站已经分享了通过获取镜像网站的服务器IP来禁止抓取,但是镜像网站换一个IP,或者还有其他镜像网站,都无法一劳永逸。所以,我们可以研究镜像服务器抓取时的特征,然后通过禁止特征来解决镜像问题,当然这个方法也不能绝对,因为特征很多时候都是可以伪造的,这里就不多说了。 14年张戈博客就就已经整理分享过网站反爬虫攻略:《服务器反爬虫攻略:Apache/Nginx/PHP禁止某些User Agent抓取网站》,其实这种镜像站和采集基本类似,所以我们需要先分析某一类镜像站的UA特征是什么。 抽空对此次站长朋友纷纷“讨伐”的几个镜像站进行了分析,其实就是在访问镜像网页的时候去查看我们的网站日志,我发现全部请求UA都是PHP/5.4.4: 想来也就明白了,这些镜像站点基本都是用的一套程序,甚至环境都是一致的!这让人很容易联想是不是一个人在搞事。。。 好了,废话不多说,既然知道他们的UA了,那么就很好解决了。直接将 PHP这个关键词加入到《服务器反爬虫攻略:Apache/Nginx/PHP禁止某些User Agent抓取网站》 这篇文章的UA清单中即可! 这里,只简单分享一下PHP代码和Nginx代码,其他的请参考前文。 PHP通用版: 将以上代码加入到PHP网站根目录的index.php的<?php 之后即可。 WP适用版: 如果使用上面的php版本,WordPress每次更新就会需要操作index.php,比较麻烦,因此弄个专版: 将以上代码添加到WordPress主题的functions.php中即可。 Nginx版本: 将以上规则加入到nginx的vhost当中,比如添加到第一个location 之前,然后重载Nginx即可。 我看到有同学使用了htaccess来判断UA,但最后却返回了一个301跳转到首页,虽然也可以,但是有时候镜像程序也是可以抓取301的目标内容的,至少我之前就写过支持301跳转的php代码。 好了,关于镜像网站的问题就整理分享这么多,大家自行选择适合自己的方案即可! 四、拓展延伸 另外,如果是使用https的网站,想将 http 的访问都跳转到 https 又不想弄个301跳转(可能影响SEO),那么上述js代码稍微改改就能完美跳转了: 看到这,你应该体会到了js的妙用吧?后续应该可以举一反三,多多利用了! 五、七牛镜像 用了七牛的网站,可以试试直接访问我们自定义的七牛静态域名,是不是和我们现在的网站一模一样呢?只是它不会更新而已。很多人肯定下意识的试过张戈博客,发现居然会跳转到对应的博客页面! 比如访问:http://static.zhang.ge/5100.html 会跳转到 https://zhang.ge/5100.html 于是,有不少朋友留言问我,怎么实现301跳转的?? 好吧,除非七牛帮忙在CDN节点做设置,将非静态资源请求都跳转到源站,否则张戈也是没办法做301跳转的。因此,你看到的跳转也不是301了,而是js的跳转! 实现原理就是上文介绍的js方案咯!七牛就类似于一个镜像站,而且是静态存储到了七牛节点,因此只能用js方案,在静态页面中实现判断和跳转。 所以,上文分享的js防镜像代码,同样适用于七牛静态页面的自动跳转。只是美中不足的是,大部分搜索引擎并不能识别这个跳转,为了SEO,那你还得继续使用七牛的robots设置了。 当然,如果你添加js代码之前就已经在使用七牛了,那么必须清空七牛中的缓存文件才行,否则是不会跳转的了!因为缓存的代码中没有这段js咯! 最新补充:有人留言说了更好的方案,在Nginx中判断七牛的UA以及抓取的路径就能杜绝七牛缓存不改缓存的页面,要实现也很简单,在Nginx配置中加入如下规则即可: 最后,再啰嗦一句,本文分享的只是小白入门级方案,喜欢喷的朋友建议早点Alt +F4,张戈谢谢你。
阅读全文
shell脚本实现整站缓存和预缓存,进一步提升网站整体加载速度 网站建设

shell脚本实现整站缓存和预缓存,进一步提升网站整体加载速度

在Linux中,shell脚本结合系统任务计划crontab,非常简单就能实现一些复杂程序才能完成的工作,开发成本低,且简单易学。 张戈博客之前也分享过不少shell在网站运营方面的妙用,比如: CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放 SEO技巧:Shell脚本自动提交网站404死链到搜索引擎 Linux/vps本地七天循环备份和七牛远程备份脚本 nginx日志切割及7天前的历史日志删除脚本 Shell+Curl网站健康状态检查脚本,抓出中国博客联盟失联站点 感兴趣的可以挑选看一看。 本文继续分享一个shell的实用案例:全站缓存和定时预缓存,进一步提供网站速度。 一、何为预缓存 用过WP-Super-cache插件的站长肯定都知道,这个插件有一个预缓存功能,开启此功能后,插件会对全站预先缓存一遍,并且后面还会定期更新缓存。 显而易见,全站预缓存的好处就是在用户访问之前,就已经生成了静态缓存,而不是被用户访问触发才生成缓存,那么所有用户来访问几乎都是静态缓存,不管是平均还是总体速度都会有质的提升!当然,最重要还是优化了蜘蛛抓取的速度! 大家去百度站长平台查看那个抓取频次的时候,可以看到蜘蛛的平均耗时数据,我博客做了静态缓存,按理说每个抓取都不会超过500ms,但是依然会出现一些十几二十秒的请求: 排除蜘蛛抓取的时候存在网络延时或并发负载等情况,还有一个很可能的原因就是蜘蛛正好抓取了一个缓存过期或缓存不存在的页面,也就是说蜘蛛抓取的时候,这个页面缓存正好过期被删除了,那么它抓取的时候就是动态页面,所以耗时就上去了! 因此,全站预缓存还是有必要的。 二、预缓存前身 见识到预缓存的重要性,那么就该想办法实现了。分享方法之前,先说一下灵感来源吧! 记得博客之前分享过各种Wordpress缓存方案,有php代码版本、有nginx的 fastcig缓存等等,当时有人问,有没有办法让sitemap也静态缓存(纯代码版本sitemap)? 当时是对sitemap.php伪静态成sitemap.xml的,所以是动态数据的,而且就放在根目录,所以直接访问sitemap.php也是可以的,由于是全站数据,所以这个文件跑起来很慢! 后来,我用linux命令+crontab就解决了这个需求:将sitemap.php放到某个不为人知的目录,然后定时使用wget去请求这个文件,并将数据保存为sitemap.xml存放到网站根目录就可以了!比如: Ps:使用这个方法,注意sitemap.php里面的 require('./wp-blog-header.php'); 要改成 require('../wp-blog-header.php'); 也就是注意相对位置! 这样一来,就解决了sitemap.xml是动态数据问题了! 三、全站预缓存 有了上面的案例,如果实现全站预缓存真的太简单了。 可以有如下多种实现形式: ①、已有缓存功能的博客 对于已有缓存功能的博客,比如安装了缓存插件,或使用了nginx缓存,那么只需要从数据库拉出所有文章id或别名,然后组成页面地址,最后使用wget或curl全部请求一遍即可实现缓存,比如: 但是,各个博客的固定地址可能不一样,所以这样拼接ID或别名,不能照搬,而且分类、tag等都没覆盖到位,甚是遗憾。 我也懒得研究如何从数据库弄出所有页面,最后用了一招偷懒的办法:从sitemap.xml中获取页面地址! 几乎每个网站都会有一个sitemap.xml文件,如果你网站没有,那么还是先参考前文弄一个吧! 所以脚本可以改成如下代码: 将此代码按实际修改后保存为 g_cache.sh ,上传到Linux系统,比如就放到 /root 目录,先手工执行看看是否成功: bash /root/g_cache.sh 如图,如果没有报错(图中的骇人速度无需在意,和磁盘IO有关),最后新增一个任务计划即可: duang的一下,就搞定了! ②、没有缓存的博客 没有缓存的博客,说明你不喜欢缓存,可能也没必要开启缓存,所以下面只是为了保持文章的完整性而写的,大家选择性看看就好! 没有缓存的博客,要全站预缓存有2个途径: 安装缓存插件或开启其他缓存后,再用方法①实现 我就不开启缓存,但是我还是要用全站预缓存,你说怎么办吧! 第1个途径就没必要啰嗦了,简单分享第2种如何实现吧。 从第①步中可以看到,我们只请求页面,但是不保存数据,全部扔黑洞了。那如果我将数据保存为对应的html文件,并存放在网站对应的目录下呢?那不就实现了和cos-real-html插件一样的静态缓存了吗? 很明显还是可以的!代码如下: 按照实际情况,修改代码中的网站根目录和缓存白名单,保存为 g_cache.sh 上传到服务器,接着我们需要新增一个Nginx 伪静态,其实就和之前wp-super-cache的一样: 保存之后,reload 重载 nginx 以生效。 最后,如下新建计划任务,定时执行 g_cache.sh: 如此就实现了wp-super-cache预缓存和cos-real-hmtl的静态缓存功能了。 四、最后的啰嗦 其实,个人觉得本文最大的亮点是最后一个脚本,及实现了缓存,也实现了预缓存,神马缓存插件、神马伪静态都可以丢一边了!而且,只要网站有sitemap.xml文件,那么就可以实现静态缓存,而且不局限与建站程序是什么! 但是,除了爽,我们还是有一些要注意的细节,请务必仔细看看。 ①、hosts解析 由于是在服务器本地全站抓取,为了提高速度,缩短路径,强烈推荐在hosts中将网站域名解析到服务器IP,不在走外部DNS解析,以减少解析时间,或者CDN消耗。 很简单,编辑 /etc/hosts 文件,在里面插入一条解析即可,比如: 127.0.0.1  zhang.ge 最后,保存即可。 ②、生成间隔 文章中分享的计划任务都是1天一次,如果你觉得有必要缩短间隔,可以自行修改crontab语句,具体可以搜索下crontab配置,了解crontab中 分 时 日 月 周得定义,此处不再赘述。 ③、缓存删除 本文只分享了如何生成缓存,并没有说如何自动删除缓存。整体上来说,反正crontab会定期重新生成缓存的,原则上并不用去理会自动刷新缓存。 但是,往往一些强迫症看到评论不刷新,文章修改了也不刷新,就抓耳挠腮,好不舒服。所以这里还是指明一条出路。。。 对于已有缓存功能的网站,使用这个预缓存脚本,实际上不会有任何影响,之前有自动刷新缓存的话,现在依然会刷新,无需操作。 对于使用最后一个脚本的网站,也就实现了和之前分享的php生成html缓存同样的功能,如果想更新文章或提交评论的时候删除这个缓存,可以参考博客之前的文章,修改下缓存路径即可搞定: WP Super Cache静态缓存插件纯代码版(兼容多域名网站) 哦了,分享到此,有事留字。。。 最新补充:偷懒用sitemap.xml的方法感觉有点Low,所以还是提供一下没有sitemap.xml的方案吧!为了不和上面的内容混淆,还是另起一页,有需求的可以看看,没需求的请忽略。
阅读全文
网站建设

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。 不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 shortcode 图标调用功能。 下面说一下集成到主题的方法: 一、下载上传 下载并解压后得到 awesome 文件夹,整体上传到WordPress主题目录。 二、主题集成 编辑WordPress当前主题目录下functions.php文件,在<?php  之后添加如下代码: 最后保存即可。 三、图标使用 图标字体的使用,相信大部分Begin用户都已经熟知了。对于首次使用的用户,张戈博客还是继续介绍下好了! 先贴一下效果截图,了解一下图标字体是个什么东东: 其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。   理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加class来添加即可。 比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可: 而我们想要更多的图标,就需要到官方的图标库里面去查找了: http://fortawesome.github.io/Font-Awesome/icons/ 找到自己中意的图标后,点击打开即可得到相应的标签class了! 那如何使用到 WordPress 导航菜单呢? 很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的class填入到CSS类即可,比如我在官方图标库查到“家”图标的class是 fa fa-home,所以我如下填写: 保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。 如果发现点开菜单没有 CSS 类栏位怎么办? 很明显,你没把这个功能开出来。点击菜单页面右上方的【显示选项】,勾上CSS类即可: 如果发现点击【显示选项】没动静怎么办? 看来你的 WordPress 也是升级4.2了。解决办法见张戈博客之前的分享【修复WordPress 4.2问题】 四、更多折腾 好了, 做完上面的操作后,就可以彻底删除 font awesome 4 menus 这个插件了,强迫症们是不是又感觉轻松了一些呢?哈哈! 不过,有心的朋友可能发现了,这个图标字体的CSS文件达到20多kb,而我们真正要用的也就几个到十几个图标而已!所以,喜欢折腾的朋友可以进一步精简一下CSS文件。 打开 awesome 文件夹,编辑css文件夹下的 font-awesome.min.css 文件,删除没用到的图标css定义即可。 不过这个 font-awesome.min.css 文件是压缩后的,看起来很晕!可以先百度搜一下CSS美化工具,将其格式化之后再来编辑! 不过CSS前面引入字体和公用样式代码记得要保留,如下所示 好了,本文就分享到这里,喜欢折腾的朋友可以试试看。
阅读全文