Alan's World

jQuery 实现网页选项卡

Alan — Wed, 01 Sep 2010 05:31:14 +0000

很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集成一栏，然后用选项卡的方式展现出来，节省空间，方便访问者浏览。于是就想到要自己写个 jQuery 代码来实现。

HTML 和 CSS 代码这里略过，可以查看 Demo。jQuery 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery(function($) {
//给当前要显示的标题添加类 selected，然后在它后面插入其他项的标题。
$('.tab_fst h2').addClass('selected').after($('.tab_sec h2'), $('.tab_trd h2'));
//把其他选项的内容插到第一个选项的内容的后面并隐藏。
$('.tab_content:gt(0)').insertAfter('.tab_content:eq(0)').hide();
//上面代码执行后，会留下两个空的 div，用 .remove() 方法删掉。
$('.tab_sec, .tab_trd').remove();
//首先给选项卡的标题增加类 title，以便我们修改美化标题栏的样式；
//然后添加点击每个标题的效果。
$('.tab_fst h2').addClass('title').click(function() {
//给被点击的标题添加类 selected，并移除其他标题项的 selected 类。
$(this).addClass('selected').siblings().removeClass('selected');
//因为每个标题 h2 对应着相应的内容 tab_content，所以用变量 i 获取 h2 的索引
var i = $('.tab_fst h2').index(this);
//让被点击选项的内容显示，隐藏其他项。
$('.tab_content').eq(i).fadeIn('slow').siblings(".tab_content").hide();
});
});

如果第一项后面有很多项，而你只想实现三个选项卡，那 $('.tab_content:gt(0)') 这里就要改一下。

jQuery 实现下拉菜单方法 (20)
用 JavaScript 或是 jQuery 实现下拉菜单的方法很多人都讨论过了，对我而言是算一个笔...
jQuery 实现多级下拉菜单 (8)
在上篇文章 jQuery 实现下拉菜单方法中写的代码仅仅是一级下拉菜单的情况，QiQiBoy 提了...
jQuery 隐藏老用户评论资料框 (10)
之前一直用的是 xiaorsz 的方法来隐藏老用户评论资料框，包括我发布的 DarkLight 和 ...
DarkLight和G-White主题的图片透明效果和超链接背景 (10)
DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如...
Wordpress Gravatar 头像缓存 (17)
最近 Gravatar 头像老是显示不能，google 之得一好方法。来自 Willin 方法，将 ...
用图片替换文字Logo (15)
用自制的图片来做博客的 Logo 相对文字 Logo 来说更美观、更多自定义性，鉴于 DarkLig...

WordPress主题：DarkLight 3.0

Alan — Sat, 28 Aug 2010 11:04:12 +0000

当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Ten 真是一个强大的主题，DarkLight 3.0 主题的功能基本与其保持一致。外观上基本保持 DarkLight 原有风格，换了些小图标，用了 Sprites 集成图片，技术一般，有点乱，不过不影响主题使用就是了。下面来个图文并茂的介绍。

首先 Header 部分：

相对之前的主题，导航栏这次用 jQuery 实现多级菜单，样式相对改进了，增加 box-show 效果（IE 不会有这个效果），包括侧边栏，如果有多级菜单的话，也加了这个效果，当然，你不要的话可以自己去掉；主题支持 WordPress 3.0 的菜单功能，Twenty Ten 自带有了。

其次是内容部分：

把之前使用内嵌的 wp-pagenavi 插件函数换成 willin 的 Mini Pagenavi，更加小巧，样式有轻微改动。

单篇文章中显示上一篇文章和下一篇文章的链接，在顶部和底部都有，这是 Twenty Ten 原来有的，我也保留了，不需要删除掉也比较简单。

相关文章本来想内嵌使用 willin 的方法，但还是放弃，不过样式还是保留在 style.css 文件里面，而且用 jQuery 实现类斑马纹样式，同样保留 js 代码，无论你用什么方法实现相关文章，只要给标题添加类 class="related_post_title"，给列表 ul 或者 ol 添加类 class="related_post"，那效果就类似下图：

