MSN留言风格的Ajax Commens-Reply插件
(MSN Type Ajax Comments-Reply Plugin)

• 点击下载，版本：1.5 ，最后更新于2007/04/23

原创于懶懶喵日記，后Zhang-Zi根据此版本制作了非常优秀的Ajax Comments-Reply插件，现在这个版本实质是将Zhang-Zi的两个版本（一个是以前的实现msn风格的留言版本，另一个是他现在用的版本）合二为一。因此，这里特别感谢两位作者之前所作的大量努力。此版本主要实现的功能如下：

• 可以配合Smiley Javascript Buttons，插入表情符号
• 使用回复无需刷新
• 可以直接在各种页面上（主页，多文章页面，单篇文章）回复留言（默认为5层嵌套），使得讨论更有针对性

修订版1.5主要改了一下几个方面：

• 修正了代码中的若干错误
• 加入了set_innerHTML函数，使得innerHTML中的js代码也可以被运行。现在在主页或者单篇日志上均可直接使用Smiley JS Buttons的表情代码（要求系统已经安装了Smiley JS Buttons插件）。

修订版1.1β主要改了一下几个方面：

• 修改了原插件必须放置在wordpress根目录下的缺点，同时保留了prototype.lite等函数（因为我用的litebox中也用到了prototype.lite【注】litebox是lightbox的精简版本，用以实现图片显示的特殊效果）。
• 整合了Zhang-Zi的两个不同版本的插件，合并了部分代码，使之达到现在的显示效果。
• 修改了留言栏的式样，使得符合我的blog风格。
• 压缩了javascript代码，其中css文件没有压缩，如果有需要，可以参考我的文章：加速Wordpress
• 加上了Smiley JS Buttons的表情代码，如果你安装了Smiley JS Buttons，可以在单页留言中使用表情符号。

压缩包内容，包含在一个comment-reply的文件夹：

1. readme.html //Read Me
2. ajax-comments.php //实现在多文章页面上留言
3. comments.php //实现单页面上的留言
4. comment.css // css文件，控制评论栏效果
5. comment.js, parse.js.php //已压缩的 javascript文件
6. moo.ajax.js, prototype.lite.js, moo.fx.js //prototype.lite 模块
7. comments-ajax.php //ajax留言处理
8. comment-reply.php //插件控制
9. working.gif //Loading留言时候的动态图标
10. unzip文件夹 //未压缩过的javascript版本

插件安装使用：

1. 从上面链接下载安装文件，解压缩后得到一个comment-reply文件夹
2. 把文件夹的comments.php放到模版目录下，覆盖同名文件—请备份旧的comments.php
3. 将comment-reply文件夹整个放入插件目录。结构如下：
   ---------------Plugins/
   ----------------------/comment-reply/
   ----------------------------comment-reply.php 等文件
4. 到管理界面启用Ajax Comments-Reply修订版插件。
5. 在index.php中用以下代码显示评论：

   <?php $pid=$post->ID; $cnum = get_comments_number(); showcomment($pid, $cnum);?>

插件卸载：

1. 将模版目录下备份的comments.php复原。
2. 管理界面停用插件或者直接删除此插件文件。

欢迎使用。有任何问题，可在此留言，或者email 到 "qmqsun(AT)gmail.com"，当然，也可以去问Zhang-Zi，他的G-talk是"zhang(AT)zhiqiang.org"。

© SUN for 徘徊在玻璃之城, 2007. | Permalink | 我的页面 | 46 comments

MSN留言风格的Ajax Commens-Reply插件
(MSN Type Ajax Comments-Reply Plugin)

• 点击下载，版本：1.0β ，最近更新于2007/03/18

原创于懶懶喵日記，后Zhang-Zi根据此版本制作了非常优秀的Ajax Comments-Reply插件，现在这个版本实质是将Zhang-Zi的两个版本（一个是以前的实现msn风格的留言版本，另一个是他现在用的版本）合二为一。因此，这里特别感谢两位作者之前所作的大量努力。此版本主要实现的功能如下：

• 回复无需刷新。

• 可以直接在各种页面上（主页，多文章页面，单篇文章）回复留言（默认为5层嵌套），使得讨论更有针对性。

此修订版主要改了一下几个方面：

• 修改了原插件必须放置在wordpress根目录下的缺点，同时保留了prototype.lite等函数（因为我用的litebox中也用到了prototype.lite【注】litebox是lightbox的精简版本，用以实现图片显示的特殊效果）。
• 整合了Zhang-Zi的两个不同版本的插件，合并了部分代码，使之达到现在的显示效果。
• 修改了留言栏的式样，使得符合我的blog风格。
• 压缩了javascript代码，其中css文件没有压缩，如果有需要，可以参考我的文章：加速Wordpress

