• 不搜索时完全不加载任何相关资源，如 ajax API 库等
• 搜索 url 非常干净，没有多余的参数：fis.io/search?q=cse
• 方便使用 javascript 对结果样式进一步调整

获取代码

首先需要在 控制面板 - 外观^新功能！中选择“搜索元素”模式 (Search element), 再选择一种布局和一种样式。实际上 ajax API 能做的事情非常多，比如就在搜索框下方即时展开结果列表。如果把结果列表悬浮绝对定位，再加上 Search as user Types, 就可以做 apple.com 右上角那种搜索样式了，一边输入一边匹配。

但是考虑到小博客的站内搜索被使用得并不多，我还是选择了两栏布局，将结果列表放在一个专门的页面 /search 中，这样的好处是不搜索的时候可以不加载多余的内容：API 库，JS, CSS 等等。

改造搜索框

先不急着把获取的那一大堆代码往搜索框上放，上面说了，我们要的效果是不搜索的时候不加载。就改造一下模板原生的搜索框就可以了，让它提交用户输入的内容到 /search 这个页面，就这样。我的 header.php 中的搜索框是这样的：

<form action="/search" id="searchbox">
    <input type="text" name="q" id="input_search" />
    <input type="submit" value="搜索" />
</form>

一个 form 中装一个输入框和一个按钮，关键内容是 action="/search" 和 name="q", 表示将会跳转到 /search?q=搜索的内容.

结果页面

建立一个页面 /search 来放入所有 CSE 代码。页面正文中放入 id="cse" 的 div, 搜索执行的时候脚本将会改写其中的内容。

<div id="cse">正在搜索...</div>

然后在页面任意位置，比如末尾，写入前面获得的两个 javascript 代码，一个是 ajax API 库 google.com/jsapi, 另一个是以 google.load 开头的一大串。还有些 CSS, 是前面获取代码的时候选择的一种样式。

但这时候还不会自动执行用户之前输入的搜索，要从 url 请求中把搜索词剥离出来，并执行。这里我用了 Kevin Yang 提供的方法，在 draw('cse') 一行后加入：

var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
    var search = decodeURIComponent(match[1]);
    customSearchControl.execute(search);
}

现在这个搜索系统就可以正常工作了。下面是对脚本的进一步自定义，只逐条说明，不每次都写完整的代码，我会把完整的修改后的脚本放在本文末尾。如果今后代码发生变动，请自行查看我的 搜索结果页 源代码。

不加载 Google 的 CSS

如果要用自己网站的样式，最好是完全不加载 Google 的 CSS, 不然覆盖样式就有得写了。在 google.load 中加入 "nocss" : true 即可。

google.load('search', '1', {language : 'zh-CN' , "nocss" : true });

无结果时显示的文字

由 setNoResultsString 控制，在无结果时将字串写入到 "正在搜索" 处。中文语言下缺省值为“无结果”

customSearchControl.setNoResultsString('什么也没找到，请重试');

结果每页条数

由 setResultSetSize 控制，可选参数为 FILTERED_CSE_RESULTSET 10条；LARGE_RESULTSET 8条；SMALL_RESULTSET 4条。

customSearchControl.setResultSetSize( google.search.Search.SMALL_RESULTSET);

是否在新标签中打开链接

由 setLinkTarget 控制，一般用到的就是 LINK_TARGET_BLANK 和 LINK_TARGET_SELF 两种。

customSearchControl.setLinkTarget( google.search.Search.LINK_TARGET_SELF);

搜索执行完毕后调用其它脚本

由 setSearchCompleteCallback 控制，这是一个相当灵活的命令，我这里用它来将搜索结果标题中的“老肥博客 » 非唠不可”去掉，不然每条标题后面都有这样一句，比较难看。这里我另外加载了 jQuery 来用，当然这不是必需的，如果没有需要就不用了。

