文章详情页（路由分发）

【一】需求

• 点击文章标题链接跳转到文章详情页上面

【二】路由配置

 path('<slug:username>/article/', include('article.urls')),
 path('<int:pk>/',article_detail,name='article_detail')
    

【三】后端反向解析

def article_detail(request,username, pk, *args, **kwargs):
    article_data_obj=Article.objects.filter(blog__userinfo__username=username)
    print(article_data_obj)
    article_obj = Article.objects.get(pk=pk)
    # print(article_obj)
    return render(request, 'article_detail.html', locals())

【四】前端

• site页面把路由引过来

      <div class="col-md-10">
            {% block site_main %}
                    <div class="pull-right">随笔 - {{ article_data_all.count }}</div>
                <hr>
                {#  {% for article_obj in article_data_all %} #}
                {% for article_obj in page_queryset %}
                    <div class="media">
                        <div class="media-heading"><h4>
                            <a href="{% url 'article_detail' username article_obj.pk %}">{{ article_obj.title }}</a></h4></div>
                        <div class="media-body">[摘要] &nbsp; {{ article_obj.desc }}</div>
                        <br>
                        <div class="media-bottom pull-right">
                            posted
                            @ {{ article_obj.create_time|date:"Y-m-d H:i:s" }}
                            <a href="">{{ article_obj.blog.userinfo.username }}</a>
                            点赞({{ article_obj.up_num }}) 评论({{ article_obj.comment_num }})
                            点踩({{ article_obj.down_num }})
                            <a href="">编辑</a>
                        </div>
                    </div>
                    <hr>
                {% endfor %}
                <div class="text-center">
                    {{ page_obj.page_html|safe }}
                </div>

            {% endblock %}
            </div>

• article_title.html文章详情页面

{% extends 'site.html' %}
{% block site_main %}
    <div class="media">
    <div>
        <div class="media-heading pull-right">
            随笔 - {{ article_data_obj.count }} 点赞数 - {{ article_obj.up_num }} 点踩数 - {{ article_obj.down_num }}
            评论数 - {{ article_obj.comment_num }}
        </div>
        <br>
        <div class="media-title">
           <h4> {{ article_obj.title }}</h4>
        </div>
        <hr>
        <div class="media-body">
            {# 看到页面上的效果是页面源码 带标签的页面源码 而不是 页面 #}
            {# 两种解决办法 : 一种是在前端加转换器 |safe  另一种是在后端你直接对源代码 进行 mark_safe  #}
            {{ article_obj.content|safe }}
        </div>
    </div>
{% endblock %}