压缩包内容，包含在一个comment-reply的文件夹：

1. readme.html //Read Me
2. ajax-comments.php //实现在多文章页面上留言
3. comments.php //实现单页面上的留言
4. comment.css // css文件，控制评论栏效果
5. comment.js, parse.js.php //已压缩的 javascript文件
6. moo.ajax.js, prototype.lite.js, moo.fx.js //prototype.lite 模块
7. comments-ajax.php //ajax留言处理
8. comment-reply.php //插件控制
9. working.gif //Loading留言时候的动态图标
10. unzip文件夹 //未压缩过的javascript版本

插件安装使用：

1. 从上面链接下载安装文件，解压缩后得到一个comment-reply文件夹
2. 把文件夹的comments.php放到模版目录下，覆盖同名文件—请备份旧的comments.php
3. 将comment-reply文件夹整个放入插件目录。结构如下：
   ---------------Plugins/
   ----------------------/comment-reply/
   ----------------------------comment-reply.php 等文件
4. 到管理界面启用Ajax Comments-Reply修订版插件。
5. 在index.php中用以下代码显示评论：

   <?php $pid=$post->ID; $cnum = get_comments_number(); showcomment($pid, $cnum);?>

插件卸载：

1. 将模版目录下备份的comments.php复原。
2. 管理界面停用插件或者直接删除此插件文件。

欢迎使用。有任何问题，可在此留言，或者email 到 "qmqsun(AT)gmail.com"，当然，也可以去问Zhang-Zi，他的G-talk是"zhang(AT)zhiqiang.org"。

© SUN for 徘徊在玻璃之城, 2007. | Permalink | 与时俱进 | One comment

This plugin enables the wp system to convert your dynamic homepage to static index.html, more importantly, keep the content up to date. It can speed up the loading for your homepage.

• Download (Updated 2007.03.16)

Readme:

1. Plugin WP-Cron is needed for this plugin, I've packed WP-Cron v 1.4 in the zip file.
   Please upzip all the files to plugins/static-index, so that it look like:
   ------plugins/
   ------------static-index/
   ----------------static.php
   ----------------wp-cron-static-index.php
   ----------------wp-cron.php
2. Active two plugins :WP-cron and WP-Cron Static Homepage.
3. Create a file named index.html in your blog root folder, set
   666 permissions for it.

Well, the system will update index.html automatically (per 15 mins), you may hack wp-cron.php at line 49 to change the time for scheduled exection actions.

More Tips:

1. You may use the following php to refresh homepage when comments come in.

   <?php
   include (get_settings('siteurl') . "/wp-content/plugins/static-index/static.php");
   ?>

2. The following script is to demo how to set cookies in the html files.

   <script type="text/javascript">
   function GetCookie(sName, id)
   {
   // cookies are separated by semicolons
   var something = document.getElementById(id);
   if(!something) return 0;
   for (var i=0; i < aCookie.length; i++)
   {
   // a name alue pair (a crumb) is separated by an equal sign
   var aCrumb = aCookie[i].split("=");
   if (sName == aCrumb[0])
   {
   if(sName=="comment_author_10add94cfc29a64b08306c8a8f9edb30")
   something.value = decodeURI(aCrumb[1]);
   else
   something.value=unescape(aCrumb[1]);
   return 1;
   }
   }
   // a cookie with the requested name does not exist
   return 0;
   }
   //please fill in with your own cookie id
   GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "authorname");
   GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
   GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");</script>

WP Static Homepage（首页静态化）插件的目的是为了将WP的index.php转化为index.html，从而实现首页静态化的目的，提高主页的浏览速度。 如果您想要全站静态化，请参考阅微堂的文章。

• 插件下载地址。 （最后更新于2007.03.16）

安装说明：

1. 您需要安装WP-Cron插件，在上述的下载地址中已经包含该插件的1.4版本，您也可以自行下载。
2. 将下载文件中的所有文件解压缩后上传到plugins下的static-index目录中，目录结构如下：
   ------plugins/
   ----static-index/
   ------------static.php
   ------------wp-cron-static-index.php
   ------------wp-cron.php
3. 激活wp-cron，WP-Cron Static Homepage两个插件。
4. 在blog根目录建立一个index.html的文件，设置属性为666。

运行之后，系统会每镉15分钟将index.php的内容刷新为index.html，提高浏览速度。 题外话：