作者信息栏，这个也是 Twenty Ten 自带，只要文章发布者有关于自己的描述说明，那么就会在文章底部显示作者信息，并可以点击链接查看该作者的全部文章。对于单人博客来说没啥用，如果多人参与的话，那相当有必要：

第三是评论部分：

首先是评论样式，重新设计了评论样式，奇数评论层跟偶数层样式不同，然后内嵌回复部分使用左右对话框样式，依然只支持嵌套 3 层，复杂的样式设计多层，挺累人的，代码也会复杂；同时还有评论楼层，只显示主评论楼层，具体看图：

然后是 Ajax comment，使用的是 willin 的版本，然后 jQuery 增加 @reply，即点击回复会自动添加 @somebody: ，还有 Ctrl+Enter 回复评论，隐藏回访用户资料框等常用功能。

最后是 sidebar 和 footer 部分：

这里似乎没什么好说的，因为用的 Twenty Ten 的结构，所以你完全可以使用主题的小工具来设置侧边栏，样式上不会存在问题，如果有那应该是我没有测试到吧。不仅侧边栏可以使用小工具，底部 footer 也可以：

至于返回顶部的 Go Top，像之前说的，我并没有打算给它加上 js 滚动效果，不过样式上做了下改动而已。

其他：

主题支持 Opera 10，Firefox 3.0，Chrome，IE8，IE7，IE6，手头没 Safari，没测试；Doctype 由 HTML5 改成 XHTML 1.0 Traditional；主题不能通过 CCS 3 验证，因为圆角和阴影效果的缘故，也不能通过 HTML 验证，因为 Twenty Ten 用了 HTML5 的 role 属性，我也懒得去全部改掉了；关于 CSS Sprites，把很多图片弄成一张，省去加载多张图片的时间；然后我又去掉了 Twenty Ten 原有支持的单栏样式；测试时间并不长，所以可能还有一些细节上或者其他问题，请 DarkLight 3.0 使用者帮忙汇报 Bug，谢谢！

最后的最后，再次声明，DarkLight 3.0 主题是基于 Twenty Ten 主题，请遵循署名-非商业性使用-相同方式共享 3.0.0 共享协议，去掉 footer 版权信息的朋友请自重，不要连 WordPress 的也搞掉吧。

2010-9-2：给正文增加 overflow: hidden 属性，避免溢出情况；修正“您的评论正在等待审核”评论的位置。
2010-08-29 早上更新：居然忘记测试 404 页面，稍微修改了下，并且增加一个说明文件。
2010-08-29 下午更新：修改 IE6、IE7 下鼠标滑过文章标题时，文章背景线显示不全的问题；修改 IE6 下，鼠标滑过文章内链接时，文章分割线下滑问题，IE 实在太囧了；修改在回复评论时，第二层回复者名字的显示位置；修改成功提交评论后，增加提示评论成功的句子的左边距，保持美感，汗。

演示：Live Demo
下载 WordPress 主题：DarkLight 3.0

关于DarkLight主题新版本的开发 (18)
在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结...
DarkLight 2.3 (107)
这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器...
DarkLight 2.0 (128)
DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化...
New Born (26)
A new start for Alan’s World，以前的文章全部删了，这在从 PJ Blog...
DarkLight和G-White主题的图片透明效果和超链接背景 (10)
DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如...
WordPress主题G-White更新到Ver 2.4 (89)
G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...

jQuery 实现多级下拉菜单

Alan — Thu, 26 Aug 2010 16:00:49 +0000

在上篇文章 jQuery 实现下拉菜单方法中写的代码仅仅是一级下拉菜单的情况，QiQiBoy 提了一下，想想是啊，因为自己平时博客中导航菜单都没有设置子菜单，就算本地测试的博客也只是设了一级菜单而已，已经成为惯性了。于是找了个时间再测试一下多级菜单的情况下，jQuery 的实现多级下拉菜单的方法。

