[SiteLog]简单修改模板实现 MT Ajax方式的“评论预览"

| 4 Comments | 1 TrackBack | WebBlog Articles

本站的SiteLog,也算是对MT的一个小Hack吧:)

一直觉得 MT 的“评论预览" 不够人性化,这样的东西当然是用 Ajax 方式好一点。网上也有现成的修改成 Ajax 发表评论和进行评论预览的插件,但是简单了看了看,总觉得太烦琐,太复杂,不利于将来的升级和增加服务器的负荷(不是玩笑,本来Ajax方式是减少负荷的,但是根据某个老外的Hack教程做了后,负荷反而增加了 -_-bbb)。
既然 Ajax 没有什么太多的技术含量,而我自己又不是想写个标准,通用的Ajax函数库出来,那么为什么不仅仅自己动手改改模板而来个”轻量级“的 Ajax方式的“评论预览"呢(至于发表评论还是传统模式吧)?
关于 Ajax ,我以前写过一些东西,在这里 http://easun.org/archives/3_50.html。这次修改模板就是以这个为基础的 :P

下面是修改的过程 :

1.修改”单篇日记归档“模板
归档模板 ->单篇日记归档 模板中找到发表评论的地方,在你认为合适的位置(按下”预览“按纽后显示预览内容的地方)加入以下代码

<script language="javascript" type="text/javascript">
function buildQueryString(form) {
var query = "<$MTSPAMCcodeKey default_name="Anonymous"$>=<$MTSPAMCcodeKeyValue default_name="AnonymousValue"$>";
//上面那句是我的Ccode插件的支持,请根据自己安装的其他关于评论垃圾过滤的插件增加或者修改
query += '&preview=1&static=1&entry_id=<$MTEntryID$>';
query += '&author='+ encodeURIComponent(form.author.value);
query += '&email='+ encodeURIComponent(form.email.value);
query += '&bakecookie='+ form.bakecookie.value;
query += '&text='+ encodeURIComponent(form.text.value);
return query;
}

function DoClosePreview() {
var el = document.getElementById('preview-div');
el.innerHTML = '';
el.className= 'preview-div-hide';
var obj = document.getElementById('comment-preview');
obj.disabled=false;
return false;
}

var req;
function loadXMLDoc(url, parameters)
{
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.setRequestHeader('Connection', 'close');
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send(parameters);
return;
}
// branch for IE/Windows ActiveX version
if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.setRequestHeader('Connection', 'close');
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send(parameters);
return;
}
}
alert("Sorry,Your Browse is so old.");
}

function PreviewMe(input, response)
{
if (response != ''){
// Response mode
var el = document.getElementById('preview-div');
el.className= 'preview-div';
el.innerHTML = response;
}else{
// Input mode
var obj = document.getElementById('comment-preview');
obj.disabled=true;
url = '<$MTCGIPath$><$MTCommentScript$>';
loadXMLDoc(url,buildQueryString(input));
}
}

function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {

response = req.responseText;

PreviewMe('', response);

} else {
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}
}
</script>
<div class="preview-div-hide" id="preview-div" name="preview-div"></div>


我自己是加在了
<textarea id="text" name="text" rows="15" cols="50"></textarea>
之前,也就是显示在了评论输入框的上方,你可以根据自己的爱好随意添加。
再找到
<input accesskey="v" name="preview" id="comment-preview" value="Preview" type="submit">
(可能根据每个人的情况有所不同),替换成
<input type='Button' accesskey="v" onclick="PreviewMe(this.form,'')" name="preview" id="comment-preview" value="先预览看看效果"/>

2.修改系统的 评论预览模板
打开模板 > 评论预览模板,把里面的所有的东西替换成如下的东西:

<h3>请预览你的评论:(<a href="#" onclick="return DoClosePreview();" title="点击关闭评论预览" >关闭预览</a>)</h3>
<div class="comment">
<div class="comment-content">
<$MTCommentPreviewBody$>
</div>
<p class="comment-footer">
By:
<$MTCommentPreviewAuthorLink default_name="匿名"$> |
<$MTCommentPreviewDate$>
</p>
</div>

