|
|
@@ -6,11 +6,13 @@
|
|
|
{% block content %}
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
- <div class="col-3 mt-4">
|
|
|
- <h4><strong>目录</strong></h4>
|
|
|
- <hr>
|
|
|
- <div>
|
|
|
- {{ tor|safe }}
|
|
|
+ <div class="col-3 mt-4 sidebar" id="sidebar">
|
|
|
+ <div class="sidebar__inner">
|
|
|
+ <h4><strong>目录</strong></h4>
|
|
|
+ <hr>
|
|
|
+ <div>
|
|
|
+ {{ tor|safe }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-9">
|
|
|
@@ -84,22 +86,76 @@
|
|
|
</h5>
|
|
|
<br>
|
|
|
{% endif %}
|
|
|
+ {% load mptt_tags %}
|
|
|
<h4>共有{{ comments.count }}条评论</h4>
|
|
|
- <div>
|
|
|
- {% for comment in comments %}
|
|
|
- <hr>
|
|
|
- <p>
|
|
|
- <strong style="color: pink">
|
|
|
- {{ comment.user }}
|
|
|
- </strong>于
|
|
|
- <span style="color: green">
|
|
|
- {{ comment.created|date:"Y-m-d H:i:s" }}
|
|
|
- </span>时评论道:
|
|
|
- </p>
|
|
|
- <pre style="font-family: inherit;font-size: 1em;">
|
|
|
- {{ comment.body|safe }}
|
|
|
- </pre>
|
|
|
- {% endfor %}
|
|
|
+ <div class="row">
|
|
|
+ <!-- 遍历树形结构 -->
|
|
|
+ {% recursetree comments %}
|
|
|
+ <!-- 给 node 取个别名 comment -->
|
|
|
+ {% with comment=node %}
|
|
|
+ <div class="{% if comment.reply_to %}
|
|
|
+ offset-1 col-11
|
|
|
+ {% else %}
|
|
|
+ col-12
|
|
|
+ {% endif %}">
|
|
|
+ <hr>
|
|
|
+ <p>
|
|
|
+ <strong style="color: pink">
|
|
|
+ {{ comment.user }}
|
|
|
+ </strong>
|
|
|
+ {% if comment.reply_to %}
|
|
|
+ <i class="far fa-arrow-alt-circle-right"
|
|
|
+ style="color: cornflowerblue;"
|
|
|
+ ></i>
|
|
|
+ <strong style="color: pink">
|
|
|
+ {{ comment.reply_to }}
|
|
|
+ </strong>
|
|
|
+ {% endif %}
|
|
|
+ </p>
|
|
|
+ <div>{{ comment.body|safe }}</div>
|
|
|
+ <div>
|
|
|
+ <span style="color: gray">
|
|
|
+ {{ comment.created|date:"Y-m-d H:i" }}
|
|
|
+ </span>
|
|
|
+ <!-- 加载 modal 的按钮 -->
|
|
|
+ {% if user.is_authenticated %}
|
|
|
+ <button type="button"
|
|
|
+ class="btn btn-light btn-sm text-muted"
|
|
|
+ onclick="load_modal({{ article.id }}, {{ comment.id }})">
|
|
|
+ 回复
|
|
|
+ </button>
|
|
|
+ {% else %}
|
|
|
+ <a class="btn btn-light btn-sm text-muted"
|
|
|
+ href="{% url 'userprofile:login' %}">
|
|
|
+ 回复
|
|
|
+ </a>
|
|
|
+ {% endif %}
|
|
|
+ </div>
|
|
|
+ <!-- Modal -->
|
|
|
+ <div class="modal fade"
|
|
|
+ id="comment_{{ comment.id }}"
|
|
|
+ tabindex="-1"
|
|
|
+ role="dialog"
|
|
|
+ aria-labelledby="CommentModalCenter"
|
|
|
+ aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
|
+ <div class="modal-content" style="height: 480px">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="modal-title" id="exampleModalCenterTitle">
|
|
|
+ 回复 {{ comment.user }}:</h5>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {% if not comment.is_leaf_node %}
|
|
|
+ <div class="children">
|
|
|
+ {{ children }}
|
|
|
+ </div>
|
|
|
+ {% endif %}
|
|
|
+ </div>
|
|
|
+ {% endwith %}
|
|
|
+ {% endrecursetree %}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -117,10 +173,55 @@
|
|
|
}
|
|
|
</script>
|
|
|
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
|
|
|
+ <!-- 粘性侧边栏样式 -->
|
|
|
+ <style>
|
|
|
+ .sidebar {
|
|
|
+ will-change: min-height;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar__inner {
|
|
|
+ transform: translate(0, 0);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+ will-change: position, transform;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">
|
|
|
{% endblock content %}
|
|
|
{% block script %}
|
|
|
-<script>
|
|
|
- $(".django-ckeditor-widget").removeAttr('style');
|
|
|
-</script>
|
|
|
+ <!--二级回复-->
|
|
|
+ <script>
|
|
|
+ // 加载 modal
|
|
|
+ function load_modal(article_id, comment_id) {
|
|
|
+ let modal_body = '#modal_body_' + comment_id;
|
|
|
+ let modal_id = '#comment_' + comment_id;
|
|
|
+
|
|
|
+ // 加载编辑器
|
|
|
+ if ($(modal_body).children().length === 0) {
|
|
|
+ let content = '<iframe src="/comment/post_comment/' +
|
|
|
+ article_id +
|
|
|
+ '/' +
|
|
|
+ comment_id +
|
|
|
+ '"' +
|
|
|
+ ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
|
|
|
+ comment_id +
|
|
|
+ '"></iframe>';
|
|
|
+ $(modal_body).append(content);
|
|
|
+ }
|
|
|
+ ;
|
|
|
+
|
|
|
+ $(modal_id).modal('show');
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <!--侧边栏-->
|
|
|
+ <script>
|
|
|
+ $(".django-ckeditor-widget").removeAttr('style');
|
|
|
+ </script>
|
|
|
+ <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ $('#sidebar').stickySidebar({
|
|
|
+ topSpacing: 20,
|
|
|
+ bottomSpacing: 20,
|
|
|
+ });
|
|
|
+ </script>
|
|
|
{% endblock script %}
|