相对前一篇的一级菜单，实现多级下拉菜单只要增加使用 .each() 方法。具体 jQuery 代码如下：

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
$("#nav li ul.children").hide();
$("#nav li > ul.children").each(function() {
$(this).parent("li").hover(function() {
$(this).children(".children:not(:animated)").animate({opacity: "show", height: "show"}, "slow");
}, function() {
$(this).children(".children").animate({opacity: "hide", height: "hide"}, "100");
});
});
});

看看 Demo 最后一个菜单 Title5 的效果。

还可以做一下扩展，不要把下拉菜单限定在导航菜单上，让其他带有子菜单的菜单都能实现这效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
function showChild(menu) {
menu.find("li ul").hide();
menu.find("li > ul").each(function() {
$(this).parent("li").hover(function() {
$(this).children("ul:not(:animated)").animate({opacity: "show", height: "show"}, "slow");
}, function() {
$(this).children(".children").animate({opacity: "hide", height: "hide"}, "100");
});
});
}
//调用 showChild() 函数。
showChild($("#nav"));
});

比如想实现侧边栏的分类菜单下拉效果，加多一行类似 showChild($("#categories")); 的就行了，看你具体的 ID 或是类标签的设置了。

~~目前 IE6 和 IE7 下有问题。~~ IE 问题解决，其实不关 jQuery 代码问题，是我 CSS 代码没写好。

jQuery 实现下拉菜单方法 (20)
用 JavaScript 或是 jQuery 实现下拉菜单的方法很多人都讨论过了，对我而言是算一个笔...
jQuery 实现网页选项卡 (26)
很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集...
jQuery 隐藏老用户评论资料框 (10)
之前一直用的是 xiaorsz 的方法来隐藏老用户评论资料框，包括我发布的 DarkLight 和 ...

jQuery 实现下拉菜单方法

Alan — Thu, 26 Aug 2010 00:00:05 +0000

用 JavaScript 或是 jQuery 实现下拉菜单的方法很多人都讨论过了，对我而言是算一个笔记，也算是在写主题中遇到的问题拿出来说一说吧。以前写主题很少对下拉菜单下过功夫，就算到后来也只是用 CSS 写，没有动画效果，而且在 IE6 下是不会有显示的，在写 DarkLight 3.0 的时候，想用 jQuery 实现下拉菜单，然后遇到点问题。

我开始是这样写代码的（下拉+淡入淡出效果）：

1
2
3
4
5
6
7

jQuery(document).ready(function($) {
$("#nav > li").hover(function() {
$(this).children(".children").animate({opacity: "show", height: "show"}, "slow");
}, function() {
$(this).children(".children").animate({opacity: "hide", height: "hide"}, "100");
});
});

然后问题出现了，看 Demo，但鼠标滑过菜单，然后向下滑的时候，下拉菜单在不断的重复向上向下的淡入淡出动作。用 .stop() 方法行不通，google 之，在 zwwooooo 那发现了个方法，加个判断语句 if (!$(this).children(".children").is(":animated"))，就是说，在鼠标滑过没有在执行动画动作的菜单时才会执行动作，那么用 .filter(":not(:animated)") 筛选出没有在执行动画的菜单来实现也一样：

1
2
3
4
5
6
7

jQuery(document).ready(function($) {
$("#nav > li").hover(function() {
$(this).children(".children").filter(":not(:animated)").animate({opacity: "show", height: "show"}, "slow");
}, function() {
$(this).children(".children").animate({opacity: "hide", height: "hide"}, "100");
});
});

再看看 Demo，问题解决了。

多级下拉菜单方法请查看 jQuery 实现多级下拉菜单

jQuery 实现网页选项卡 (26)
很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集...
jQuery 实现多级下拉菜单 (8)
在上篇文章 jQuery 实现下拉菜单方法中写的代码仅仅是一级下拉菜单的情况，QiQiBoy 提了...

