全新的评论区体验

最近又折腾上了 WordPress 模板,把很久没有动过的评论输入框做了些修葺,看上去有些不一样了 😮

对以前评论过的人隐藏资料输入部分

这个功能在很多博客都可以看到,让常客不再重复看到资料输入框,需要的时候点击就可以展开修改。另外预先显示评论者自己的全球阿凡达,用回形针别在右上角。下面欢迎来自天鹅海的组合大城小爱里的,小爱同学 做群众演员:

新的评论输入框设计

js 隐藏代码参考了 享总的文章,另外多了个享总没有提到的细节,展开和收起按钮按下之后会把焦点放到相应的输入框内,也就是多执行一个 .focus(); 以下是“更改”按钮 onclick 时执行的 jQuery 脚本:

$('#author_info').slideDown('fast');
$('#author').focus();
$('#show_author_info').hide();
$('#hide_author_info').show();

如果访客 cookies 中有曾经评论过的 email 信息,则预先显示头像。在 comments.php 中合适的地方先判断是否存在 email, 如果有则输出一个头像。

<?php if ( $comment_author_email ) {
    echo '<a href="...">' . get_avatar(
    $comment_author_email, 40 ) . '</a>';
} ?>

为了看上去生动些,头像被旋转了 10 度,这是用 CSS 实现的,参考我那篇关于 CSS3 动画的文章。这有一些浏览器的局限性,比如 Chrome Windows 一直有个 bug, 在图像被旋转后,边缘不能反锯齿;Firefox 则一直不能对无 padding 的图像进行圆角,除非图像处在背景中。于是我把 Firefox 下链接的 border 圆角也一并拿掉了。

动态的输入框浮动

GluedIdeas Subtle 主题原来是有输入框浮动的,但使用的是 position: fixed; 现在改成 jQuery 来做,在页面滚动的时候浮动是动态的了,顺便还兼容了 IE. 代码来自 CSS-Tricks.

可展开的表情按钮栏

表情按钮栏

表情按钮收起来了,放在大输入框内,点击则展开。同样是由 jQuery 来执行的,按钮按下的时候做三件事情:焦点放到大输入框里去;用 jQuery .toggle() 脚本来展开或收起表情按钮;按钮本身切换一个 class, 在笑脸和关闭叉叉之间切换。

$('#comment').focus();
$('#smilies_toolbar').toggle('fast');
$('#toggle-smilies').toggleClass('close');

新的评论回复样式

回复评论

回复别人的评论时出现一个黄色的提示条,类似于博客界出名的 绿条禅,同时有个小箭头指向被回复的评论。

评论回复是基于枫叶的插件 WordPress Thread Comment, 经过了枫叶和我的一些修改,目前这样已经完全符合我的需要了。喜欢这个插件的朋友不妨去插件页进行捐助,支持开发。

评论列表

左侧评论列表也有一些小的变化,比如回复会比较小一些,编号字体换成了 Georgia, 以前我没有放上每条评论的链接,现在也放在了编号上,只不过颜色还是灰色的。

最后

如果出现显示问题可能需要刷新一下,避免使用浏览器缓存,最近的改动挺多的。另外如果您发现滚动很卡,可以回复我说一下浏览器和电脑配置 😛

更新

本文发布 3 小时,评论数达到 98 条,当然主要是几个朋友在疯狂灌水啦,除了我自己之外差不多就是:ELL Jimmy Xu Sunny lisker, 大家都在盖楼──往地下室盖。

WordPress Thread Comment 这个插件是限制回复层数的,但仅仅是在超过层数的时候不输出回复按钮,而数据发往服务器并不验证。之前在 @terryxxy (上面的 Sunny)博客上我就在说,改动很简单,只需要 Firebug, 或者 Safari, Chrome 上类似的自带调试工具。找到评论输入框下面用来发送相关数据的两个 <input type=”hidden”>:

<p>
    <input type="hidden" id="comment_reply_ID"
    name="comment_reply_ID" value="0" />
    <input type="hidden" id="comment_reply_dp"
    name="comment_reply_dp" value="0" />
</p>

在 value 里填入想要回复的评论 ID 和深度 dp 就可以了。这也是按了回复按钮之后会通过 javascript 修改的两个数值。这样就可以无限回复下去了。你猜最后回复到了地下多少层?B31! 以前我只在回复前标一个 “Re”, 今天为了大家盖楼方便,把地下楼层编号 B2 B3 也输出了 👿

然后新的问题出现了,每层回复都会在左边缩进,比如 margin-left: 20px; 算算地下 31 层得多少,早就撑破了。锲而不舍的 Jimmy Xu 同学不光一直往下破,而且还在截图 😮

于是呢,我在插件设置页加入了一点判断,当楼层数 $deep > 14 的时候多输出一个 class=”min-width”, 然后让它 margin-left: 0; 效果是在地下 14 层之后不再缩进。但 Jimmy 同学 觉得不满意,最后我的方案:

<?php echo ' style="margin-left: ' . ceil(30/sqrt($deep)) . 'px; "'; ?>

进行了 margin-left = 30除以(楼层数开平方)再取整,第一层回复 30px, 第四层 15px, 到第 25 层,margin-left 就只有 6px 了。于是呢,从线性变为弧线,看看最后的效果:

另外下面是 @terryxxy 在 70 条评论的时候的截图,点击查看完整全图 https://img.ly/z8O

最新评论

  • fisio 可不,Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪!今天整理Evernote,发现这条2010年的剪藏笔记,点击连接,原网站还在!12年了,中文互联网早已面目全非! Google Reader 的分享和效率
  • 小波 重新改博客,看看以前的wp小伙伴的博客,发现绝大部分都关了,没想到你的还在,只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地!您也是老司机了 我为什么爱 Twitter

发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈💖🎂

目前有 221 条评论

              1. 我google 了一下你的后花园。。。还后花园呢。。。明明是秘密花园。。。都有密码了。

                外加这个密码让我想到。。。http://yoursunny.com/

                                                                    1. 蜀黍。这个要根据年龄。和性别的不同加以区分。。外加我是拿英镑的。。蜀黍。。你不能亏待我的。 (;′⌒`)

  1. 报告一个chrome下面的bug,评论框移动过后,就一直看不到“发表评论”的按钮。
    不知道别人有没有碰到,还是确实不知道chrome。

      1. 是的,谢谢反馈,我也有时候遇到,那是页面在加载的时候滚动造成的 js offset 计算错误,刷新一般可以解决 8D

  2. 不知道是不是bug呢?
    在chrome下面,一直往网页最下边滑动,评论填表区也自动跟着下滑,就会出现一大片空白~~ 😛

    1. 嗯,这种事情会在两种情况下出现:

      窗口高度不够
      浮动框定位错误,不是固定在顶上数20px 而是从窗口中部开始

      第二个情况是js对窗口已滚动的距离计算错误,目前也没有什么好的解决办法,不过一般可以刷新解决 🙂

  3. 老肥能提供一份你的主题给我嘛。我对你博客的评论制作很感兴趣,想学学怎么制作出来的。可以的话,提供一份给我吧。实在不行的话,发一份评论模板与函数模板给我也可以,只是想研究一下你的模板制作。

    可以的话,发到我的邮箱:zqjilove@qq.com

    非常感谢了

    1. 博主你好 有空帮我看看我站里改的有没有不对的地方,指点我一下!特别是评论这一块。谢谢 忘记给地址了:http://zhuangweb.com/

  4. 博主,怎么把评论框搞得浮动的呀。学习来了。求教呀,是不是按照这个教程,可以修改别的模板吗。谢谢了,急等回复哟 😛 👍

  5. 可爱的网站,像你的用心致敬,一个bug:邮箱不填会弹出对话框里的提示,接着弹出wordpress的提示,而且提示是英文的。