MyFirstBlog/MyBlog/templates/article/detail.html

{% extends "base.html" %}
{% load static %}
{% block title %}
    文章详情:{{ article.title }}
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <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">
                <h1 class="mt-4 mb-4">
                    {{ article.title }}
                </h1>

                <div class="col-12 alert alert-success">
                    作者: {{ article.author }}
                    {% if user == article.author %}
                        · <a href="#" onclick="confirm_delete()">
                        删除文章
                    </a>
                        · <a href="{% url 'article:article_update' article.id %}">
                        编辑文章
                    </a>
                    {% endif %}
                    <div>
                        浏览:{{ article.total_views }}
                    </div>
                    <form style="display: none"
                          id="safa_delete"
                          action="{% url 'article:article_safe_delete' article.id %}"
                          method="post"
                    >
                        {% csrf_token %}
                        <button type="submit">
                            发送
                        </button>
                    </form>
                </div>
                {% if article.avatar %}
                    <div class="row mt-2">
                        <img src="{{ article.avatar.url }}"
                             alt="avatar"
                             style="max-width: 100%; border-radius: 20px;"
                        >
                    </div>
                    <hr/>
                {% endif %}
                <div class="col-12">
                    <p>
                        {{ article.body|safe }}
                    </p>
                </div>
                <hr>
                {% if user.is_authenticated %}
                    <div>
                        <form action="{% url 'comment:post_comment' article.id %}" method="post">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="body">
                                    <strong>
                                        发表评论
                                    </strong>
                                </label>
                                <!--<textarea type="text" class="form-control" id="body" name="body" rows="2"></textarea>-->
                                <div>
                                    {{ comment_form.media }}
                                    {{ comment_form.body }}
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">发送</button>
                        </form>
                    </div>
                    <br>
                {% else %}
                    <br>
                    <h5 class="row justify-content-center">
                        请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                    </h5>
                    <br>
                {% endif %}
                {% load mptt_tags %}
                <h4>共有{{ comments.count }}条评论</h4>
                <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>
    </div>
    <script>
        function confirm_delete() {
            layer.open({
                title: "删除文章",
                content: "确认删除这篇文章吗？",
                yes: function (index, layero) {
                    $('form#safe_delete button').click();
                    layer.close(index);
                },
            })
        }
    </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>
        // 加载 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 %}