• 不搜索时完全不加载任何相关资源，如 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

有大量文章介绍过 Google 阅读器的使用技巧，我以往的文章中也有不少，比如 快捷键的使用，今天这篇文章我要写的是如何更有效率地阅读、分享、发布，减少信息噪音，让自己和别人都能更高效地获取有价值的信息。

共享和备注 share w/o note

通常来说共享的范围就是 Google 联系人里面的活跃用户，这是一个默认会互相关注共享文章的圈子，类似于 Twitter follow. 您在 Google Reader 里面共享或者添加备注共享了一篇文章，关注您的人会立即看到这篇文章，即使只有一票。这种投票的权重是很高的，一票通过，它基于对预先选择的人群的信任。

喜欢 like

喜欢则是一种权重比较低的投票，对一篇文章标记喜欢，并不会把文章推送给别人，但是任何人看到这篇文章的时候，都能看到所有 Google Reader 用户对该文章的投票。这就比较像其它阅读器平台比如鲜果、抓虾里面的分享了，参与投票的人群是所有人。

星标和标签 add star or tags

加注星标和标签在本质上是相同的，只是星标具有特殊的快捷键和表现形式，是预设的（Gmail 也是如此）。在默认状态下它们都是别人看不到的，仅作自己收藏、管理之用。我的星标文章有个另外的用途，就是设置为公开，并输出到博客首页分享。为什么不是输出共享条目呢？因为安全考虑，星标里面基本上没有敏感内容，而且有些链接是墙外的。

针对订阅源的标签

上面所说的星标和标签是针对单篇文章的，但实际上标签同样可以用于订阅源，对订阅源添加标签，订阅源会在左侧栏中以目录树的形式排列，其标签也会继承给它下面的单篇文章。左侧栏的订阅源目录树，看上去像文件夹，但实际上是标签，因为标签是可以多重的。

这样一来，标签除了可以给订阅源分类，还可以给订阅源区分优先级，把重要的博客标记为必读，在阅读压力大的时候就可以优先阅读重要的博客下面的文章，保证不会错过。

神奇排序 sort by magic

按订阅源的优先级来阅读也不能完美解决问题，因为重要的博客也会有差文章，不起眼的博客也会有好文章，按订阅源的重要性来区分可能会漏掉一些精彩的文章。这时候可以用到神奇排序。

如图，神奇排序就在文章列表上方的视图设置里，或者在左侧栏点击标签名称的下拉箭头来选择。神奇排序是在大约三个月前新增的功能，但我觉得它的名字起得并不怎么好，至少很难让人从名字上看明白这个排序是怎么回事，听上去还挺山寨。但其实它的功能正是我所需要的：

根据文章的分享人数、喜欢人数、发布时间，进行综合排名

也许还有其它排序因素，也许朋友投票的权重会大于普通人，我就不是很确定了。用它来决定阅读顺序是非常高效的，特别是在 1000+ 的时候，基本上只需要读靠前面的一半，甚至 1/3, 就不会错过什么热门文章了，让所有的 Google Reader 用户替自己优选，每个人都是编辑，每个人都从中受益。

神奇排序简直就是为解决阅读的大量积压而存在，在大量积压的时候得到清晰的排序。但如果您的阅读很即时，还没有什么人分享或者喜欢过，那也不是问题，因为这时候您根本不需要它。它至少还解决了一个问题：即使没有关注什么 Google 联系人，也可以使用该排序方式，因为还有“喜欢”作为排序标准。

关于信息噪音

一个很多人头疼的问题：经常在 Google Reader 里面看到一篇文章的重复的分享。其实并不全是阅读器的错，我可以非常肯定的说，在您阅读之前如果有多人分享同一篇文章，Google Reader 是可以合并它们的，在您阅读之后再有人分享，也不会再重复出现。但为什么问题还是存在呢？以韩寒的新浪博客为例，广泛存在于 Google Reader 中的 feed 地址至少有下面三个：

