页面代码:
{% extends 'base.html' %}
{% block live1 %}<title>{{ daily_list.2 }}---</title>
{% endblock %}
{% block live3 %}
<div class="read_pic">
<div class="read_title">
{{ daily_list.2 }}
</div>
</div>
{##个人日志飞机蓝色♔,时间☪,浏览❄橙色,喜欢心型红色❤,评论三叶草绿色☘#}
<div class="read_title_li">
<label class="read_title_li1">♔ 个人日志</label>
<label class="read_title_li2">☪ {{ daily_list.7 }}</label>
<label class="read_title_li3">❄ {{ daily_list.4 }}</label>
<label class="read_title_li4">❤ {{ daily_list.5 }}</label>
<label class="read_title_li5">☘ {{ daily_list.6 }}</label>
</div>
{# 正文#}
<div class="read_content">
{{ daily_list.3|safe }}
</div>
{# 作者专利说明#}
<div class="read_writer">
本文作者:Liveblog <br>
本文仅代表作者个人观点,转载请注明来源。
</div>
{# 喜欢#}
<div class="read_like">
<div class="read_likes">
<a href="#"><img src="../static/images/like.png"></a>
</div>
</div>
{# 上下篇#}
<div class="read_up_down">
<div class="read_up">
{% if up == '没有上一篇了' %}
上一篇:<a href="#">{{ up }}</a>
{% else %}
上一篇:<a href="daily.html?read={{ ups }}">{{ up }}</a>
{% endif %}
</div>
<div class="read_down">
{% if down == '没有下一篇了' %}
下一篇:<a href="#">{{ down }}</a>
{% else %}
下一篇:<a href="daily.html?read={{ downs }}">{{ down }}</a>
{% endif %}
</div>
</div>
{#主评论区#}
<form method="post" name="form1">{% csrf_token %}
<div class="read_comments"><input type="text" value="{{ daily_list.0 }}" hidden="hidden" name="did">
<label># </label>评论区
</div>
<div class="read_name">
<div class="read_nicheng">
昵称<label>*</label>
</div>
<div class="read_nichenginput">
<input placeholder="NAME" name="name" type="text">
</div>
</div>
<div class="read_comment">
<textarea id="read" name="comments"></textarea>
</div>
<div class="read_button">
<button type="submit" onclick="fun1()">发表</button>
</div>
</form>
{% for com in com_list %}
{# 具体评论信息#}
<div class="read_pl">
{#单个评论信息#}
<div>
{# 头像,昵称,时间#}
<div>
<div class="read_headimage"><img src="../static/headimages/{{ com.pic }}.png"></div>
<div class="read_nickname">{{ com.username}}</div>
<div class="read_time">{{ com.publicationdate }}</div>
</div>
{# 评论内容#}
{% if com.dadname == '0' %}
<div class="read_plnr">{{ com.content|safe }} <span class="layui-badge layui-bg-orange" id="reply" style="cursor: pointer;">回复</span></div>
{% else %}
<div class="read_plnr"><label style="color: orange">@{{ com.dadname }}:</label>{{ com.content|safe }} <span id="reply" class="layui-badge layui-bg-orange" style="cursor: pointer;">回复</span></div>
{% endif %}
{# 下面是子评论富文本框#}
<form method="post" name="form2">{% csrf_token %}<input name="articleid" type="text" hidden="hidden" value="{{ com.articleid }}">
<input type="text" name="dadid" hidden="hidden" value="{{ com.id }}"><input type="text" value="{{ com.username }}" name="dadname" hidden="hidden">
<div id="edit" class="read_comment1"><div class="read_nichenginput1"><input name="uname" placeholder="NAME"></div><br>
<textarea id="read1" name="ucomments"></textarea><br><div class="read_comment2"><button class="replay1" type="button">取消</button> <button type="submit" onclick="fun2()">回复</button></div></div>
</form>
</div>
{# 分割线#}
</div>
<hr class="read_hr">
{% endfor %}
<div class="home_bottom_bottom"></div>
<script type="text/javascript">
function fun1() {
document.form1.action="daily.html";
document.form1.submit();
}
function fun2() {
document.form2.action="publishcomments.html";
document.form2.submit();
}
</script>
<script type="text/javascript">
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('read', {
height: 140, //设置编辑器高度
tool: ['face']
});
var layedit1 = layui.layedit;
layedit1.build('read1', {
height: 140, //设置编辑器高度
tool: ['face']
});
});
</script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".layui-badge layui-bg-orange").click(function(event){
$(this).closest(".read_pl").find(".read_comment1").show();
});
$(".replay1").click(function(event){
$(this).closest(".read_pl").find(".read_comment1").hide();
});
});
</script>
{% endblock %}
需要实现的是:在原来的基础上,子评论显示layui的富文本编辑器,然后主评论区和子评论提交到不同的后台地址(js中已给出form1和form2),尽量不更改class名字,因为牵扯到样式问题。谢谢!