3。修改CSS样式:
到此为止,从代码上来讲,已经完全完成了。但是别忘了我们为 preview-div定义了几个CSS样式,去后台的CSS模板,在其最后添加:

.preview-div { margin: 5px 0; padding: 5px 0; background: #eee ; display: block;}

.preview-div-hide { margin: 0; padding: 0; display: none; }

.preview-div h3{padding: 0 20px ; background: url("/images/arr.gif") no-repeat left; font-weight:bold;}


样式可以根据自己需要重新定义:)

4。重建整个blog,测试下结果吧:) 效果见本站的评论预览。

have a fun,希望对你有帮助:)

引用通告|TrackBacks (1)

本日志的TrackBack URL: http://easun.org/cgi-bin/mtos/tb_mt_41.pl/114.

以下罗列的是网络上引用了本日志 [[SiteLog]简单修改模板实现 MT Ajax方式的“评论预览"] 的 Blog 连接。

» [随想]也说Ajax 来自 [WebBlog:路杨] @ 2007年5月27日 14:31

Ajax现在很热门。 废话我不太会说,简单来个例子保存为HTML就是了。... [阅读更多...]

本文相关评论|Comments (4)

我以前也翻译过外国人的那篇(不知道和你说的是不是同一篇)让mt评论ajax化的文章,当时的感觉就是速度太慢,甚至比不用ajax还要慢一些,
那样几乎没有任何意义,就是看着像ajax了,用了一两天,后来就没再使用了。

但愿你这个速度可以好一点,效果好的话,我也用这个。

速度不错,呵呵。

只可惜这些ajax都只限于预览,要是在评论提交上的ajax也可以这么快就好了。

Dear leavic:
要对正式评论提交使用ajax就必须修改程序,就不是简单的修改模板完成的了:)
我这个没有动任何MT的代码,preview依然使用MT本身的函数而已。
另外对于评论提交,MT返回是刷新静态页面,我觉得也没有必要非要用ajax了 :P

好像这个东西还不错:)

发表该文评论|Leave a comment

最近发表|Recent Entries

[MT Tips]如何让某个日志在Blog首页固顶?

貌似最简单的办法就是修改日期到一个很遥远的日期,比如 AnySQL 那样:) 但是带来的问题的很多,比如导致Feed阅读器犯糊涂或者影响搜索引擎的收录等等,更糟糕的是对于 日志来说,最主要的就是发布日期。也许大家都已经发现了,我的主页模仿 MT Forum 搞了一个固顶日志(也是为了风格统一)出来,这个固顶日志是后台通过自己设置实现的。是怎么设置的。答案是利用 <mt:Entries> 的tags 功能。 具体概念代码如下:<mt:Entries tag="@top" sort_by="authored_on" sort_order="descend" limit="1" blog_ids="1,5"> dosthing.....</mt:Entries> 这样我们只要要在固定的主题 加上…

北京 Perl Workshop 2008 网站开张 - 接受大会注册,演讲报名

网站开张了, 地址是 http://conference.perlchina.org/bjpw2008/ 由 PerlChina 和 Postgresql China 合办,2008 年 11 月 8 号举行的 Beijing Perl Workshop 是一个免费的 Perl 交流会,向所有对…

好玩的 MT Forum 的按作者归档

Perl Forum 用 MT4 的 MT Forum 的功能搭建起来了好几天了,一直没有发现什么意外,今天突然发现 按作者按月归档 貌似找完了整个发布完的 Perl Forum 也没有找到 link ,查看作者个人信息貌似也没有 link ? 真是好玩的 归档方式。从后台看,给每个用户(作者)都建立了按月的归档页面,估计是为了便于各用户归档自己的文章吧? 后台抓图如下:…