三万人订阅了 blog.sina.com.cn/rss/twocold.xml
九千人订阅了 blog.sina.com.cn/myblog/index_rss.php?uid=1191258123
六千人订阅了 blog.sina.com.cn/rss/1191258123.xml

这些 feed 地址其实内容是一样的。这还不算，还有不同的烧制地址，以及 SR, meme 等各种再次分享源。即使内容雷同，Google Reader 也不可能把它们合并，这不是技术问题，我打个比方，一个博客的原始 feed, feedsky, feedburner 三者内容完全一样，但不能保证后两者突然改烧成了别的内容。例如下图，同一篇文章除了来自多种地址格式的订阅源之外，还有来自玩聚 SR 的再次分享。

给 Google Reader 用户的建议

降低信息噪音，规范自己的分享行为。这就好比我们提倡在 Twitter 上使用官方 RT, 杜绝 RT 回复，不要反复 RT @rtmeme 一样：

• 订阅更主流的地址，或者作者建议的地址。比如上面提到的韩寒博客，改成订阅人数最多的那个地址，和更多的人一起 share, like, 可以减少大环境中的信息噪音，我为人人，人人为我。
• 订阅 WordPress 原始 feed 并不是很好的方案，除了上一条的原因外，还有作者可能会更改域名，增加自己的麻烦。
• 批注的时候尽量采用 Google Reader 的评论功能，而不是共享备注，因为这会另起山头。
• 尽量不要再次分享 SR, meme 之类的订阅源

给博客作者的建议

实际上，博客作者是很难控制这些的，几乎每个博客都有这种问题，换域名啊，换 feed 烧制地址啊什么的。但是有些问题是明显可以纠正的：

• 要学会简单的模板修改。有些作者想提供 feedsky 给读者订阅，但是其 header.php（这决定了读者直接在阅读器中订阅首页网址时会跳转到的 feed 地址）、首页 feed 图标链接等地方仍然是原始 feed. 这直接造成了不统一。
• 尽量精简订阅源。比如 谷奥 提供了三个订阅地址，谷奥，谷安，谷奥+谷安。我认为最后一个是没有太大存在意义的。但是好像最后一个现在有很多人订阅，已经不可能回头了。我相信从一开始就做个最好的安排应该会更好。
• 说到这里，顺带提一下：有些作者还不知道如何关闭烧制 feed 里文章标题链接的跳转， 像 feedproxy.google.com 这样墙外的链接只会增加读者的麻烦。方法参考我很早的 一篇文章。

标题是瞎写的，跟内容啥关系也没有，这篇文章主要是想告诉大家，我内心十分渴望向狂欢派对献礼，但是初这初那的早都献没了，就剩域名里还有“处男”二字，于是毅然决定剪下来献给派对。什么，你说我献错人了？不会错啦，派对到谁家都是主角啦。当然标题可以作另一种理解，就是我终于领悟到了“最后的疼爱是手放开”，爱她，就要离开，于是我把域名搬到印度洋小岛去了。

就是这么个事儿，老肥博客的域名变短了，由于更改了 feedsky 的源，所以今天在阅读器中骚扰到了大家，在此道歉 另外，如果您订阅我的地址是 feeds.fisio.cn 或者 feeds.fisio.cn/fisio, 几个月之后老域名过期，它们会失效，我将只保留这个：

http://feed.feedsky.com/fisio

烦请较早订阅的朋友动手改一下。有链接我的博客有空也请更新一下链接吧。我的 Gtalk 等帐号更改到了 i@新域名，Twitter 当然就不变啦。

最后，感谢 Showfom 提供的优惠购买信息，感谢 胡戈戈 在迁移中的强大支持，祖国满赛！

我们这一代人不少都迷过 Michael Jackson, 我虽然谈不上迷，但也非常喜欢他的 MV, 像 Black or White, Remember the Time, Ghosts, ... 能让我回想起中学的时候同学找我借他的 VCD 的那些时光，当然还有同桌女生，不知道她结婚了没。两年来我换过八个博客页眉 banner, 今天一起晒晒罢。