1. 关于留言问题。 留言系统我采用的也是阅微堂的基于MSN风格的留言系统，该系统基于ajax技术，因此可以在静态页面上使用。如果要使用该留言系统，建议在里面的comment-reply.php文件中包含以下语句，保证留言之后会重新刷新静态主页。

   <?php include (get_settings('siteurl') . "/wp-content/plugins/static-index/static.php"); ?>

2. 关于cookies读取，在阅微堂的文章中已经有详细的阐述，这里借花献佛，也就是加入如下代码：

   <script type="text/javascript">
   function GetCookie(sName, id)
   {
   // cookies are separated by semicolons
   var something = document.getElementById(id);
   if(!something) return 0;
   for (var i=0; i < aCookie.length; i++)
   {
   // a name alue pair (a crumb) is separated by an equal sign
   var aCrumb = aCookie[i].split("=");
   if (sName == aCrumb[0])
   {
   if(sName=="comment_author_10add94cfc29a64b08306c8a8f9edb30")
   something.value = decodeURI(aCrumb[1]);
   else
   something.value=unescape(aCrumb[1]);
   return 1;
   }
   }
   // a cookie with the requested name does not exist
   return 0;
   }
   以下为我的cookie设置，用户请自行寻找自己的cookie id
   GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "authorname");
   GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
   GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");</script>

参考文献：

1. 阅微堂
2. WP-Cron

© SUN for 徘徊在玻璃之城, 2007. | Permalink | 与时俱进 | 2 comments

Google AJAX Search的功能非常强大，可以搜索网页、地图、新闻、书籍等等。但是我觉得对一个blog搜索来说，只要有本站搜索和网页搜索两项就足够了；另外，现在的blog多会采用两栏或者三栏的布局方式，因此，我也选择了将搜索栏和搜索结果分开显示的方法，合理的利用空间，如果你希望添加更多的内容，请参见Google AJAX Search documentation。

首先你要做的是去Google的网站申请一个Google AJAX Search API，点击左下角的确认框，并且输入你的blog地址后，你会得到一个长长的Key。

随后，在需要添加AJAX搜索功能的网页之header部分（在<head>和</head>之间），嵌入如下的代码（如果你使用的是wordpress，请在header.php中的</head>之前添加）：

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=请在此处填写你的key" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF); //可选项，如果删除此行，搜索结果将在新页中打开
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); //可选项，如果删除此行，搜索结果将从10条变为4条
// create a draw options object so that we
// can position the search form root
var options = new GdrawOptions();
options.setSearchFormRoot(document.getElementById("searchForm"));
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("填入你的网站标签");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("填入你的blog网址");
searchControl.addSearcher(siteSearch);

// standard, unrestricted web search
searchControl.addSearcher(new GwebSearch());

searchControl.draw(document.getElementById("searchResults"), options);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>

几个地方需要修改的我已经在代码中列明。

然后在你需要放置搜索结果的地方（一般放置在代码<body>之后，显示blog内容的部分）嵌入如下代码，（如果你使用wordpress，请在header.php中的代码<div id="content">之后添加）：

<div id="searchResults"/></div>

现在，你需要添加的是搜索条部分，一般说来，我们会选择在侧栏添加如下代码（如果你使用wordpress，请在siderbar.php中添加）：

<div id="searchform"></div>

好，现在你要做的是最后一件事情，将如下的代码嵌入到你的css文件中（wp用户的css文件为相应theme下的style.css），如果你的 网站没有css文件，那么请在<head>和</head>添加如下代码，注意，你可能要根据自己网站的实际情况修改下列代码：

/** Copyright 2005 Google Inc. All rights reserved. */
/* the GSearchControl CSS Classes
* .gsc-control :主显示框
*/
.gsc-control {
width: 98%;
}

.gsc-control div {
position: static;
}

/* control inputs
* .gsc-search-box : 搜索栏大小
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
width: 96%;
}

/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div's background image
*/
table.gsc-search-box {
width : 100%;
margin-bottom : 2px;
margin-top : 5px;
margin-left: -6px;
}

td.gsc-search-button {
width : 1%;
}

td.gsc-clear-button {
width : 14px;
}

/**
* undo common generic table rules
* that tend to impact branding
*/
table.gsc-branding td,
table.gsc-branding {
margin: 0 0 0 0;
padding: 0 0 0 0;
border : none;
}

table.gsc-branding {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
}

td.gsc-branding-text {
vertical-align : top;
}