customSearchControl.setSearchCompleteCallback(null, function() {
    $('input.gsc-input').select();
    $('a.gs-title').unwrap().wrap('<h3></h3>').each(function() {
        var title = $(this).html().replace(/\|.*/g, '');
        $(this).html(title);
    });
    $('b:contains("...")').contents().unwrap();
});

以上在 setSearchCompleteCallback 中执行了三个步骤：

• 将焦点放到搜索框 input.gsc-input 中并全选文字；
• 将搜索结果标题链接 a.gs-title 先去掉外面的一层 div, 再套在 <h3> 内（这样方便沿用全局 CSS 里面的标题样式），然后对每个标题链接读取内容，替换，写回去；
• 将包含 "..." 的关键字高亮去掉 <b>;（Google 用 <b> 标示关键字，但不知为何 "..." 也都这样标记）

其它

我的搜索页面中还有一些脚本和样式，比如将 CSE 的搜索框伪装成模板原生的输入框，这样可以避免多次搜索的时候重复加载页面；从搜索框中取得当前关键字，写入到右侧提示区；等等，比较特殊，这里就不细写了，反正 Firebug 什么的都一眼看穿。

另外，前面提到 Kevin 的文章中有个技巧很不错，只让单篇文章出现在搜索结果中，排除掉翻页、标签等页面，像我用 .html 作为单篇文章的链接结构就很好办，直接在 CSE 控制面板中设置“包含的网站”为 fis.io/*.html, 就排除了其它形式的链接结构。

微博也是博客，我在 fis.io/*.html 之外还将 twitter.com/fisio/* 编入了索引，在搜索某些内容的时候会看到我的推也在搜索结果中。

最后是我的 /search 页面中相关脚本完整版：

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'zh-CN' , "nocss" : true });
google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('015811090669888844099:szzhafqj8_4');
    customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
    customSearchControl.setNoResultsString('<img src="/b.gif" class="wp-smiley sm-sad">  什么也没找到，请重试');
    customSearchControl.setSearchCompleteCallback(null,function() {
        $('input.gsc-input').select();
        var searchwords = $('input.gsc-input').val();
        $('.p > b').text(searchwords);
        $('a.gs-title').addClass('new').unwrap().wrap('<h3></h3>').each(function() {
            var title = $(this).html().replace(/\|.*/g, '');
            $(this).html(title);
        });
        $('b:contains("...")').contents().unwrap();
        $('.gsc-cursor-current-page').removeClass('gsc-cursor-page');
    });
    customSearchControl.draw('cse');
    var match = location.search.match(/q=([^&]*)(&|$)/);
    if(match && match[1]){
        var search = decodeURIComponent(match[1]);
        customSearchControl.execute(search);
    }
});
</script>

参考文献

• 开发人员指南 - Google AJAX 搜索 API - Google 代码
• 类参考 - Google AJAX 搜索 API - Google 代码
• 在Wordpress中轻松集成Google自定义搜索引擎 | 简单生活 —— Kevin Yang的博客

对以前评论过的人隐藏资料输入部分

这个功能在很多博客都可以看到，让常客不再重复看到资料输入框，需要的时候点击就可以展开修改。另外预先显示评论者自己的全球阿凡达，用回形针别在右上角。下面欢迎来自天鹅海的组合大城小爱里的，小爱同学 做群众演员：

js 隐藏代码参考了 享总的文章，另外多了个享总没有提到的细节，展开和收起按钮按下之后会把焦点放到相应的输入框内，也就是多执行一个 .focus(); 以下是“更改”按钮 onclick 时执行的 jQuery 脚本：

$('#author_info').slideDown('fast');
$('#author').focus();
$('#show_author_info').hide();
$('#hide_author_info').show();

如果访客 cookies 中有曾经评论过的 email 信息，则预先显示头像。在 comments.php 中合适的地方先判断是否存在 email, 如果有则输出一个头像。

<?php if ( $comment_author_email ) {
    echo '<a href="...">' . get_avatar(
    $comment_author_email, 40 ) . '</a>';
} ?>