• 这是 Subtle theme 的默认页眉，属于挺耐看的那种，温暖，清新。

  

• 去年 WordCamp 之前我第一次尝试通过页眉图案和链接来向访客宣传，图案来自 WordCamp China 官方网站的设计。

  

• T-Mobile G1 发布之后，我发表了些 照片 和 试用报告，被 Android 所深深吸引，于是有了这个页眉。

  

• 年初我 入了水果教，琢磨着也弄了一个，但嫌颜色太艳丽，于是这是唯一一个没有挂出来过的图。

  

• 后来我用一张 Mac 自带墙纸 Evening Reflections 加工了它，并使用至今，没有纪念页眉的时候就是它了。

  

• WordCamp Shanghai 2009 非常非常的成功，对每个 WordPress fans 来说，错过了都是一种遗憾。而且内容已经从 WordPress 拓展到许多网络热门话题、风云人物，比如 Isaac 与草泥马的精彩故事。

  

• 下面这是我现在看来都还激情澎湃无法平静的一个页眉，是我花了一个多小时把它从 素材 中仔细抠出来的，还一度被推友认为是我实拍的呢 挂出来的时间仅仅两天，不需要这样压抑无声的愤怒的那一天，却还很遥远。

  

• 最后这个，献给所有喜欢他的人们，祝愿他在天堂永生！

  

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

这篇文章应该是我节前最后一篇了，春节期间停博自我审查低俗内容。祝各位春节快乐，大家一起春意盎然 ！ Follow me on Twitter!

整理文章分类，基于 Silk Icons 为每个分类加上图标：

并且在 Denis 的帮助下实现了侧栏“最新文章”“随机文章”前显示文章所属分类图标。加上之前的 评论者 favicon, 已经有点小华丽喽

翻页按钮的样式

赶潮流学习了下 CSS 圆角，于是将 Pagebar 翻页按钮样式化成这个样子：

圆角样式仅支持 Firefox, Chrome, Safari, 其它浏览器下仍是方角。有兴趣可以查看我的 style.css 另外 CSS 圆角也运用到了评论输入框、鼠标放到图片链接上的样式 等地方，就不细说了，推荐阅读 sofish 的教程。

左上角的加载标签

在页面加载的时候显示一个友好的提示，尽量挽留一下急性子的访问者吧。实现方法请参阅 aw 和 Shawn 的文章。

标签云链接的鼠标悬停颜色

Simple Tags 生成的标签云可以按文章多少自动分配链接的颜色，但是鼠标放到链接上就不再改变颜色了。试试看本文右边的“热门标签”，像普通链接一样有 hover 样式，代码如下：

.st-tag-cloud a:hover {
color: #E58802 !important;
}

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

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

Hong Xiaowan 接手 GSeeker 已经快半年了，我相信 GSeeker 的读者刚听说有人要接手写下去的时候，应该是感激居多的，半年过去，GSeeker 的现状却不像当初想象那么简单了。

话题的改变

大概被老读者骂得最多的一点就是，GSeeker 竟然不再专注于 Google 了。这点我不发表意见，人都变了，话题难免和原来不一样，每个人都是不同的。往大了说，Google 的使命是索引整个互联网，谈互联网即是谈 Google. 只是，别再聊 假唱 了。

Hong Xiaowan 为什么会接手 GSeeker

幻灭的离开 除去个人原因之外，主要是因为中文商业博客整个圈子的惨淡，而谁要是在这个时候跳出来说要独力回天，把 GSeeker 打造成另一个 TechCrunch, 那一定是疯了。中文广告的贱价也注定了 CW 不可能开太高薪水，那么作为 GSeeker 的老读者和忠实拥趸，我想跳出来的人一定是出于对 GSeeker 和 Google 的爱。但是我们很快发现这也不成立，Hong Xiaowan 不要说像幻灭一般 geek, 连称之为 Gfans 都勉强，这从文字中都看得出来。

