大猫の意淫网志 » codex

如何获取 Gravatars 头像的路径

bigCat — Thu, 29 Jul 2010 16:32:31 +0000

什么是 Gravatar

Gravatar 是 Globally Recognized Avatars (地球人公认的阿凡达)
可以去 http://gravatar.com/ 关联你的 Email 和头像
这样子在任何启用 Gravatar 的博客留言,即可显示对应的头像
例如 i(a)ooxx.me 对应的是

Gravatar 是如何构建滴

一个 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://ooxx.me/me.jpg)

&d=http%3A%2F%2Fooxx.me%2Fme.jpg

那么在主题里调用 Gravatar 就很简单的用

这里的邮件地址可以用 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

加起来就是

会吐出来

不幸的是get_avatar()默认吐img标签
幸运的是如果只要src值,可以这么写

挨吻老湿就是这么写再结合jQuery 配合 CSS3 搞图片圆角来输出头像滴
点这里看

暧昧贴

不用插件实现 WP-PageNavi 功能(进阶版)

bigCat — Sun, 18 Jul 2010 05:26:57 +0000

开始本文之前请先阅读 WordPress 技巧：不用插件实现 Pagenavi 功能

接着是一坨广告：如果有企业要建站，推荐凶器 WP Jam

然后开始正文：

根据先阅读的那篇文章，教偶们如何用 wordpress 自带函数实现 pagenavi 功能
整完后输出的就是12344567的数字了

但还木有实现 pagenavi 的表现,也木有左边那坨当前页面/总页面指示数
这就是为啥要写这篇文章的原因了

pagenav的缺点：多一个外挂样式表一个http 请求是非常占速度的，可参考yslow说明书
以插件形式载入，虽然灵活，但以性能为代价

因为水煮鱼已经介绍过了，我直接就说修改的地方了，输出结果可以参考截图

第一步：在 functions.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 'Page'.$pagination[current].' of '.$pagination[total].''.paginate_links($pagination).'';
}

第二步：在 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 里插入

要直接用的拷贝上头代码直接用即可，听解释的继续看

第一步里 function ooxx_nav() 作用就是新建一个输出页码的函数，名字随便来，当然调用的时候要对上
这里改动不大

1. 基于语义考虑

标签改为

，当然最好改成

如果你已经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固定连接的同学会链接失效

暧昧贴

jQuery 配合 CSS3 搞图片圆角

bigCat — Thu, 08 Jul 2010 10:18:14 +0000

挨吻老湿分享了一坨圆角图像的另类实现方式文章 CSS3 Rounded Image With jQuery

很赞,翻译了下记录一把

开始之前,可以先把 Demo 点开对照着看

目标

目标是用 CSS3 border-radius 和 box-shadow 来实现如下图效果

左手: 圆角+外投影
你的右手旁边是我的左手: 圆角+内投影

问题
问题是这年头木有一档浏览器可以完美的在图片上应用圆角和阴影
webkit 可以显示圆角,但木有内投影
firefox 和内裤被戳破一样还坚挺的直着

CSS 淫技

灰常简单: 在图片外头套一层超薄然后把原图作为 background-image.
要隐藏原图的话,可以 opacity:0 或 display:none
偶发现 opacity 更淫荡点,因为这么整用户还能图片另存为
当然出于某些阴暗目的或光明磊落隐私考虑,可能会偏向 display

最终用 jQuery 的解决方案

本着怎么偷懒怎么来的原则,我们用 jQuery 来自动给图片套

不解释, 上代码先

接下来开始解释
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 '';
    }).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);
}

IE 呢?
screw you!

不过目前偶是弄个中间镂空PNG遮罩,多一个请求
要是平滑那还得PNG32
要是PNG32那IE6捏?
IE6用 AlphaImageLoader 滤镜一旦图片加载失败,整个页面就脱光了死给你看

screw IE!

Opera
这孩子长得漂亮,龙飞(dragonfly)也不错就是没有用的欲望
10.x之后不用-o-了直接支持圆角阴影,值得鼓励

暧昧贴