为了看上去生动些，头像被旋转了 10 度，这是用 CSS 实现的，参考我那篇关于 CSS3 动画的文章。这有一些浏览器的局限性，比如 Chrome Windows 一直有个 bug, 在图像被旋转后，边缘不能反锯齿；Firefox 则一直不能对无 padding 的图像进行圆角，除非图像处在背景中。于是我把 Firefox 下链接的 border 圆角也一并拿掉了。

动态的输入框浮动

GluedIdeas Subtle 主题原来是有输入框浮动的，但使用的是 position: fixed; 现在改成 jQuery 来做，在页面滚动的时候浮动是动态的了，顺便还兼容了 IE. 代码来自 CSS-Tricks.

可展开的表情按钮栏

表情按钮收起来了，放在大输入框内，点击则展开。同样是由 jQuery 来执行的，按钮按下的时候做三件事情：焦点放到大输入框里去；用 jQuery .toggle() 脚本来展开或收起表情按钮；按钮本身切换一个 class, 在笑脸和关闭叉叉之间切换。

$('#comment').focus();
$('#smilies_toolbar').toggle('fast');
$('#toggle-smilies').toggleClass('close');

新的评论回复样式

回复别人的评论时出现一个黄色的提示条，类似于博客界出名的 绿条禅，同时有个小箭头指向被回复的评论。

评论回复是基于枫叶的插件 WordPress Thread Comment, 经过了枫叶和我的一些修改，目前这样已经完全符合我的需要了。喜欢这个插件的朋友不妨去插件页进行捐助，支持开发。

评论列表

左侧评论列表也有一些小的变化，比如回复会比较小一些，编号字体换成了 Georgia, 以前我没有放上每条评论的链接，现在也放在了编号上，只不过颜色还是灰色的。

最后

如果出现显示问题可能需要刷新一下，避免使用浏览器缓存，最近的改动挺多的。另外如果您发现滚动很卡，可以回复我说一下浏览器和电脑配置

更新

本文发布 3 小时，评论数达到 98 条，当然主要是几个朋友在疯狂灌水啦，除了我自己之外差不多就是：ELL Jimmy Xu Sunny lisker, 大家都在盖楼──往地下室盖。

WordPress Thread Comment 这个插件是限制回复层数的，但仅仅是在超过层数的时候不输出回复按钮，而数据发往服务器并不验证。之前在 @terryxxy （上面的 Sunny）博客上我就在说，改动很简单，只需要 Firebug, 或者 Safari, Chrome 上类似的自带调试工具。找到评论输入框下面用来发送相关数据的两个 <input type="hidden">:

<p>
    <input type="hidden" id="comment_reply_ID"
    name="comment_reply_ID" value="0" />
    <input type="hidden" id="comment_reply_dp"
    name="comment_reply_dp" value="0" />
</p>

在 value 里填入想要回复的评论 ID 和深度 dp 就可以了。这也是按了回复按钮之后会通过 javascript 修改的两个数值。这样就可以无限回复下去了。你猜最后回复到了地下多少层？B31! 以前我只在回复前标一个 "Re", 今天为了大家盖楼方便，把地下楼层编号 B2 B3 也输出了

然后新的问题出现了，每层回复都会在左边缩进，比如 margin-left: 20px; 算算地下 31 层得多少，早就撑破了。锲而不舍的 Jimmy Xu 同学不光一直往下破，而且还在截图

于是呢，我在插件设置页加入了一点判断，当楼层数 $deep > 14 的时候多输出一个 class="min-width", 然后让它 margin-left: 0; 效果是在地下 14 层之后不再缩进。但 Jimmy 同学 觉得不满意，最后我的方案：

<?php echo ' style="margin-left: ' . ceil(30/sqrt($deep)) . 'px; "'; ?>