几个月过去了，我只能得出一个结论，Hong Xiaowan 是看上了 GSeeker 的订户和流量。话题往往说着说着就说到了做啥，连贴个图片都不忘要链一下做啥，我还奇怪，左拉的 PS 照 跟做啥有嘛关系？看了看发现原来这是用做啥的客户端上传的，我晕，那我发一篇文章，是不是也要链一下罗技，感谢它生产了块好键盘？

但愿这样的猜测只是我太阴暗了。

业务水平

Hong Xiaowan 漫 谈 了几次浏览器，谈得让人惊讶：这真的是一个有多年互联网从业经验的资深人士么？我无意标榜自己对浏览器的理解有多正确，但以您对浏览器的了解，摆到台面上来漫谈实在是有点掉价。

滥用内存就算了，买几根内存条可以解决问题，毕竟FireFox的亮点是插件。但是当它从2.0变成3.0之后，因为很多插件不支持3.0，我基本上就放弃了FireFox。保持兼容，保护开放商的投资是软件行业的公德。但是FireFox不管，反正它没有必要替开放商发工资！用户呢，反正已经够多了，牺牲掉一些也无所谓。

我觉得这跟那些一提索爱手机就说短信慢的人差不多，还是多了解再漫谈吧，漫谈可不是信口开河。另：上图不是这篇文章的读者评分，只是首页上一个系统错误，那篇漫谈我评的还是个正数。

不相干的软文、广告

这样说也许不合适，我相信 Hong Xiaowan 根本就没有收钱，但所谓瓜田李下，难保每个人都不联想。代友收购公司，给做啥招开发，给订阅网做广告，代友找工作，托管服务器价格好商量…… 有一篇 后竞价排名时代 的结尾能雷死一船人：

好了，就说这么多了，最后，加个广告，后竞价排名时代，需要自动审核虚假广告的技术，zuosa inc，就是我打工的公司，可以开发这种技术，有兴趣购买的公司，不妨和我联系。

感情您在这儿等着我哪。这难道是江湖失传已久的…… AdSense 人肉版？

和读者的交流

Hong Xiaowan 和幻灭不同，会花很多时间回复评论，特别是骂人的评论。面对成山的谩骂，换谁心情都不会好，可是删除评论然后留下“@XXX 狗屁不通的是你，……”就有点不明智了，他骂人是他不对，要对骂，我担心您没这精力啊。而且这也不是个交流的态度。

问题所在

所以我觉得，并不是读者怀旧，不能接受换人的改变，而是不能接受这样一个作者，来继续写一个曾经不错的博客。和现状相比，我宁愿眼睁睁看着 GSeeker 半年前死掉。我恳请 Hong Xiaowan 考虑我的建议：让贤。

题图和插图

图片的重要性是显见的，题图则可以一开始就吸引读者浓厚的兴趣。大猫 的题图一向很大很咸湿，我习惯用 128x128 的兔子图标。用 logo 做题图也不错，比如 cnBeta 的文章会自动套用话题 logo, 详细到有关鲍尔默的文章都有一个他的猴子头像。也许这样一个图片没有太多实际意义，但心理上的效果明显。不然门户网站的编辑为什么总要凑两张图片然后标题里称“组图”呢，就是要你点。

题图适合用浮动一侧的样式，按 ctrl+u 查看本文代码，就会发现我把题图所在的 <img> 标签放在了最前面，并加上了 style="float: left; margin-right: 5px" 让它浮动在左边。这个样式不适合用全局 CSS 来做，因为每个题图需要的边距都不同，而且自己定义的 CSS 样式不会传递到阅读器中。

插图不宜太大，如需大图，用缩略图做个链接。最近我给图片上的链接加了个样式，让读者更容易察觉链接，如右所示。（自定义 CSS 只在原文生效，阅读器里没有）如果觉得不错，可以在 代码 中搜索 piclink 查看。