jQuery 隐藏老用户评论资料框

Alan — Fri, 20 Aug 2010 14:35:06 +0000

之前一直用的是 xiaorsz 的方法来隐藏老用户评论资料框，包括我发布的 DarkLight 和 G-White 主题也是用这方法。该方法在 jQuery 1.2 和 1.3 下能正常工作，但在 1.4 下却有问题，我也说不清，如果你在用的是 jQuery 1.4+ 的话，把 if($('input#author[value]').length>0) 换成 if ($("#author").val()) （判断用户名输入框的值是否有值）即可。现在我把他的代码改进一下，并增加淡入淡出效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
//判断用户名输入框是否有值
if ($("#author").val()) {
//隐藏资料框
$("#author_info").hide();
//建立一个编辑锚点，并赋值给edit
var edit = "Edit your profile.";
//在welcome back后面插入“编辑锚点”edit
$(".form_row").append(edit);
$("#eidt_info").click(function() {
//第一次点击 edit 显示用户资料框，第二次点击则隐藏，依次循环
$("#author_info").animate({opacity: "toggle", height: "toggle"}, "slow");
//点击edit，用户资料框显示后，Edit your profile.变为Close.
if ($(this).text() == "Edit your profile.") {
$("#eidt_info").text("Close.");
} else {
//点击edit, 用户资料框隐藏后，Close.变为 Edit your profile.
$("#eidt_info").text("Edit your profile.");
}
});
};
});

现在撇开以上方法。如果你的主题的 comments.php 里面用户资料框类似这样：

1
2
3
4
5
6

<input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<label for="author">Name:($req) echo " (required)"; ?></label>
<input class="text" type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label for="email">Email:($req) echo " (required)"; ?></label>
<input class="text" type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url">Website:</label>

如果这个资料框没有被某个

标签包着的话，那么我们手动加一个 用户资料框部分 ，如果已有