进行了 margin-left = 30除以(楼层数开平方)再取整，第一层回复 30px, 第四层 15px, 到第 25 层，margin-left 就只有 6px 了。于是呢，从线性变为弧线，看看最后的效果：

另外下面是 @terryxxy 在 70 条评论的时候的截图，点击查看完整全图 http://img.ly/z8O

这是我的第一个发布到官网的插件，用来显示最新上传到 img.ly 的图片。可以简单地在 widgets 里面添加启用它，或者自行插入 php 代码。基于 pepijnkoning 的插件 My Twitpics.

widget 可选择的参数包括 widget 标题、Twitter ID（必须）、图片尺寸等，注意输出的预览图原始尺寸为 75x75, 所以最好不要将 "Picture Size" 设置超过 75. "Border color" 则可以填入 html 允许的颜色名称或者 #D3D3D3.

如果需要进一步样式化，可以使用已置入的 class:

p.widget_imgly_p {...}
img.imgly {...}

不使用 widget 的时候，需要插入的代码是：

<?php imgly_pics($username = fisio, $num = 5); ?>

输出的内容仅为图片，不包含标题和 p, 样式化同样可以针对 img.imgly

效果可参照我的 照片页面 右侧。

这样我也有了一个 Twitter 页面，怎么样，是不是也给自己的 blog 整一个？另，感谢 sofish 提供 CSS 帮助！

http://feeds.technorati.com/search/fisio.cn

下图中上方是默认的 Google Blog Search, 下方是刚添加的 Technorati widget. 当然，改成别的 feeds 也可以。但是好像不能新建更多，需要更多的话可以修改 /wp-admin/index.php, 或者捣鼓个 Greasemonkey 脚本

解放前

最早的博客行为出现在04年歪酷，大四，最初是因为喜欢的女生在那里-_- 前后大概贴了十来篇乱七八糟的东西，收获是发现 html 挺好玩的，竟然可以在网页上嵌入 flash, 二是发现了 Firefox, 第一次装了嫌难用又卸了，一个月后重新装上，研究扩展，深陷至今。

远离博客两年之后06年开始用 Live Spaces, 转为研究介绍日历、文档等 Google 服务，视 幻灭 为偶像，但对 GSeeker 的博客系统非常不满，侧栏满是没人会点的广告，评论体验也非常差。其实 Live Spaces 也是个差劲的系统，浏览器资源占用大，文章链接死长，编辑文章的时候丢失格式，连 ed2k 链接都不认识。想换到 Blogger 绑定域名，但发现接入 IP 也在墙外。于是在 Blogger 发了一篇文章之后就放弃了，独立呼声渐强，人民需要自由

独立日

07年整个劳动节宅在家，完成了独立壮举。通过搜索“独立域名”相关信息找到了 yo2, 这是我第一次知道 WordPress, 一用它就知道这正是我一直在寻找的东西。我肯定需要一个独立域名，于是迅速以一块钱的价格买到了 fisio.cn, 在尝试搬家工具失败之后，我竟然凭着极大的热情和对新系统的憧憬，手动将几十篇老文章搬了过来-_- 再研究系统、模板、插件，七天假期就过了，留下一堆便当饭盒。虽然 yo2 没有开放插件上传，但是已有插件已经足够我用了，什么都新奇，这些是以前的 BSP 完全没法提供的。WordPress 很像 Firefox, 开放，可扩充，一切都在我掌握中，只有想不到，没有做不到。

那时候我还贴一些 台球视频，一些 平面设计，但很快就把重心转到了 Google, Firefox, Mobile. 这些话题是我最感兴趣，乐意分享给所有人的，当然也会聊 WordPress, PHP, CSS, 这些构成了我现在的主要内容。

yo2 的服务虽好，但人是永不满足的，随着更多的个性化需要，我开始考虑彻底独立了，不过一直没有实施，直到 yo2 开始过滤关键字。天朝生存手册第一条，要活命先自宫。虽然我没啥敏感内容，但有首歌叫把根留住来着，爷受不了文章里出现航空文明用语舰。