IE8 标准模式 max-width bug 求解

bigCat — Tue, 29 Jun 2010 14:48:19 +0000

今天遇到一挺郁闷的bug
IE8 标准模式
要实现如图的效果,图片宽度最大100px,小于100就自适应,
右边文字围绕左边的图

症状:
图片外容器宽度还是取决于图片原始大小而非max-width定义的大小

测试可跑如下代码

也可以看DEMO页
http://code.sh/lab/demo/bug_ie8_max-width.html

哪位大湿有无解决方案?

暧昧贴

预缓存(Preload the cache) WP Super Cache

bigCat — Mon, 21 Jun 2010 05:06:40 +0000

不知道 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 的更新包括了

更好的支持移动设备插件,例如 MobilePress (注:之前会有电脑访问出现手机界面的bug,不知道现在如何,有遇到问题的朋友请留言)
增加了缓存测试功能(注:之前只能通过查看页面源代码最底下的注释了解情况)
可设置只在评论更新的时候更新缓存,而不是前台或相关页面
Works in WordPress 3.0.

它还有一堆 bug 要修, 和其他功能要增加

愿意当小白鼠的可以尝试开发版本 from the download page ,有问题就反馈到 support forum

=====补刀======================

如何安装 WP Super Cache ?
答: 进入后台,选择左侧 plugins -> Add New ->输入 WP Super Cache 点 Search Plugs -> Install Now

小博客很适合开启全站预缓存
个人觉得没必要设置定时重新生成全站缓存,如果你老帖子变动不频繁的话
因为即使老帖子变动了,对应的也会自动生成

有同学问,我网站规模太小,是不是不需要缓存?
答: 缓存是为了自己爽, 提速不是一个段位

=====补2刀=====================

使用 (miao) 服务器的同学不用开启 gzip ,偶已经配置了默认压缩指定文件类型
也不用担心文件数的问题, 偶木有做限制

QQREADERD1F79C5048631991

滚烫贴

ssh 如何统计当前目录文件数

bigCat — Fri, 04 Jun 2010 17:08:46 +0000

很多主机暗地里会限制文件数量, 或有朝一日突发奇想想了解我的站有多少个文件捏?

只需要登录SSH运行如下命令
find . -type f -print |wc -l

虽然快餐式的命令很威武,但是要好好学Linux命令建议从基础开始,下面是解释
find 这是一个叫find的命令
空格
. 这个点表示当前目录
空格
-type f 这个type有8个值,其中 f 代表regular file
空格
-print 带这个参数为了把查找结果每行一个显示出来
空格
| 这根线,恩恩,它看起来像根JJ,但其实是个pipe
空格
wc 这个命令,厄... 这命令是用来显示新行,单词,比特数量的
-l 这个wc的参数相当于 --line 作用是显示总行数

总结成一句连贯的命令就是
在当前目录查找所有文件并把每行一个文件名的结果输出给wc
wc再数一下有多少行
也就是当前目录总的有多少文件数了

暧昧贴

MediaTemple 如何用SSH升级WordPress

bigCat — Sat, 20 Feb 2010 04:30:18 +0000

WordPress 真是越来越嚣张了, 传授一招用 SSH 几秒钟快速升级的方法如下
假设你老的wordpress文件就直接丢在根目录下

首先用SecureCRT或Putty等登陆上去
(帐号密码同FTP,端口问大猫)

登陆后会有个提示符,看似 DOS 胜 DOS 其实就是 DOS

MediaTemple 用户登陆后的默认目录是
(可输入 pwd 查看)

/var/www/vhosts/ooxx.me/

那么我们来输入

cd httpdocs

或

cd httpd 再按 tab 补全

进入httpdocs目录,也就是网站根目录

wget http://wordpress.org/latest.zip
中文版地址
http://cn.wordpress.org/
wp中文团队做的汉化
http://code.google.com/p/wpcn/downloads/list

这句就素获取最新的 wordpress 到当前目录

unzip latest.zip

解压缩出来一个wordpress目录,包含最新的文件

alias cp=cp

