Django实现文章展示的详情

一编写mysite/article/list_views.py，增加文章详情视图函数

# 没有登录的用户也可以访问这个函数
def article_detail(request, id, slug):
    article = get_object_or_404(ArticlePost, id=id, slug=slug)
    return render(request, "article/list/article_detail.html", {"article":article, })

二增加URL配置代码

from django.conf.urls import url
from . import views, list_views

urlpatterns = [
    url(r'^article-column/$', views.article_column, name="article_column"),
    url(r'^rename-column/$', views.rename_article_column, name="rename_article_column"),
    url(r'^del-column/$', views.del_article_column, name="del_article_column"),
    url(r'^article-post/$', views.article_post, name="article_post"),
    url(r'^article-list/$', views.article_list, name="article_list"),
    url(r'^article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', views.article_detail, name="article_detail"),
    url(r'^del-article/$', views.del_article, name="del_article"),
    url(r'^redit-article/(?P<article_id>\d+)/$', views.redit_article, name="redit_article"),
    url(r'^list-article-titles/$', list_views.article_titles, name="article_titles"),
    # 视图函数虽然和前面相同，但可以根据不同的视图文件来区分，但name应该不同
    url(r'^list-article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', list_views.article_detail, name="list_article_detail"),
]

三创建详情页的前端模板mysite/templates/article/list/article_detail.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}文章详情{% endblock %}
{% block content %}
<div>
    <header>
        <h1>{{ article.title }}</h1>
        <p>{{ user.username }}</p>
    </header>

    <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}" />
    <div id='editormd-view'>
        <textarea id="append-test" style="display:none;">
{{ article.body }}
        </textarea>
    </div>

</div>
<script src='{% static "js/jquery.js" %}'></script>
<script src='{% static "editor/lib/marked.min.js" %}'></script>
<script src='{% static "editor/lib/prettify.min.js" %}'></script>
<script src='{% static "editor/lib/raphael.min.js" %}'></script>
<script src='{% static "editor/lib/underscore.min.js" %}'></script>
<script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script>
<script src='{% static "editor/lib/flowchart.min.js" %}''></script>
<script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script>
<script src='{% static "editor/editormd.js" %}'></script>
<script type="text/javascript">
$(function(){
    editormd.markdownToHTML("editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
});
</script>
{% endblock %}

四重写mysite/article/models.py，新增get_url_path

class ArticlePost(models.Model):
    author = models.ForeignKey(User, related_name="article")
    title = models.CharField(max_length=200)
    slug = models.SlugField(max_length=500)
    column = models.ForeignKey(ArticleColumn, related_name="article_column")
    body = models.TextField()
    # 得到文章发布时的日期和时间
    created = models.DateTimeField(default=timezone.now)
    updated = models.DateTimeField(auto_now=True)


    class Meta:
        ordering = ("title",)
        # 对数据库中的这两个字段建立索引，会通过每篇文章的id和slug获取该文章对象
        # 这样建立索引后，能提高文章对象的速度
        index_together = (('id', 'slug'),)

    def __str__(self):
        return self.title

    # 对save方法进行重写，主要实现slugify操作
    def save(self, *args, **kargs):
        self.slug = slugify(self.title)
        super(ArticlePost, self).save(*args, **kargs)

    # 获取某篇文章对象的URL，并传递参数，由名字得到URL
    def get_absolute_url(self):
        return reverse("article:article_detail", args=[self.id, self.slug])
    # 匹配到url(r'^list-article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', list_views.article_detail, name="list_article_detail"),
    def get_url_path(self):
        return reverse("article:list_article_detail", args=[self.id, self.slug])

五修改mysite/templates/article/list/article_titles.html，新增超链接

{% extends "base.html" %}
{% block title %} 文章展示 {% endblock %}

{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>阅读，丰富头脑，善化行为</h1>
</div>
<div class="container">
    {% for article in articles %}
    <div class="list-group">
        <!--调用ArticlePost中的get_url_path-->
        <a href="{{article.get_url_path}}" class="list-group-item active">
            <h4 class="list-group-item-heading">{{article.title}}</h4>
        </a>
        <!--article.author能够关联到User对象，然后获得该对象的username-->
        <p class="list-group-item-text">作者：{{article.author.username}}</a></p>
        <!--文章的内容切下前70个字符，linebreaks表示原文中的换行HTML标记符继续产生效用-->
        <p class="list-group-item-text">概要：{{article.body|slice:'70'| linebreaks}}</p>
    </div>
    {% endfor %}
<!--引入分页模板-->
{% include "paginator.html" %}
</div>
{% endblock %}

六测试

Django实现文章展示的详情

猜你喜欢