新时代

今年五月搬到 hostmonster, 对访问者而言并没有什么变化，虽然 .cn 不怎么样，目前也没有计划像 大猫 一样换个风骚的域名。也没有计划放广告，写博客只为兴趣，交朋友，难得自己有一直更新下去的动力，就好好写吧（其实是对广告收入没信心……）

WordPress 对我来讲已经非常完美了，和 Firefox 一样，长期的使用和拓展已经让我离不开它。去 WordCamp 让我对它更了解，着迷。同时，做一个互联网内容创造者，坚持原创，也是一件很自豪的事情。

本文应 水煮鱼 邀请而写，会收入 博客对话 专题

• Matt 讲到 WordPress 的成长、规模、社会化，还有 WordPress 2.7 的 demo 演示：后台模块拖动，评论 API, 快捷键，插件一键安装，主题升级，OAuth, 原生 评论回复，后台回复，批量操作…… 还有，我们十一月就可以用到它！
• Matt 很欣赏我的 T恤，还给拍了特写，希望他给我大大地贴出来…
• 海林履历很牛很硅谷，中英夹杂有点 funny: "下面我们 take 五分钟的 break..."
• 白鸦很逗，“在我的描述中抢答这是哪个博客” 这个游戏很好玩：
  白鸦：“第一句描述：这是一位老牌资深美女…”
  Mark: “徐静蕾！！！”
  全场大汗……白鸦呱呱呱……
• hongxiaowan 介绍了他的 Zuosa, 但我还是追问了关于 GSeeker 未来走向的问题，哈哈
• 查尔斯·唐 和 hongxiaowan 都觉得，老肥这个名字太混淆视听，然后我和查尔斯一致认为论肥 hongxiaowan 技压全场，鉴定完毕
• 更多细节请看 相册，配有文字说明

前两天 Shawn 提示我 Google 有一个隐藏的 favicon 缓存服务可以完美解决这个问题，果然非常棒，现在分享给大家。这个缓存调用的地址是：

http://www.google.com/s2/favicons?domain=fis.io

简单吧？这个查询得到的是一个 png 图像，如果没有对应的 favicon, 则缺省是一个地球图标。WordPress 插件 Favicon Images for Comments 是最简单的用法，不过样式反正要自己改，喜欢动手的朋友、非 WordPress 的朋友请看下面的教程。

这个查询要求不能带有 http, 而域名后面无论跟什么都无所谓。所以首先要把评论者网址前的 http 过滤掉，例如 中文 WordPress 工具箱，在显示最新评论的循环语句 foreach ($comments as $comment) 下面添加一个 $domain 定义：

$domain = preg_replace('/^http:///', '', $comment->comment_author_url);

得到的 $domain 就没有前面的 http 了。然后把它用到输出去：

$output .= $before . '<img src="http://www.google.com/s2/favicons?domain=' . $domain . '" class="favicon" /><a href="' . $permalink . '" title="' . $comment_excerpt . '">' . $comment_author . '</a> ' . $comment_excerpt . $after;

这是我的例子，提供一个参考。我发现这样写还是很难看懂……呵呵，就当个参考吧。我把我的侧栏最新评论、本周嘉宾、友情链接都改成了这个显示方式，欢迎参观

最后，希望有博客的朋友都检查一下自己的根目录下是否有 favicon.ico 这个文件，yo2 用户好像也可以通过一个专用插件来上传它。这样您的博客可以在这里得到丰富的展示，happy blogging!

据博友 冰古 的测试，Google 的 favicon 缓存服务并不是直接获取根目录下的 favicon.ico, 而是需要 html header 里面含有：

<link rel="shortcut icon" type="image/x-icon" href="http://fis.io/favicon.ico" />

如果图标不对，一定要检查一下这里。谢谢冰古！