如何强调和高亮

通常我们用 粗体 或者 高亮 来强调重点，但不可多用，不然就没有重点了。将文字弄成红色不是很好的办法，我的英文老师曾告诉我们 ALL CAPS is shouting, 所以我觉得红色的文字也显得不够礼貌。

html 格式标注的使用

行文中常用的 html 格式标注包括 h3, h4, ul, ol, li, blockquote 等，一般来说正文中的子标题不应该太大号，h3, h4 就可以了。ul 叫做无序列表，ol 叫做有序列表，li 用来标注列表中每一条项目，blockquote 是区块引用。写列表时，手动写入 1...2... 是很不规范也没有效率的做法，应该使用 html 标注，多用用编辑器的预览模式和代码模式，很容易学会：

这是一个区块引用，可看作一个有缩进的段落。引号图片是在 CSS 中定义的，在阅读器中不会有。

上面的例子中我将 ul 每条项目前做成了绿色圆点图标，这是在本站 CSS 中定义的，到阅读器中不会有这样的效果，但 ul, li 作为标准 html 标注，一般会被显示成黑色圆点的样子，标题字号、行距什么的都不会错，只是会换成缺省样式，或者阅读器里定义的样式。

合适的子标题、列表可以让文章层次分明，井井有条。如果对它们应用样式，推荐在全局 CSS 中进行，不宜过多地将格式写到 style="" 中，麻烦不说，到阅读器中就会花花绿绿的了。一个典型的错误就是指定整段文字的颜色，要是博客是深色底浅色字，到阅读器里就成浅色底浅色字了。使用 CSS 可以让样式具有更大的适应性。

写完了

OK, 如果您读到这里，就说明我这篇文章还不算失败

解放前

最早的博客行为出现在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 让我对它更了解，着迷。同时，做一个互联网内容创造者，坚持原创，也是一件很自豪的事情。

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

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

再也不需要用 php 语句加工网址，http(任意协议名都可以) 开头的一样用，任意尾巴一样用，只需要把评论者网址（比如 $comment_url）代入 domain_url= 之后，然后把这个链接放在一个 <img> 标签内，就可以在网页上输出一个 这样的图标了，实用效果见本博侧栏。

不过前些天这个调用发生了一些变化。以前只需要将链接抹去 "http://", 域名后面即使还跟有东西，都可以返回正确的 favicon, 现在不能跟了，只能是域名部分，连跟个斜杠都不可以。使用方法当然也得更新，以下是新的用法语句，感谢 Shawn 提供：

假设评论者留下的网址在数据库中是 $url, 我们另外定义一个 $domain, 用作输出。先将 $url 转换成 $domain. 其中 $link 是一次代换，如果和原有变量名冲突，可以换个名字：

$link = clean_url(strip_tags($url));
$autArray = explode("/",$link);
$domain = "" . $autArray[2];

现在可以将 $domain 用到 favicon 调用地址里面去了，调用地址示例：

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

输出为 这样的 16x16 png 图像。接下来……想怎么用就怎么用吧

在这个页面里我输出了按月统计的访问数、浏览器比例、搜索引擎、关键词等统计，图表直接使用了 公开文档 里的图片地址，这样以后添加数据的时候只需要修改这个文档，重新发布一下，而不需要修改博客页面。您可以用类似的方法输出各种各样的统计图表，现在 Google 文档不仅可以方便地制作线图、饼图等等，还有很多桌面办公软件做不到的协同、共享、发布功能。

您可以在线新建表格，或者导入一个 xls 文件。操作基本上和 MS Office 一样，表格做好之后，在右上角选择 share - publish, 将文档发布为网页，然后就可以随意引用里面的图片了。当然还可以直接 用 Chart API 制表，或者将数据来源动态化，就看您怎么玩儿了。

• 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, 很漂亮，不过主页已经关闭很久了，我是从 这里 获得的。既然用了这么多，就加进页脚链接吧，向作者致意