td.gsc-branding-text div.gsc-branding-text {
padding-bottom : 2px;
text-align : right;
color : #676767;
font-size : 11px;
margin-right : 2px;
}

td.gsc-branding-img-noclear {
width : 51px;
vertical-align : bottom;
}

td.gsc-branding-img {
width : 60px;
vertical-align : bottom;
}

input.gsc-search-button {
margin-left : 4px;
}

div.gsc-clear-button {
display : inline;
text-align : right;
margin-left : 4px;
margin-right : 4px;
padding-left : 10px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://www.google.com/uds/css/clear.gif');
cursor : pointer;
}

/*
* Given that this is sitting in a variable width tabel cell, the idea is
* for it to consume the entire cell. The adjacent cell contains the search
* button and that is a fixed width cell.
*/
input.gsc-input {
padding-left : 2px;
border-style : solid;
border-width : 1px;
border-color : #BCCDF0;
width : 99%;
}

/* tabbed mode of search control
* .gsc-tabsArea : the box containing all of the tabs
* .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared
* .gsc-tabHeader : an individual tab
* .gsc-tabHeader.gsc-tabhActive : the active tab
* .gsc-tabHeader.gsc-tabhInactive : an inactive tab
* .gsc-tabData : the data area/box containg results and header data for each tab
* .gsc-tabData.gsc-tabdActive : the data area for the active tab
* .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
*/
.gsc-tabsArea {
clear: both;
margin-top: 6px;
}

.gsc-tabsAreaInvisible {
display : none;
}

.gsc-tabHeader {
display: inline;
cursor: pointer;
display: inline;
padding: 2px 10px !important;
border: 1px solid #999; /*可修改搜索结果标题栏的边框颜色*/
border-bottom: none;
margin-bottom: 0;
margin-right: -6px; /*不要修改*/
margin-left: 10px; /*不要修改*/
}

.gsc-tabHeader.gsc-tabhActive {
background: #484848; /*正在显示的搜索结果标题栏的背景*/
color: #FFFF99; /*正在显示的搜索结果标题栏的字体颜色*/

}

.gsc-tabHeader.gsc-tabhInactive {

}

.gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
}

/*此代码只对IE6适用*/
* html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}

/*此代码只对IE7适用*/
*+ html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}

.gsc-tabData.gsc-tabdInactive {
display: none;
}

/* tab specific results header supression
* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
}

.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}

.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display : none;
}

/* the results for each section
* .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers
* .gsc-results : the collection of results for a given searcher
* .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
*/

.gsc-resultsbox-visible {
display : block;
}

.gsc-resultsbox-invisible {
display : none;
}

.gsc-results {
clear: both;
padding-bottom: 2px;
}

.gsc-result {
margin-bottom: 10px;
}

.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
}

/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
display: none;
}

/* Ads
*/
.gsc-results .gsc-result img.gs-ad-marker {
display: none;
}

/*** End of Control, Begin Results ***/

/* generic, cross cutting result style
* - in the form of .gs-result .gs-xxx where xxx is the generic style
* .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
* .gs-divider : typically seperates results from ads
* .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
* .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results
* img.gs-image : an actial image in a result
* .gs-phone : a phone number
* .gs-address : an address (includes street, city, region, country)
* .gs-streetAddress : a street (including #)
* .gs-city : a city
* .gs-region : a region (zip code, area, etc.)
* .gs-country : a country
* .gs-snippet : snippetized content
* .gs-watermark : indicator that user selected this result
* .gs-metadata : generic metadata, e.g.,
* .gs-image-box : generic container for a result's image (within a table)
* .gs-text-box : generic container for a result's text content (within a table). Note that this class, and image-box are only used in video
*/
.gs-result .gs-title,
.gs-result .gs-title * {
color: #6FF; /*搜索结果内容标题栏颜色 */
text-decoration: underline;
padding-bottom:5px;
}

.gs-divider {
padding-bottom: 8px;
text-align: center;
color: #676767;
}

.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #FAC; /*搜索结果来源网站的颜色 */
text-decoration: none;
}

.gs-webResult div.gs-visibleUrl-long {
width : 100%;
overflow : hidden;
display : none;
}

可能需要修改的地方，我已经用汉字注解标注。

好了，在完成上述工作以后，将你所修改好的文件上传，就大功告成了。现在，别人如果要搜索你的网页，可以非常快速的用Google在你的网页上立即完成，一个字－酷！

Technorati Tags: Google, AJAX, Search, 搜索, 使用手册

© SUN for 徘徊在玻璃之城, 2007. | Permalink | 与时俱进 | One comment