• 增加插件 WordPress Thread Comment, 这样您可以针对某个评论进行回复，相信大家已经比较熟悉它了。期间荣幸地得到了插件作者 枫叶 的大力帮助，不然我还真不知道怎么在使用它的同时仍保持输入框浮动在右侧的特色，呵呵。有请各位多帮我测试一下，有问题麻烦反馈给我，好继续修改，先谢了。
• 升级到 WordPress 2.6, 发现评论者头像 Gravatar 可以在后台直接指定缺省头像了，可以省事地选择空白头像，后面三组可以对没有 注册头像 的用户赋予随机头像，都挺有意思的，我选了最后一组，并且停用了 WP-SnapAvatar.

  

• 升级 Firefox 到 3.0.1, 我重度依赖的标签扩展 Tab Mix Plus 修改版也罢工了，好在可以修改它里面的 install.rdf 解决问题。如果您嫌麻烦，我已经把它改好了放在 这里。
• 怪不得有调查报告称 Firefox 用户是最能保持更新的浏览器用户，3.0 刚发布一个月，老肥博客的访问统计显示 Firefox 3 用户已经占到了 Firefox 用户总数的 3/4:

  

　
启用插件之后用 <php aide_get_top_posts('month',10); ?> 调用它，第一个参数是时间范围，可以是 day, week, month, year, auto, 秒数，第二个是显示的文章数。需要在页面执行此 php 语句的话可以用插件 Exec-PHP, 另外 Denis 帮我支了一招不用此插件的办法，那就是建立一个页面模板来实现，其实我以前 提过这个办法，没想到还有这样一个妙用。

另外还有一件事，就不单独发文了，跟在这里声明一下：有人问我，老肥博客上的兔子插画是不是我自己画的？不是我画的，这是一套来自 Flameia Design 的苹果系统图标 Oh My Rabbit, 很漂亮，不过主页已经关闭很久了，我是从 这里 获得的。既然用了这么多，就加进页脚链接吧，向作者致意

该插件的一大亮点在于整个提交、填表过程由 17fav.com 这个专门的服务站点来完成，并且无缝跳转，据 Denis 讲，其实他做了非常多的提交站点接口，17fav 首页列出了二十多个常用的，插件里面则默认只有八个最常用的，如果您想自己增减，只需要在插件第 270 行修改，比如 '百度搜藏','baidu', 前者是显示名称，后者是接口名称，要查询接口名称直接到 17fav 首页看看链接，javascript:jsPost('baidu'), 单引号里面就是了。如果那里还没有您想要的，可以 问问 Denis.

按钮菜单用 jQuery 构建，这是花儿的强项，呵呵。当然您也可以对它的样式进行一些自定义，比如我就把配色从蓝色改成了老肥博客自己的色调。按钮也改了，改成和鲜果推荐按钮一致，如果您没有发现它……它在下面的胡萝卜下方。

插播广告：我的同学，日月光华手机版前版大 Mark 有一批国外带回的手机出售，有兴趣的朋友可以去 看看。

.widget li {
  white-space: nowrap;
  overflow: hidden;
}

视其父容器属性的不同，在 IE 下可能无法截断，那么在上面两句后再跟一个 width 定义就可以了。如果不喜欢一个字被切成两半，或者想多显示一行引言，可以这样做：

.widget li {
  height: 3.6em;
  overflow: hidden;
}

这里是给每个 <li> 限定高度，溢出部分截断。em 是一个相对的单位，调试一下选一个合适的数值，一行两行都可以实现，像下图。或者用 max-height 代替 height, 兼容性待考。需要最后跟个省略号的话可以试试 text-overflow: ellipsis; 是个非标准属性，我没有试过，不知道好不好用

