WordPress纯静态化后，cookie记住评论者信息的评论框不能隐藏问题

WordPress 采用 CDN 纯静态 html 加速以后，出现了一个很蛋疼的小问题：用 cookie 记住评论者的用户名、邮箱信息后，当评论者再次刷新页面或再次浏览该页面时，上述信息时赤裸裸地保留在那里了，如图1所示，而我们之前的自动隐藏功能没有了，没有了。我们需要的是图2 那种样子。

本网站（时光在路上，https://www.timezls.com，ｈｔｔｐs：／／ｗｗｗ．ｔiｍｅｚｌｓ．ｃｏｍ）采用BY-NC-SA协议进行授权，凡本网强调版权为本网所有的文/图，使用时必须注明文章来源，违者本网将依法追究责任。本网在文章中注明来源的文/图等稿件均为转载或经过编辑整理，本网出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如其他媒体、网站或个人从本网下载使用，必须保留本网注明的稿件来源信息，并自负版权等法律责任。如果您看到这两段隐藏文字，说明您在浏览器设置中关了JavaScript属性。关闭此属性后本站一些功能将会丢失，排版可能会导致错乱，请不要这样做。

到底发生了什么？来看看 comments.php 文件里面的代码吧：

<?php elseif ( '' !=$comment_author ): ?>
<div class="author_avatar">
<?php echo get_avatar($comment_author_email, $size='64' ); ?>
<?php printf ( '欢迎 <strong>%s</strong>', $comment_author); ?> 再次光临<br /><a href="javascript:toggleCommentAuthorInfo();" id="toggle-comment-author-info">修改信息</a>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var changeMsg = " 修改信息";
var closeMsg = " 关闭";
function toggleCommentAuthorInfo() {
jQuery('#comment-author-info').slideToggle('slow',
function() {
if (jQuery('#comment-author-info').css('display') == 'none') {
jQuery('#toggle-comment-author-info').text(changeMsg);
} else {
jQuery('#toggle-comment-author-info').text(closeMsg);
}
});
}
jQuery(document).ready(function() {
jQuery('#comment-author-info').hide();
});
//]]>
</script>
</div>
<?php endif; ?>

<?php elseif ( '' !=$comment_author ): ?> 为后端 PHP 程序的判断，并不能在纯静态 html 网页中应用，所以评论者信息框就不会折叠起来了。因此，解决这个问题需要前端 JavaScript 代码。

张戈博客在《WordPress记住评论用户信息的js版本，直接操作cookie无视缓存》一文中介绍了如何使用 cookies 记住用户信息，可以此基础上添加一些代码以解决这个问题：

// *********************************************************
// 目的：加载信息
// *********************************************************
function LoadRememberInfo() {
var strName=GetCookie("author");
var strEmail=GetCookie("email");
var strHomePage=GetCookie("url");
var bolRemember=GetCookie("chkRemember");
var a_vlaue= document.getElementById("author");
if (a_vlaue != null){
if(bolRemember=="true"){ //如果勾选了“记住我”
if(strName){document.getElementById("author").value=decodeURIComponent(strName);}; // 从 cookie获取填写昵称
if(strEmail){document.getElementById("email").value=strEmail;}; //从 cookie获取填写邮箱
if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);}; //从 cookie获取填写网址
if(bolRemember){document.getElementById("saveme").checked=bolRemember;};
// ***********************增加的部分************************** //
document.getElementById("reply-title").style.display="none"; // 隐藏“发表评论”一行的文字
jQuery(document).ready(function(){ // 隐藏评论者用户名、邮箱和网址信息部分
jQuery('#comment-author-info').hide();
});
// 增加记住cookie 后的用户名，其中头像自己上传了一个统一的，而没有根据邮箱地址拉取
// sub_reply-title 为“发表评论”一行下面的文字的id
document.getElementById("sub_reply-title").innerHTML="<div class='author_avatar'><img alt='avatar' src='https://www.timezls.com/头像图片地址' class='avatar' width='45' height='45'><span>欢迎 <b>" + document.getElementById("author").value + "</b> 再次光临<br /><a href='javascript:toggleCommentAuthorInfo();' id='toggle-comment-author-info' style='float:left;color:#00a0b1;'>修改信息</a></span></div>";
}
// ***********************增加的部分************************** //
if(GetCookie("username")){
document.getElementById("author").value=unescape(GetCookie("username"));
}
}
}

张戈博客代码的最后面，添加如下代码：

// 点击 href='javascript:toggleCommentAuthorInfo();' 后展开和隐藏评论者信息框
function toggleCommentAuthorInfo() {
var changeMsg = " 修改信息";
var closeMsg = " 关闭";
jQuery('#comment-author-info').slideToggle('slow', function(){
if ( jQuery('#comment-author-info').css('display') == 'none' ) { // 如果评论者信息填写框被隐藏
jQuery('#toggle-comment-author-info').text(changeMsg); //则改变标签内容为“修改信息”
} else {
jQuery('#toggle-comment-author-info').text(closeMsg); //否则显示为"关闭"
}
});
}

现在，网页的静态化所遇到的问题解决了（图3 所示）。

代码分享链接: pan.baidu.com/share/init?surl=nv2Yhx3 密码: 125x