家里养狗狗或养个老婆，难以避免的是
掉毛
以至于厕所管道堵住，例如地面排水，例如洗脸水槽
在研究CSS之余，我曾在初中时代痴迷于物理学结构工程学
那么科学经济的解决方案就很简单
去地摊花3块钱买个皮搋(chuai第三声)子（沃尔玛里标记为皮老虎）不知道全国各地都叫啥
然后对准堵住的管道，放点水，一阵 ooxx，100%能通
注意点：
1、不建议用平时x马桶的，那个太恶心，去新买
2、不建议去买好的，浪费钱，地摊货就可以了，找个平整地面按下去拔不出来就表示弹性和封闭性不错
3、不建议找物业或管道工，浪费钱
BTW：1.晚上稍候会写一篇详细的SSH搬家攻略 step by step
2. 打老婆插件由于这几天要陪老婆经常跑医院，更新频率稍微放慢点……
HTML5让世界变得更美好，打老婆(beatWife) v4.1战斗系统 融入声优志玲配音（源自魔兽世界台服某BOSS）
插件地址 https://chrome.google.com/extensions/detail/cgoebjgkiiapifcpclljbdbmmodmmdff
代码很简单
<audio src="beatWife.mp3"></audio>
用JS的话根本就不用写标签，直接new一个玩儿
var snd = new Audio("beatWife.mp3");
snd.play();
有性趣的同学继续深入 http://www.w3.org/TR/html5/video.html
===分割线===============
ubuntu10.04 chromium 跑 .play()的时候提示undefined，Google了下貌似确实支持不好
求教有无解决方案……？
高举爱老婆旗帜勇往直前（就和小学生手册一样，先宣誓再干坏事）
为了让自己在学习新技术新知识的道路上越走越远，最近偶正在整一个 Chrome 的扩展
他就叫挣钱花 beatWife 打老婆！
有 Chrome 的同学可以玩一把图个乐子，木有的同学可以下嘛
插件地址 https://chrome.google.com/extensions/detail/cgoebjgkiiapifcpclljbdbmmodmmdff
乐此不疲哇，保持一天至少发一个版本
v1 hello wife v1.1 bug: 暂时移除计数 v2 增加弹出以及大按钮（和咪咪一样越大手感越好）&& 修复计数bug v2.1 增加彩蛋 [konami] v3 增加选项页面 （重置/隐藏计数）我恨星期一 v3.1 右键点击小图标可以进入选项设置，现在你可以换妻了?呸呸呸，我的意思是换个人来揍 v3.6 增加了隐藏头像 && 启用通知系统（我知道你讨厌QQ弹窗） v3.7 样式了一下选项页
目标是做一个涉及所有能涉及技术的 helloWife
然后分享之～
计划内的功能
1.上传硬盘图片（其实用canvas或php转为base64存到HTML5离线存储里）
2.丰富抽打反馈（CSS3 -webkit-等，还有诱人的canvas）
3.抽打排行榜 （例如被抽最多的图，抽最多的数量，等SNS元素）
4.华丽上流的视觉（高速发展期，功能优先）
一定要坚持啊，某个删WOW删了几十次木有丝毫毅力的人
==V7.1================
新增DNS和DNS反查以及你是哪个单位的?
主要还是查询提速…俺庙里的服务器直接输出
本地缓存最后一次查询
插件地址 https://chrome.google.com/extensions/detail/cgoebjgkiiapifcpclljbdbmmodmmdff
Gravatar 是 Globally Recognized Avatars (地球人公认的阿凡达)
可以去 http://gravatar.com/ 关联你的 Email 和头像
这样子在任何启用 Gravatar 的博客留言,即可显示对应的头像
例如 i(a)ooxx.me 对应的是
一个 Gravatar 是服务器动态返回的图片,下面是一坨 src 图片地址
http://www.gravatar.com/avatar/ddb61c44b09ee3e8cb2700249ec9eac7&r=X&s=80我们来肢解一下
Gravatar 总是以如下URL开头
http://www.gravatar.com/avatar/接下去是 E-mail 对应的 Hash 结果, 这 E-mail 地址在 hash 之前必须要小写,并且要木有空格
ddb61c44b09ee3e8cb2700249ec9eac7然后是 rating 分级, 有[ G | PG | R | X ] 4档
(在网站设置头像的时候会让你分级,建议选G)
约X的头像越不和谐,用专业的英语就叫 hardcore sexual
网址里这个分级设置的是容许最极端的那档
例如网址设置容许G,那么只有G的头像会显示
容许PG 会显示 G 和 PG
容许X 会显示 G 和 PG 和 R 和 X
&r=X最后是 size 图像尺寸 , 有效范围是1到512
&s=80还有一坨可选的默认头像地址,就是说如果email找不到对应的头像了或者不在分级范围内,就用这张默认图
可选参数为
* ‘404’ (返回 a 404)
* ‘mm’ (mysteryman)
* ‘identicon’ (unique, generated image)
* ‘monsterid’ (unique, generated image)
* ‘wavatar’ (unique, generated image)
都是些奇形怪状的丑图,建议自定义一张拉轰的(http://bigc.at/me.jpg)
&d=http%3A%2F%2Fooxx.me%2Fme.jpg那么在主题里调用 Gravatar 就很简单的用
<?php
echo get_avatar(i@ooxx.me,50);
?>
这里的邮件地址可以用 get_the_author_meta(‘user_email’) 获取本文作者的email
如果用在评论循环里,可以用 get_comment_author_email() 获取当前循环里的email
记得小写哦 strtolower(get_comment_author_email()) 会自动转为小写
记得MD5哦 md5(strtolower(get_comment_author_email())) 会进行 hash
加起来就是
<?php
echo get_avatar(md5(strtolower(get_comment_author_email())),50);
?>
会吐出来
<img alt='{$safe_alt}' src='{$out}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />不幸的是get_avatar()默认吐img标签
幸运的是如果只要src值,可以这么写
<?php
echo "http://www.gravatar.com/avatar/".md5(strtolower(get_comment_author_email()))."&r=X&s=80";
?>
挨吻老湿就是这么写再结合jQuery 配合 CSS3 搞图片圆角来输出头像滴
点这里看
开始本文之前请先阅读 WordPress 技巧：不用插件实现 Pagenavi 功能
接着是一坨广告：如果有企业要建站，推荐凶器 WP Jam
然后开始正文：
根据先阅读的那篇文章，教偶们如何用 wordpress 自带函数实现 pagenavi 功能
整完后输出的就是12344567的数字了
但还木有实现 pagenavi 的表现,也木有 左边那坨当前页面/总页面指示数
这就是为啥要写这篇文章的原因了
pagenav的缺点：多一个外挂样式表 一个http 请求是非常占速度的，可参考yslow说明书
以插件形式载入，虽然灵活，但以性能为代价
因为水煮鱼已经介绍过了，我直接就说修改的地方了，输出结果可以参考截图
第一步：在 functions.php 的 <?php 和 ?> 之间插入
function ooxx_nav(){
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => '« ',
'next_text' => ' »'
);
if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg('s',get_pagenum_link(1) ) ) . 'page/%#%/', 'paged');
if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array('s'=>get_query_var('s'));
echo '<div class="ooxx_nav"><span class="page-numbers pages">Page'.$pagination[current].' of '.$pagination[total].'</span>'.paginate_links($pagination).'</div>';
}
第二步： 在 style.css 里插入
.ooxx_nav{clear:both;margin:5px -2px;overflow:hidden;zoom:1;text-align:center;}
.ooxx_nav .page-numbers:hover{background:#FF3D86;color:#FFF;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .page-numbers,
.ooxx_nav .dots:hover,
.ooxx_nav .pages:hover{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#FFF;display:inline-block;float:left;height:18px;margin:2px;min-width:28px;_width:28px;padding:1px;}
.ooxx_nav .page-numbers:visited{opacity:0.5;}
.ooxx_nav .current,
.ooxx_nav .current:hover{background:#7BAFA7;color:#FFF;font-weight:bold;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .pages,
.ooxx_nav .pages:hover{color:#CCC;width:120px;}
第三步： 在需要导航的适当位置，例如index.php search.php 里插入
<?php if(function_exists('ooxx_nav')) {ooxx_nav(); } ?>
要直接用的拷贝上头代码直接用即可，听解释的继续看
第一步里 function ooxx_nav() 作用就是新建一个输出页码的函数，名字随便来，当然调用的时候要对上
这里改动不大
1. 基于语义考虑<p />标签改为<div />，当然最好改成<nav />如果你已经createElement的话，哈
2. 调用变量 $pagination 数组里的当前页和总页数组重新合成左侧那坨功能
3. 左箭头和右箭头用字符实体标示一下更规范
第二步里 你可以根据自己的主题修改颜色
box-shadow 为页码数投影
border-radius 为圆角程度
-moz- firefox 私有
-webkit- chrome safari qq浏览器 maxthon 等webkit内核私有
不细说，有需求留言即可
第三步加入 function_exists() 判断 ooxx_nav() 是否存在，要是不存在也没关系
如果不加判断，天会塌下来
–update–
感谢 yun77op 找茬
'base' => @add_query_arg('page','%#%'),
应改为
'base' => @add_query_arg('paged','%#%')
少了个d,非permalinks固定连接的同学会链接失效
挨吻老湿分享了一坨圆角图像的另类实现方式文章 CSS3 Rounded Image With jQuery
很赞,翻译了下记录一把
开始之前,可以先把 Demo 点开对照着看
目标
目标是用 CSS3 border-radius 和 box-shadow 来实现如下图效果
左手: 圆角+外投影
你的右手旁边是我的左手: 圆角+内投影
问题
问题是这年头木有一档浏览器可以完美的在图片上应用圆角和阴影
webkit 可以显示圆角,但木有内投影
firefox 和内裤被戳破一样还坚挺的直着
CSS 淫技
灰常简单: 在图片外头套一层超薄<span />然后把原图作为 background-image.
要隐藏原图的话,可以 opacity:0 或 display:none
偶发现 opacity 更淫荡点,因为这么整用户还能图片另存为
当然出于某些阴暗目的或光明磊落隐私考虑,可能会偏向 display
最终用 jQuery 的解决方案
本着怎么偷懒怎么来的原则,我们用 jQuery 来自动给图片套<span />
不解释, 上代码先
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
接下来开始解释
1. 调用 jQuery 库
2. ready 就是 DOM 全部加载后再触发的事件, 否则一旦有图片的 DOM 节点后于 JS 加载,就会绑定不到
3. $(“.rounded-img, .rounded-img2″) 选中所有 class 名为 rounded-img 和 rounded-img2 的元素
4. 给俩元素集绑定 load 事件 (偶很疑惑为何这么写)
5. 在每个图片外面包含一个 span, 这个 span 的 class 为原元素的 class ,这个 span 的 style 里的 background 取值自原图的 src 值, 宽高同理
6. 给每个图片写个style=”opacity:0”
看起来素酱紫滴:
大猫的调整
$(function(){
$(".avatar").wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
}).css("opacity","0");
});
理由:
1. $(document).ready(function(){}) 相当于 $().ready(function(){}) 相当于 $(function(){}) ,貌似有这么一说,嘻嘻
2. class名改为 .avatar 如果你是 wordpress 的评论头像, 都封装好了,要改结构也不是很方便,哈
3. 去掉图片的 .load 事件, 因为如果图片从缓存中获取, 有可能就不会触发这个事件, 反正是 DOM ready,霸王硬上弓了
4. 直接用链式写法点花点月点秋香
然后你得在你的主题 style.css 加上那么几条
因为 webkit 的内阴影配合圆角就是一坨屎,所以我用外阴影了
iPhone 的safari 还不支持 inset 内阴影, 如果有内阴影控, 可以用线性渐变配合RGBA假装是阴影…
.avatar {
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background-image:none\9!important;
-moz-background-size:50px 50px;
-webkit-background-size:50px 50px;
background-size:50px 50px;
}
IE 呢?
screw you!
不过目前偶是弄个中间镂空PNG遮罩,多一个请求
要是平滑那还得PNG32
要是PNG32那IE6捏?
IE6用 AlphaImageLoader 滤镜一旦图片加载失败,整个页面就脱光了死给你看
screw IE!
Opera
这孩子长得漂亮,龙飞(dragonfly)也不错 就是没有用的欲望
10.x之后不用-o-了直接支持圆角阴影,值得鼓励
=====update===========================================
有bug了…如果图片是部分透明的IE下面的背景会透出来要写个hack
background-image:none\9!important;
加important的原因是路径是style写上去权重高,并且也不大可能后续越权的需求
background-size 这个属性也要写上,不然图片大小不一样很2的…
我的导师 挨吻 老湿神秘嘻嘻的发来家里路由器截图让我帮忙看看
大猫: 被蹭网?
挨吻: 郁闷
大猫: 关了SSID广播？
挨吻: 关了
大猫: MAC绑定, PSK 密码超复杂?
挨吻: 绑定了,密码是程序生成绝对复杂
大猫: admin:admin 改了?
挨吻: 也是超级复杂,自己都记不住的密码
大猫: 看来遇到高手了
挨吻: …
大猫: [熟练的按了alt+f2 输入 gcalctool 启动了计算器,12835+25014=37849]
大猫: 果然
挨吻: …
大猫: 是你路由器的MAC地址
挨吻: [关机面床]
不知道 wp-super-cache 的建议看一下最佳 WordPress 缓存插件：WP Super Cache补补课
这会儿后台直接升级Wordpress 3.0 花了1秒钟,感觉巨爽
wp-super-cache 顺手也升了,有几个特性还是要提一下
下面是翻译自官方blog的预缓存(Preload cache) 介绍
Preload the cache in WP Super Cache
看到本周帅气的下垂了么? 我上周日启用了 WP Super Cache 的预缓存(preload cache),这玩意儿明显的降低了服务器的负载,创建缓存时会有个峰值,很黄很暴力
我一直不鼓励用户使用预缓存,主要是因为文件数量会导致一些问题,如果你有几千个缓存文件,硬盘挂了会需要很长时间才能恢复.
(注: 有些主机商会限制文件数)
但反过来说,Google把速度作为一个网站的衡量标准之一.在过去,这个插件会忽略爬虫,因为爬虫每次只访问每个页面一次,缓存相对它们是毫无意义的.所有的页面都应该在 Google 还没开始爬过来之前就缓存好
(注: WP Super Cache 工作流程是第一次请求页面时把PHP+MySQL处理结果生成静态页面,再次访问时甚至都不用执行一行代码 )
如图所示,一旦你启动预缓存,它会挂载在 wp-cron 去获取100 个帖子, 过10秒后再去获取100个帖子 直到读完所有帖子. 它同时会禁止掉老帖子的垃圾回收机制,但有评论和新帖子的时候还是会干掉一些适当的缓存文件
目前它只缓存 文章页 (注:is_single()那种,中文差不知道咋翻译),貌似没啥必要去缓存 archive 或 tag 页,因为很多站已经写了 robots.txt去忽略这些页面
这次 WP Super Cache 的更新包括了
它还有一堆 bug 要修, 和其他功能要增加
愿意当小白鼠的可以尝试开发版本 from the download page ,有问题就反馈到 support forum
=====补刀======================
如何安装 WP Super Cache ?
答: 进入后台,选择左侧 plugins -> Add New ->输入 WP Super Cache 点 Search Plugs -> Install Now
小博客很适合开启全站预缓存
个人觉得没必要设置定时重新生成全站缓存,如果你老帖子变动不频繁的话
因为即使老帖子变动了,对应的也会自动生成
有同学问,我网站规模太小,是不是不需要缓存?
答: 缓存是为了自己爽, 提速不是一个段位
=====补2刀=====================
使用 (miao) 服务器的同学不用开启 gzip ,偶已经配置了默认压缩指定文件类型
也不用担心文件数的问题, 偶木有做限制
QQREADERD1F79C5048631991
果然日本队比中国队靠谱
1:0 了！
苍井空老师加油，我永远支持你
以上
球迷 大猫
PS 据说腾讯微薄上可以选球队了，欢迎 Follow
http://t.qq.com/bigcat
没有开的同学用如下邀请码
http://t.qq.com/invite/b418f5bba186a15c01ff
http://t.qq.com/invite/aa002d785eb4ded18881
http://t.qq.com/invite/70a084b48b011f2d4823
http://t.qq.com/invite/542d1f53f2f9b5c46991
http://t.qq.com/invite/eaa3208035a4f2b948ad
http://t.qq.com/invite/ccf3cdb06c707e5d44af
http://t.qq.com/invite/7d1abb5c2b4f9ba33545
http://t.qq.com/invite/0e59ab0989487b147cf9
http://t.qq.com/invite/b6e6ad9af318ba1caac5
http://t.qq.com/invite/4346a5d0257b03e31b15
http://t.qq.com/invite/f199391419e95e38f4d3
http://t.qq.com/invite/183716c6fded2bb39227
http://t.qq.com/invite/e7473a62854c4d1c47db
QQ 2010 正式版直接集成了微薄到面板里，方便的很
至于那个什么软件助手之类的，我也不知道什么时候就一起按上了
搬小板凳看和360互日
-update-
http://t.qq.com/invite/9f3370858070d4bb31a7
http://t.qq.com/invite/f3312da68c4b05a50fb3
http://t.qq.com/invite/79b47ceb0e525077787f
http://t.qq.com/invite/6417b9a5a64054e36ff9
http://t.qq.com/invite/22a170e947a410fd6ea1
http://t.qq.com/invite/0e59ab0989487b147cf9
http://t.qq.com/invite/eaa3208035a4f2b948ad
http://t.qq.com/invite/542d1f53f2f9b5c46991
-update2-
http://t.qq.com/invite/4754e4cbb28836e552a3
http://t.qq.com/invite/30ae2a92ab9c9e5a1a31
http://t.qq.com/invite/bf24dc0795fc9d7a1a51
http://t.qq.com/invite/ac99c639471ff3d1f503
http://t.qq.com/invite/086c45ce13fbeb9d20cf
-update3-
http://t.qq.com/invite/7e7c21fe4c83b9b4ba2f
http://t.qq.com/invite/9e4f67fa864b4dcfd5f3
http://t.qq.com/invite/9b78115a7351a2fd6923
http://t.qq.com/invite/9ecf8c598875027b4573
http://t.qq.com/invite/8527d2d89e9d29185795
-update4-
http://t.qq.com/invite/cb75d633176c0b97c4df
http://t.qq.com/invite/2aa236825d8699548a57
