首页 > 代码修改 > 多说留言板实现分层评论的方法【点点适用】
2012
10-30

多说留言板实现分层评论的方法【点点适用】

大家一看题目可能不是很清楚,具体效果如下图所示:

多说留言板实现分层评论的方法【点点适用】 - 第1张  | 心岛博客

上图为评论紧跟留言,为了让大家看的更清楚,下面图示直接引用多说留言版的效果图,以进行对比:

多说留言板实现分层评论的方法【点点适用】 - 第2张  | 心岛博客多说留言板实现分层评论的方法【点点适用】 - 第3张  | 心岛博客

通过两张图片的对比大家依然明白了,这种方法更能增加用户体验,下面是实现此方法的图文教程:

首先,登录多说,并利用DW或者其他文本加工工具新建一个界面,并加入如下代码:

<!DOCTYPE html>
                                                
<html>
<head>
<meta charset="UTF-8" />
<title>Duoshuo Custom</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input#duoshuo_domain').change(function(){
        $('form').attr('action', this.value+'/api/sites/settings.json');
    });
});
</script>
</head>
<body>
<div id="main" class="content">
<form method="post" action="" class="form-horizontal">
    <label>多说域名<input id="duoshuo_domain" type="url" value="http://xxx.duoshuo.com" size="30"/></label><br/>
    <label>启用多级评论,最多<input type="number" name="max_depth" value="3" />层</label><br/>
    <label>每页<input type="number" name="per_page" value="20" />条评论(最多100)</label><br/>
    <button type="submit" class="btn btn-primary" data-loading-text="正在保存">保存</button>
</form>
</div>
</body>
</html>

并进行保存后备用。

其次,直接双击该文件,以浏览器打开此文件,如下图所示:

多说留言板实现分层评论的方法【点点适用】 - 第4张  | 心岛博客

在此需要将多说域名、启用多级评论的层数以及每页评论数量进行填写,填写完毕后点击保存按钮即可!

保存后的页面如下图所示:

多说留言板实现分层评论的方法【点点适用】 - 第5张  | 心岛博客

到此,多说留言板分层已经设置完毕了,如果配合多说留言板头像180度旋转的css代码一文中的css样式表进行处理,就会达到本站留言板的效果!还等什么,快试试吧!如有问题,敬请留言!

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。