• 内部链接

  内部链接一般是推荐一下读者可能会感兴趣的以前的文章，可以增强关联性。它可以一定程度上打击抄袭，虽然有些人会把链接抹掉，但总比没有的好。我的 favicon 设计系列 被很多人转载过，其中不乏故意隐匿出处的人，但由于插图多，他们没工夫挨个删，里面的内部链接也跟着幸存下来了。还有一篇 如何为 blog 建立一个高效的标签系统，我故意在文中留下了一个纯文本的链接（当然也是为了展示 URL 的需要），它也在抄袭者手中幸存了。在这样一个大环境里，对付抄袭没有什么特别有效的办法，但是也不要老是在文中提自己的名字——照顾一下正经读者的感受吧。

• 外部链接

  外部链接就是方便读者点击相关内容的，很重要。最好给链接加上 title 属性（鼠标放上去显示的文字），描述一下这是一个什么内容，比如写上对方文章的标题。这样读者可以自己决定看不看，有个预览。

• 是否在新标签中打开

  在本页打开的链接，读者可以自行决定是否新标签，而在新标签打开的链接，基本上是强制性的。有个现象，就是国内网站的新标签链接远远多于国外网站，从门户到论坛，大家已经习惯被剥夺选择权了。这个很难一刀切，在新标签打开吧，容易招致反感；在本页打开吧，读者可能就忘了回来，况且新标签是有实际作用的，当读者需要新老都保留的时候。我这里是内部链接本页打开，外部链接新标签。当然不是说就推荐您这么做，但我的个人忠告是内部链接最好不要新标签，内部和外部是两个系统，我不希望我的标签栏被一个网站占据。

• 给读者一个新标签提示

  更进一步的说，一个链接是否新标签并不直观，给读者选择权的同时，是否能够像链接的 title 那样，有个预览和心理准备？这里我推荐一个 WordPress 插件 External Links, 它可以给外部链接自动加上这样的一个弹出小图标。如果您不是 WordPress, 或者像我一样希望不通过插件就实现这样的效果，也可以通过 CSS, 给链接的 a 标签加上 class="external", 然后添加 CSS 描述：

  a.external {
  background: url(...) no-repeat center right;
  padding-right: 13px;
}

  对以前的文章，我导出 xml, 搜索替换 target="_blank" 为 target="_blank" class="external" 再导入就搞定了。类似的，我还做了一个 下载图标。

• 已访问过的链接的区分

  这是一个看上去不显眼，实际上挺重要的东西，读者可以从链接的外观区分是否访问过，提高阅读效率。通常的办法有：改变颜色，加下划线、下点线等。我的代码：

  a, a:link {
  color: #bb6f02;
  text-decoration: none;
}
a:visited {
  text-decoration: underline;
}
a:hover, a:active {
  text-decoration: underline;
  color: #e58802;
}

  链接没有下划线，鼠标放上去有，访问过的链接也有。

差不多说完了，希望能对您有所帮助。祝天下所有小盆友们，和童心未泯的老盆友们节日快乐

本来不想给店主做广告的，留言里有人问，留在这里吧，淘宝。再另：有朋友要原稿，在这里，原稿是 svg 格式，可任意放大。我当时没有考虑到修改文字，把 svg 里面的文字转成路径了，如果要修改的话，字体是 Lucida Grande.

echo $ns_options["start_html"];  //修改为：
echo "<li style='background-image: url(" . $url . "/favicon.ico)'>";

即用 $url 获取评论者的网站地址，将 /favicon.ico 作为列表图标。但是已知的问题有两个：没有 favicon, 或者 favicon 并不在默认地址。我用目前上榜的 5 个网友测试了一下，显示效果如下：

其中 kaka 的路径错误，kerby 和 Dickey 的文件存在，但显示有有问题。对前一种情况，总不能去分析对方的 header 来获取吧，太不现实。后一种情况，我也没弄明白为什么… 或者，可以让获取错误的时候显示 css 里定义的默认列表图标？欢迎高手给指导一下

建立一个独立的页面模板

通常文章的评论是顺序显示的，所以我们需要另建立一个倒序页面模板给留言簿。当然如果有遏制沙发党的需要也可以全站用这个方法 把主题的根目录下的 single.php 或 page.php (须有评论功能) 复制重命名为 guestbook.php, 把 comments.php 复制重命名为 gbcomments.php, 名称可以自定。在 guestbook.php 的开头加入：

