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

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

C S S不久以前我有一篇文章介绍了 CSS3 鼠标悬停动画，里面简单提过关于 text-shadow, 本文则是详细写 text-shadow. 很遗憾 IE 仍然无缘，IE8 都不行，在这个 IE 特别是 IE6 居高不下的国度怎么办，由它去吧。

兼容性

据 MDC 的文档，支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示，但比较弱，阴影不能模糊。

阴影文字和发光文字

一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。

text-shadow: 1px 2px 5px #888;

text-shadow: 0 0 10px #fd8;

浮雕文字

浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。

text-shadow: 0 1px 0 #eee; 凹进效果

text-shadow: 0 -1px 0 #123; 凹进效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #123; 凸出效果 - http://fis.io/

多重阴影

在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;

text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

鼠标悬停切换

让鼠标悬停的时候改变状态是个不错的主意，有很强的互动的感觉。阅读器中可能看不到效果。另外，在 Firefox, Chrome, Safari 中能看到整个按钮也有阴影，这是另一个应用于块模型的阴影属性，写法和 text-shadow 一样，但需要写两条：-moz-box-shadow 和 -webkit-box-shadow.

把鼠标放到按钮上切换阴影

半透明阴影颜色

有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。

text-shadow: 1px 2px 3px #888; 杯具了

这时候要用到 rgba 颜色，在红绿蓝之外还有第四个值 alpha 通道，取值在 0~1 之间。下面的阴影是黑色，但是半透明了。半透明阴影的适应性明显更强，在模糊半径很小的时候，也能透出底下的背景色来。

text-shadow: 1px 2px 3px rgba(0,0,0,0.5);

动态阴影

搭配上 前文 介绍过的 -webkit-transition, 可以让阴影在鼠标经过时有个变化过程，仅 Chrome, Safari 等 WebKit 浏览器有效。

把鼠标放到文字上，阴影在 0.5 秒内聚拢

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

就是这么个事儿，老肥博客的域名变短了，由于更改了 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 与草泥马的精彩故事。

  

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

  

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

  

上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：

a img {
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-out;
}
 
a:hover img {
    opacity: 1;
    -moz-transform: scale(1.05) rotate(2deg);
    -webkit-transform: scale(1.05) rotate(2deg);
}

如果要求仅应用于 class="logo" 的图片，则将选择器改为：

a img.logo {...}
a:hover img.logo {...}

如果要求应用于 id="footer" 的 div 下所有图片，则将选择器改为：

#footer a img {...}
#footer a:hover img {...}

到这里，所有的工作都完成了，挺简单吧？下面进入详细分析说明。

transform: 形变目标值设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);

上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法，想要深入把玩可参考 Animation Using CSS Transforms.

transform-origin: 形变中心点设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;

默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):

transition: 过程动画设定

兼容浏览器: Chrome 2.0, Safari 3.1

-webkit-transition: all 0.2s ease-out;

-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画，包括 transform, opacity; 后面两项是时间和时间轴曲线，可以有如下赋值：

以上 demo 来自 Transition Timing Functions, 展示了 transition 时间控制的强大，而且上面的 transform 是可以多重叠加的，配合 transition, 能做些什么大家想象一下吧！

opacity: 不透明度

兼容浏览器: 除了 IE

这是一个较为广泛支持的属性，前面早已没有了私有前缀(-moz, -webkit). 使用也很简单，让正常状态的图片稍微透明显示，鼠标悬停的时候恢复不透明，更加醒目。它同样可以在时间轴上受 transition 控制，试试看这个示例。

text-shadow: 文字阴影

兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1

text-shadow: 0px 1px 3px black;

以上赋值分别代表 X轴偏移，Y轴偏移，阴影扩散尺寸，颜色。应用到按钮、标题等处有很好的浮雕效果，同样的风格在 Mac OS X, iPhone 系统界面中有大量应用。

结语

• 限于篇幅，本文示例所用的 CSS 不明文列出，有兴趣可以查看页面源代码，就嵌在正文中。
• 目前 CSS3 还在草案阶段，很多属性还有私有属性前缀，能兼容新属性的浏览器在用户比例上也还是少数。话说回来，谁指望 IE Trident? 屁股都要笑掉。
• Gecko 真的已经落后 WebKit 好多了，CSS, JS, 而且还没算上 WebKit 在 iPhone, Android 等移动平台的成就。Gecko 在这方面基本还是零吧。

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

整理文章分类，基于 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 图像。接下来……想怎么用就怎么用吧

• 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: