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

作者：路杨 发布于 2007-05-27 13:28
版权声明：可以任意转载,但请务必以超链接形式标明文章原始出处、作者信息及本版权声明。
本文地址：https://easun.org/blog/archives/sitelog_mt_ajax.html

本站的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,希望对你有帮助：）

Categories:

Tags:

--EOF--