标签包着，给他加个 id="author_info"。这里不手动增加 Welcome Back 部分，在浏览器不支持 javascript 的情况下，似乎意义不大，直接用 jQuery 增加这一部分就可以了（个人观点）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(document).ready(function() {
//判断用户名输入框的值是否有值
if ($("#author").val()) {
//把用户资料框赋值给info
var info = $("#author_info");
//把用户名赋值给author
var author = $("#author").val();
//隐藏用户资料框
info.hide();
//用户名样式为粗体，可要可不要
$("#author").css("fontWeight", "bold");
//在用户资料框

下的最开始插入"Welcome back. Edit your info."
info.before("

Welcome Back "+author+". Edit your info.

");
//把"edit your info."这个“编辑锚点”赋值给editInfo
var editInfo = $("#edit_info");
//点击“编辑锚点”editInfo
editInfo.click(function() {
//资料框弹出效果和关闭效果
info.animate({opacity: "toggle", height: "toggle"}, "slow");
//资料框弹出时锚点显示为Close.
if (editInfo.text() == "Edit your info.") {
$(this).text("Close.");
} else {
//隐藏后锚点显示为Edit your info.
$(this).text("Edit your info.");
}
});
}
});

其实就是比第一个方法在 comments.php 里面少见一个 Welcome back 的 php 语句。新手，欢迎探讨指教。
PS. 实现以上方法的前提是你在 header 或者 footer 加载了 jQuery 库。这里推荐用 jQuery 1.3.2，直接加载 google 的：

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Wordpress Gravatar 头像缓存 (17)
最近 Gravatar 头像老是显示不能，google 之得一好方法。来自 Willin 方法，将 ...
G-White主题显示文章摘要 (20)
Wordpress 显示文章摘要，其实在文章编辑器有个 more 标签，很多人都知道啦，昨天有位同学...
WordPress主题G-White更新到Ver 2.4 (89)
G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...
jQuery 实现网页选项卡 (26)
很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集...
Wordpress主题：DarkLight 3.0 (56)
当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Te...
jQuery 实现多级下拉菜单 (8)
在上篇文章 jQuery 实现下拉菜单方法中写的代码仅仅是一级下拉菜单的情况，QiQiBoy 提了...

DarkLight和G-White主题的图片透明效果和超链接背景

Alan — Thu, 19 Aug 2010 09:26:55 +0000

DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如何去掉该效果，个人喜好不能加于公布的主题中，以后要注意，去掉的方法就是，在 style.css 中找到 .entrybody img，删除里面的

1
2
3

filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;

这三行，顺便把 .entrybody img:hover 整个删掉。

还有个问题是，这俩主题中，超链接图片在鼠标滑过时，图片底部会留下的红色背景，是我给超链接在鼠标滑过 a:hover 时设置了 padding 和 background 属性导致的，要去掉的话修改超链接的样式，去掉其内边距和背景属性。如果想保留超链接原来的样式，我写了个 jQuery，去掉超链接图片的背景和样式：

1
2
3

$(document).ready(function() {
$(".entrybody a img").parent("a").css({"background": "none", "padding": "0"});
});

代码放到 js 文件夹下的 all.js 里面。这两个主题已经调用了 jQuery 库，如果你已经删掉了，那不会有效果。

关于DarkLight主题新版本的开发 (18)
在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结...
WordPress主题G-White更新到Ver 2.4 (89)
G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...
Wordpress主题：DarkLight 3.0 (56)
当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Te...
用图片替换文字Logo (15)
用自制的图片来做博客的 Logo 相对文字 Logo 来说更美观、更多自定义性，鉴于 DarkLig...
G-White主题显示文章摘要 (20)
Wordpress 显示文章摘要，其实在文章编辑器有个 more 标签，很多人都知道啦，昨天有位同学...
关于DarkLight的相关文章和Bread Crumb样式 (68)
首先提个与本文章内容无关的，发现太多朋友喜欢去掉版权信息了，想不明白，版权信息就那么碍眼？？！像 J...

关于DarkLight主题新版本的开发

Alan — Sun, 15 Aug 2010 02:18:23 +0000

在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结构和 CSS 代码还有一些不合理和冗余的地方，结构方面已改好，正在重新写 CSS 代码。但受到 Jinwen 这篇文章的影响，我也有意尝试用 WordPress 官方主题进行开发，毕竟我的那些代码是从 WordPress 2.5 用到现在的，需要全面更新一下了，所以有了把 DarkLight 和 G-White 3.0 化的想法，即在 Twenty Ten 主题结构基础上的更新开发。

回到正题，首先是对 DarkLight 的更新，版本直接跳到 3.0 且不在对之前版本进行维护改进。说说几点特性，喜欢 DarkLight 主题的可以提提意见：

Ajax Comment，这次会使用 Willin 最新的改进版。
嵌套评论，样式会有所改变，敬请关注
内嵌文章分页，这次不用 wp-pagenavi，而使用还是来自 Willin 的 Mini Pagenavi，很小巧。
一些 JavaScript 效果：如点击 Reply 自动添加 @somebody，下拉菜单，Ctrl+Enter 回复评论，在考虑要不要加页面滚动效果，个人觉得没什么必要。

进度不会很快，现在失业中，正在学习，杯具。

Wordpress主题：DarkLight 3.0 (56)
当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Te...
DarkLight和G-White主题的图片透明效果和超链接背景 (10)
DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如...
WordPress主题G-White更新到Ver 2.4 (89)
G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...
Wordpress Theme: G-White 2.0 (116)
G-White 是自己做的一个比较久远的主题了，跟 DarkLight 一样，这次也直接跳到 Ver...
DarkLight 2.3 (107)
这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器...
DarkLight 2.0 (128)
DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化...

IE6什么时候才能挂掉？Let’s Kill IE6！

Alan — Wed, 04 Aug 2010 04:33:50 +0000

说起 IE6，很多 Web 前端工作者对其无不厌恶，不说做前端开发的童鞋，就说我弄个主题，经常被 IE6 的 Bug 搞得很头疼，所以在现在使用的这个新主题 Untitled 中对 IE6 的 Hack 已经很少了，简直是浪费时间和生命，但为了用户往往又不得不选择去 Hack，囧。

去 google Analytics 看了近两个月的浏览器使用者：

最多的是 IE，其次是 Firefox 和 Chrome，其中 IE6 的用户占 IE 所有版本浏览器中的 43%，天啊，我想不明白为什么还有这么多人用 IE6，IE7、IE8 都出了很久了吧，泪奔。。。

无奈，之前用的是 mg12 的 Let’s kill IE6 脚本，但弹出窗口着实体验太差，就像窗口弹出附着广告那样让人讨厌，所以直接用 IE6 注释在侧边栏加上 IE6 用户才能看到的信息：

IE6 存在太多的 Bug，已经是一个很过时的浏览器，为什么不升级您的 IE 版本到 IE8 呢？或者尝试其它几款比 IE 更出色的浏览器呢？Let’s Kill IE6！！！

Random Posts

DarkLight 2.0 (128)
DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化...
关于DarkLight主题新版本的开发 (18)
在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结...
用图片替换文字Logo (15)
用自制的图片来做博客的 Logo 相对文字 Logo 来说更美观、更多自定义性，鉴于 DarkLig...
两个豆瓣电台桌面版 (8)
最近电脑上的歌快听腻了，也懒得去下载，然后喜欢上了听豆瓣电台，相对于网页版我更喜欢用桌面版，因为可以...
关于DarkLight的相关文章和Bread Crumb样式 (68)
首先提个与本文章内容无关的，发现太多朋友喜欢去掉版权信息了，想不明白，版权信息就那么碍眼？？！像 J...
最近这些日子 (17)
最近特别忙，每天加班 2-4 个小时，公司准备累死人不偿命 Orz，没事干就裁员，裁完就搞一大堆事来...

两个豆瓣电台桌面版

Alan — Thu, 29 Jul 2010 03:01:08 +0000

最近电脑上的歌快听腻了，也懒得去下载，然后喜欢上了听豆瓣电台，相对于网页版我更喜欢用桌面版，因为可以直接按快捷键听下一首，标记 fav，方便很多。

这第一个 DoubanRadio (开发者 slippor)应该挺多人用的，除了豆瓣电台的基本功能外，支持插件，支持快捷键，内置搜索引擎，托盘气泡提示播放歌曲（可以设置去掉，我觉得挺烦的），可以设置在 MSN 中显示“正在听的音乐”等等，还有其他挺多功能设置的，可以先看看此图文版介绍（旧版本的图片）。

第二个是由 CodeName.A 的 dbRadio，正式版刚出，需要安装 .NET Framework 4.0 才能使用，哥电脑上已经有 1.1、2.0、3.0、3.5 四个版本了，写这文章时正在装 4.0，微软就不能智能点，装新版本的时候自动删除旧版？回到正题吧，dbRadio 界面更好看，看图文介绍吧：

下载地址：豆瓣

补充一下：试用了 dbRadio，界面不错，动态效果也不错，功能设置方面相对第一个的 DoubanRadio 少了很多，如果快捷键能自己设置就好了，~~还有切歌好慢咯~~
再补充：给 CodeName.A 反馈后，很快他做出了完善，beta 版已经解决了播放出现断断续续或者卡住等问题，的确很喜欢这款 dbRadio，值得期待。

Random Posts

关于DarkLight主题新版本的开发 (18)
在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结...
DarkLight 2.0 (128)
DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化...
jQuery 实现网页选项卡 (26)
很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集...
WordPress主题G-White更新到Ver 2.4 (89)
G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...
DarkLight 2.3 (107)
这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器...
升级WordPress 3.0后随机文章显示不了 (11)
消失了很久了，最近升级到 Wordpress 3.0 后，发现 DarkLight 和 G-Whit...

WordPress Gravatar 头像缓存

Alan — Mon, 26 Jul 2010 04:09:16 +0000

最近 Gravatar 头像老是显示不能，google 之得一好方法。来自 Willin 方法，将 Gravatar 头像缓存到服务器，不错、够速度，故分享之。

首先在你的网站 wp-content 的同级目录建立：/avatar，权限设置:755，这是 Gravatar 的缓存路径。
准备一张适合你模板尺寸的默认头像，名为 default.jpg。
将下列代码复制到模板的 functions.php 下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Mini Gavatar Cache by Willin Kan. */
function my_avatar( $email, $size = '42', $default = '', $alt = false ) {
$alt = (false === $alt) ? '' : esc_attr( $alt );
$f = md5( strtolower( $email ) );
$w = get_bloginfo('wpurl');
$a = $w. '/avatar/'. $f. '.jpg';
$e = ABSPATH. 'avatar/'. $f. '.jpg';
$t = 1209600; //設定14天, 單位:秒
if ( empty($default) ) $default = $w. '/avatar/default.jpg';
if ( !is_file($e) || (time() - filemtime($e)) > $t ){ //當頭像不存在或文件超過14天才更新
$r = get_option('avatar_rating');
$g = sprintf( "http://%d.gravatar.com", ( hexdec( $f{0} ) % 2 ) ). '/avatar/'. $f. '?s='. $size. '&d='. $default. '&r='. $r;
copy($g, $e); $a = esc_attr($g); //新頭像 copy 時, 取 gravatar 顯示
}
if (filesize($e) < 500) copy($default, $e);
$avatar = "";
return apply_filters('my_avatar', $avatar, $email, $size, $default, $alt);
}
// -- END ----------------------------------------

上面第一行的 $size 可自定义头像大小
然后将所有 get_avatar() 改 my_avatar()，大概 functions.php，comments.php，sidebar.php，comments-ajax.php 会有头像的地方有 get_avatar() 函数，因主题而已，自行修改。

注意 my_avatar() 的方法和 get_avatar() 有一点差别：
get_avatar() 可用 id 或 email，可写成 get_avatar($comment, $size= …
而 my_avatar() 只能用 email，要改成 my_avatar($comment->comment_author_email, $size= …
使用参数如下： echo my_avatar( $email, $size, $default, $alt ); ?>

以上转自 Willin 的新版 Gravatar 缓存，其实后面还有第二个方法，不用修改模板的，但有点小缺陷，详见该文的后续部分。

jQuery 隐藏老用户评论资料框 (10)
之前一直用的是 xiaorsz 的方法来隐藏老用户评论资料框，包括我发布的 DarkLight 和 ...
G-White主题显示文章摘要 (20)
Wordpress 显示文章摘要，其实在文章编辑器有个 more 标签，很多人都知道啦，昨天有位同学...
WordPress主题G-White更新到Ver 2.4 (89)
G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...
jQuery 实现网页选项卡 (26)
很多网站都有使用网页选项卡，最常见的就是博客的侧边栏上，比如把最新文章、随机文章、最受欢迎文章三项集...
Wordpress主题：DarkLight 3.0 (56)
当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Te...
DarkLight和G-White主题的图片透明效果和超链接背景 (10)
DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如...

Alan's World

jQuery 实现网页选项卡

Related Posts

WordPress主题：DarkLight 3.0

首先 Header 部分：

其次是内容部分：

第三是评论部分：

最后是 sidebar 和 footer 部分：

其他：

Related Posts

jQuery 实现多级下拉菜单

Related Posts

jQuery 实现下拉菜单方法

Related Posts

jQuery 隐藏老用户评论资料框

Related Posts

DarkLight和G-White主题的图片透明效果和超链接背景

Related Posts

关于DarkLight主题新版本的开发

Related Posts

IE6什么时候才能挂掉？Let’s Kill IE6！

Random Posts

两个豆瓣电台桌面版

Random Posts

WordPress Gravatar 头像缓存

Related Posts