<?php /* Template Name: 留言簿 */ ?>

然后在它的末尾找到如下代码，另外指定一下评论调用：

<?php comments_template(); ?> //替换成：
<?php comments_template('/gbcomments.php'); ?>

新建留言簿页面

新建页面的时候选择页面模板 (Page Template) 为“留言簿”，这样它就具有了单独的页面和评论结构，供下面的步骤调试用。页面内容可以是留言簿说明。

修改 gbcomments.php 里面的评论顺序

也很简单，只需要在文件中替换一处代码：

<?php foreach ($comments as $comment) : ?>
//替换成：
<?php foreach (array_reverse($comments) as $comment) : ?>

如果有评论编号，也需要改

如果代码没写错的话，现在评论应该倒过来排了噢。但是还有个问题，不少模板的评论是带有编号的，编号还没有倒过来。有点程序基础的朋友不用想也知道，原始代码是定义了一个初始为 0 的变量 $iCommentCount (名字可能不同), 自增一次输出一次，循环就好了：

$iCommentCount = 0;
//...
<?php $iCommentCount++; echo($iCommentCount); ?>

需要改成初始值为评论总数，输出一次自减一次，循环：

$iCommentCount = get_comments_number();
//...
<?php echo($iCommentCount); $iCommentCount--; ?>

把评论输入框搬到评论列表的上方

好了，到这里基本上就改完了，最后这个步骤要看具体模板结构，看着改改就好，出错了大不了重来，而且调试的部分是独立的，不会影响到正常访问。

这样一个留言簿就做好了，比我以前用的 cbox 那可是好太多了 而且最新留言也会出现在普通文章的评论一起，头像什么的更是不在话下。这个功能如果有插件能实现，估计也没有自己改好吧，主题关联度太大了。

评论者网址截图缓存于 images.websnapr.com/?url=http://, 只要被获取过，则使用缓存；自动更新周期未知。如果获取的时候发生了访问错误，websnapr 提供手动更新。这不失为一个弥补 Gravatar 空缺的办法，对没有对应头像的评论者，通常的做法是显示一张缺省图片，或者随机赋予一个预设头像。而提供一个他自己的网站外观做头像，应该更加亲切。

由于 websnapr 的服务是可以匿名外链的，在地址后加上 &size= 可以获取不同尺寸的截图 (可赋值 t, s, m, l)，那么还可以用它来做图片友情链接，或者介绍一个网站的时候直接写入截图地址：自动截取链接图片而且自动更新，酷？现在就动动键盘测试一下！

搬家很顺利，用 ftp 转移图片，再导出所有数据，分割，导入就可以了，导出的 WXR(.xml) 需要用 UltraEdit 之类的编辑器做一些搜索替换，比如 yo2 的缓存域名，URL 中的用户 ID 等。离开 yo2 还是有些留恋，yo2 有一流的 WordPress 博客服务，优秀的管理员 oneoo, 我的博友有一半是在 yo2 结识的。这一年我推荐了很多朋友加入，1个付费用户 两个付费用户 饭卡 和 Mark，而且今后对入门的朋友仍然首推 WordPress 和 yo2, 我的离开只是因为 yo2 已经满足不了我 PS: 就在搬家的时候 PageRank 升到了 5, Google 给我个乔迁之喜？

一个容易见到的变化是评论者 Gravatar 头像，在 WordPress 2.5+ 它已经被缺省开启，而且同样可以指定尺寸、缺省图片，经常在博客留言的朋友一定要注册服务，它可不仅限于 WordPress 平台哦，可算是一个随身带到处用的网络名片了。

请教个问题：默认的 Archives widget 日期格式是 F Y, 启用 中文包 后变为 Y年m月，如果我需要 y年n月 怎么改？