在 Blogger/Blogspot 实现了 javascript 点击展开或收起评论框,好处有二:当评论数量极多时可以快速收起评论块(DIV),读者能直接处理评论框下方的页面信息;如果同时加载多个评论插件(例如多说、Blogger 原生评论),JS 可快速切换评论插件交替出现。
代码
<a class='show-hide-comments' href='javascript:void();' onclick='$("#ds-thread").slideToggle();$("#comments").hide(); $("#fb-comments").hide();$("#disqus_thread").hide();' title='使用多说评论'><i class='sprite sprite-ds'/></a>
释义
蓝色渲染的
#ds-thread
是操作对象评论框的元素标识。鼠标点击展开、收起的操作指向这个元素标识(id)。这里展开、收起切换(toggle)元素标识的 javascript 语法是:onclick='$("#id-name").slideToggle()
红色渲染的元素标识用在排他性评论框。上述代码表示:无论#ds-thread是展开还是收起,其他元素都给我一齐好好藏着。
绿色渲染的这一段 HTML 代码自由度极大,可以展示一段文字、一个图标、一个 CSS Sprite 对象,也就是鼠标点击网页的对象。
使用
首先,在 Blogger/Blogspot 控制后台加入第三方评论插件的代码。接着,在紧贴
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
的前面加入上述 javascript toggle 代码。
记得评论插件的元素标识(id)的命名和数量与 javascript toggle 内的控制对象完全对应。譬如说,额外加载了多说、Facebook 和 Disqus 插件,在 javasript toogle 也要按
#ds-thread
、#ds-facebook
、#ds-disqus
元素标识对应。最后,如果有必要的话写入层叠样式 CSS,改变切换元素标识的外观。
Comments