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

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

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