写这句是因为CentOS默认把 cp 映射为 cp -i 覆盖会提示,所以咱把他复位

cp -rf wordpress/* .

把 wordpress 目录下的文件复制并覆盖当前目录的文件

升级完成

扫尾(删除升级文件)

rm -rf wordpress/ latest.zip

或者

rm -rf wo 按tab补全 la 再按tab补全

暧昧贴

在 MediaTemple DV(linux)上安装 Java 6 和 Tomcat 6

bigCat — Tue, 09 Feb 2010 08:42:08 +0000

呃,看起来很少有主机支持 Java Web application, 总所周知的原因,偶本人是 MediaTemple 的死忠用户 - 他们的价格合理(穷人当偶木说,自己去看看庙的合租吧),服务一流,是偶用过的主机中最赞滴

但是MediaTemple也不支持Java, 偶的意思是他们的 "(dv)"没有把 Java 默认安装, Plesk后台躺着一只死猫(需要花钱购买Plesk的TomCat支持)

不过大猫的一位朋友拜托偶装个TomCat, 大猫说朋友一场不谈钱
他很自觉的塞了一把银子过来,俺也不好拒绝... ...

只要有 root权限, 让偶们来把 Java 和 TomCat 搞起

第一步: 开启 root 权限

进入MediaTemple后台 http://ac.mediatemple.net

开启 root 和安装好开发者工具包

第二步: 下载 Java

这次要求只是一个网站跑 jsp 那偶喜欢直接把 Tomcat 丢在那个站的目录下,当然你可以随便安装在什么目录,只要自己找的到

于是偶准备丢在
/var/www/vhosts/ooxx.me/subdomains/app/dependencies

首先下载最新的 Java JDK RPM bin 文件
你可以在 Java developers Web site 获取

下载到本地或直接 wget 也没关系(wget过来文件名巨长, 自行mv一下)

tips: SSH下重命名超长超烂文件名技巧
例如有个文件的文件名是
jdk-6u18-linux-i586-rpm.bin\?AuthParam\=1265698813_406a5d7af31c0eefcc5819168ddcc352\&TicketId\=CJ0mgZXDkTeGxJrrXYELBA8\=\&GroupName\=CDS\&FilePath\=%2FESD6%2FJSCDL%2Fjdk%2F6u18-b07%2Fjdk-6u18-linux-i586-rpm.bin\&File\=jdk-6u18-linux-i586-rpm.bin

mv不是移动文件命令么? 你说移动和重命名有区别咩?

我们需要输入

mv jdk-6u18-linux-i586-rpm.bin\?AuthParam\=1265698813_406a5d7af31c0eefcc5819168ddcc352\&TicketId\=CJ0mgZXDkTeGxJrrXYELBA8\=\&GroupName\=CDS\&FilePath\=%2FESD6%2FJSCDL%2Fjdk%2F6u18-b07%2Fjdk-6u18-linux-i586-rpm.bin\&File\=jdk-6u18-linux-i586-rpm.bin jdk-6u18-linux-i586-rpm.bin

但输入时只需要 mv空格j按Tab自动补全文件名再按空格 jdk-6u18-linux-i586-rpm.bin 回车
这里的j是文件名首字母,当然你可以输入jd后按tab或jdk后,
如有首字母相同的文件在同目录下,会无法补全并全部列给你,那会儿多打几个字再tab

Tab补全法是入门者必须要掌握的, 要是有朝一日你成为高手了,那就复制粘贴好了...

第三步: 运行 Java 安装程序

好,我们
mkdir JDK
然后
cd JDK
切进去
把刚才下载的 jdk-6u18-linux-i586-rpm.bin ftp上去或直接wget进去
增加执行权限(权限的帖子酝酿中随后放出)
chmod a+x *.bin
OK,你可以执行了
./jdk-6u18-linux-i586-rpm.bin
按住回车到 Java 协议的末尾,他会问你yes还是no
你输入no按回车的话就会退出安装
yes的话可能就装好Java鸟

第四步:下载 Tomcat

你可以在 Tomcat Web site 找到最新的 Tomcat 版本
选择 Core ,不是 Deployer 或 Source
和Java一样
mkdir Tomcat
然后
cd Tomcat
用ftp或wget把下载来的压缩包丢进去
wget http://apache.inetbridge.net/tomcat/tomcat-6/v6.0.20/bin/apache-tomcat-6.0.20.tar.gz

第五步:解压缩Tomcat

gunzip apache-tomcat-6.0.20.tar.gz tar -xf apache-tomcat-6.0.20.tar
解压缩后会自动创建一个 apache-tomcat-6.0.20 的目录,目录里是压缩包里的内容
偶喜欢丢在自己的目录里
把它们移动出来
mv apache-tomcat-6.0.20/* .

第六步:测试 Tomcat

./bin/startup.sh
Tomcat 会吐出4行信息,例如

Using CATALINA_BASE: /var/www/vhosts/ooxx.me/subdomains/app/dependencies/tomcat
Using CATALINA_HOME: /var/www/vhosts/ooxx.me/subdomains/app/dependencies/tomcat
Using CATALINA_TMPDIR: /var/www/vhosts/ooxx.me/subdomains/app/dependencies/tomcat/temp
Using JRE_HOME: /usr
Using CLASSPATH: /var/www/vhosts/ooxx.me/subdomains/app/dependencies/tomcat/bin/bootstrap.jar

可以试着访问下
http://ooxx.me:8080 (换成你自己域名,偶其实没装在ooxx里)
因为apache的httpd跑着80端口, tomcat默认端口是8080,俩不能弄一块儿,除非反向代理,那个自己去查
如果看到Tomcat Management界面,辣就是安装好了

第七步:创建 Tomcat 服务

vi /etc/init.d/tomcat
按i进入插入模式,粘贴下面的代码



# This is the init script for starting up the
#  Jakarta Tomcat server
#
# chkconfig: 345 91 10
# description: Starts and stops the Tomcat daemon.
#

# Source function library.
. /etc/rc.d/init.d/functions

# Get config.
. /etc/sysconfig/network

# Check that networking is up.
[ "${NETWORKING}" = "no" ] && exit 0

tomcat=/your/path/to/tomcat
startup=$tomcat/bin/startup.sh
shutdown=$tomcat/bin/shutdown.sh
export JRE_HOME=/usr

start(){
 echo -n $"Starting Tomcat service: "
 #daemon -c
 $startup
 RETVAL=$?
 echo
}

stop(){
 action $"Stopping Tomcat service: " $shutdown
 RETVAL=$?
 echo
}

restart(){
 stop
 start
}

# See how we were called.
case "$1" in
start)
 start
 ;;
stop)
 stop
 ;;
status)
 # This doesn't work
 status tomcat
 ;;
restart)
 restart
 ;;
*)
 echo $"Usage: $0 {start|stop|status|restart}"
 exit 1
esac

exit 0

esc 输入 :wq 保存
(记得修改里面的路径)

继续增加执行权限
chmod a+x /etc/init.d/tomcat
测试下好使不

/etc/init.d/tomcat stop /etc/init.d/tomcat start

嗯嗯... 事情就是这样子滴

暧昧贴

cuteftp pro 显示 .htaccess

bigCat — Sun, 17 Jan 2010 08:21:48 +0000

站点管理器,某站点,属性,actions里,过滤器,启动服务器端过滤 -a

还有用 filezilla 的小盆友可以直接在菜单栏的[服务器(s)]里选择强制显示隐藏文件

暧昧贴

搞基百科

bigCat — Sat, 16 Jan 2010 18:59:28 +0000

偶还是觉得wiki比wordpress更适合做wiki...

一直以来没有代码类的wiki,偶拿 http://if.vc 先搞起,等肚子搞大了估计玩的人就多了

顺手把那个传说中的老爷主题 wordpress-cli 给修了下,使 ie和webkit能打字了 = =///

有需要的去 http://code.google.com/p/ooxx/downloads/list 下载

一大堆bug...作者貌似也懒得更新,不过至少能输入命令跳转,显得很酷,挖哈哈

滚烫贴