最新消息:欢迎光临 魔力 • Python!大家可以点开导航菜单中的【学习目录】,这个目录类似图书目录,更加方便学习!

Django2练习项目:开发个人博客系统(9)

Django教程 小楼一夜听春语 2307浏览 0评论

这篇教程我们一起来完成Django2个人博客系统的文章详情模板。

在定义模板内容之前,我们先完成URL配置。

示例代码:

path('detail/<int:pk>', blog_view.ArticleDetail.as_view(), name='detail'),

然后,我们开始模板的定义。

一、引入基本模板

引入基本模板之后,我们需要定义页面的标题。

使用DetailView会向模板传递一个基于Model的数据对象“object”,当然这个名称可以在视图中重写。

在模板中我们就可以通过“object.title”获取属性,另外,也可以通过类名获取属性,例如“article.title”。

示例代码:(detail.html)

{% extends 'base.html' %}
{% block title %}{{ object.title }}{% endblock %} <!--定义文章标题内容-->
{% block content %}
...此处添加后续代码...
{% endblock %}

 

二、定义页面内容

文章详情页面主要包含以下内容:

  • 文章内容(名称、作者、日期、类别、正文)
  • 文章标签
  • 评论列表(评论文章、回复评论)
  • 发布评论(昵称、邮箱、内容、评论目标)

1、文章内容

 

示例代码:

<div>
    <h3>{{ object.title }}</h3>
    <p>作者:{{ object.author }} 日期:{{ object.pub_time }} 类别:<a
            href="{% url 'category' article.category.id %}">{{ article.category }}</a></p>
    {{ object.content | safe }} <!--过滤器safe能够让文章内容中的HTML标签生效-->
</div>

2、文章标签

一篇文章可能具有多个标签,所以需要对文章的所有标签进行遍历,并呈现在页面中。

另外,标签之间通过“|”进行分隔。

示例代码:

<div>
    <h3>标签</h3>
    {% for tag in object.tag.all %} <!--遍历所有标签-->
        {{ tag }} <!--显示标签到页面-->
        {% if not forloop.last %} <!--如果不是循环的最后一项-->
            | <!--显示一条竖线-->
        {% endif %}
    {% endfor %}
</div>

3、评论列表

评论列表需要按顶级评论分块。

因为HTML的列表标签“<ul>…</ul>”是成对的,每一组评论内容都要写在这两个标签中间,所以要注意标签的闭合。

这里存在一些逻辑。

如果不是第一条顶级评论,需要在评论内容前面加上“</ul>”标签,让前一组评论的标签闭合。

如果是顶级评论,需要在评论内容前加上“<ul>”标签。

如果不是顶级评论,需要在评论中加上“>>>”,表示对哪一个评论人的回复。

如果是最后一条评论,需要在评论内容末尾加上“</ul>”标签,让当前一组标签闭合。

示例代码:

<div>
    <h3>评论</h3>
    {% for comment in comment_list %} <!--遍历评论数据列表-->
        {% if comment.reply == None %} <!--如果没有回复目标(即顶级评论)-->
            {% if not forloop.first %} <!--如果不是循环遍历的第一项-->
                </ul>
            {% endif %}
            <ul class="list-group"> <!--顶级评论-->
            <li class="list-group-item active">{{ comment.name }}:{{ comment.content }} ({{ comment.publish }})
                <a href="#publish" onclick="reply('{{ comment.name }}',{{ comment.id }})"
                   style="color: white;align-self: right">[回复]</a>
                <!--onclick的属性中调用了一个js函数 函数的参数为评论人和评论id 此函数在之后实现-->
            </li> <!--class的属性值“active”能够让列表项样式为蓝色-->
        {% else %}
            <li class="list-group-item"> <!--回复评论-->
                {{ comment.name }} >>> {{ comment.reply.name }}:{{ comment.content }} ({{ comment.publish }})
                <a href="#publish" onclick="reply('{{ comment.name }}',{{ comment.id }})">[回复]</a>
                <!--“#publish”能够让页面滚动到发表评论的位置-->
            </li>
        {% endif %}
    {% if forloop.last %} <!--如果是循环遍历的最后一项-->
        </ul>
    {% endif %}
    {% empty %} <!--如果数据列表是空的-->
        暂无评论!
    {% endfor %}
</div>

4、发表评论

发表评论中主要是表单元素以及样式的设置。

示例代码:

<div>
    <h3 id="publish">发表评论</h3>
    <input type="hidden" id="reply" name="reply" value="0"> <!--隐藏元素 用于记录回复的目标-->
    <div class="input-group"> <!--class中调用Bootstrap文本框组的样式-->
        <span class="input-group-addon glyphicon glyphicon-user"></span>{{ comment_form.name }}
        <!--span标签的class属性中调用Bootstrap文本框组的样式以及文字图标-->
        <!--span标签的后方通过表单字段生成页面元素-->
    </div>
    <div class="input-group" style="margin-top: 10px"> <!--样式的作用是设置和上方的元素间隔-->
        <span class="input-group-addon glyphicon glyphicon-envelope"></span>{{ comment_form.email }}
    </div>
    <div class="input-group" style="margin-top: 10px">
        <span class="input-group-addon glyphicon glyphicon-edit"></span>{{ comment_form.content }}
    </div>
    <button id="submit_comment" type="button" class="btn btn-default" style="margin-top: 10px"><span
            class="glyphicon glyphicon-hand-up"></span> 回复
    </button> <!--button标签的class属性中调用Bootstrap按钮样式并通过span标签添加了文字图标-->
    <label id="comment_message" hidden style="margin-top: 10px;vertical-align: middle;color: green"></label>
    <!--label标签用于显示评论的提示 默认隐藏 样式中定义了与上方元素的间距 与左侧按钮的垂直对齐方式 还有默认文字颜色-->
</div>

到这里,我们的文章详情页就能够正常的显示内容了。

大家可以在Django自带的后台中添加一些评论内容,检验评论是否显示正常。

转载请注明:魔力Python » Django2练习项目:开发个人博客系统(9)

头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网站 (可选)