Django2训练新项目:开发设计本人blog系统软件(

这篇实例教程大家1起来进行Django2本人blog系统软件的文章内容详细信息模版。

在界定模版內容以前,大家先进行URL配备。

示例编码:

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

随后,大家刚开始模版的界定。

1、引进基础模版

引进基础模版以后,大家必须界定网页页面的题目。

应用DetailView会向模版传送1个根据Model的数据信息目标“object”,自然这个名字能够在主视图中重新写过。

在模版中大家便可以根据“object.title”获得特性,此外,还可以根据类名获得特性,比如“article.title”。

示例编码:(detail.html)

{% extends 'base.html' %}

{% block title %}{{ object.title }}{% endblock %} <!--界定文章内容题目內容-->

{% block content %}

...此处加上后续编码...

{% endblock %}

2、界定网页页面內容

文章内容详细信息网页页面关键包括下列內容:

文章内容內容(名字、作者、时间、种别、文章正文)

文章内容标识

评价目录(评价文章内容、回应评价)

公布评价(昵称、电子邮箱、內容、评价总体目标)

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、文章内容标识

1篇文章内容将会具备好几个标识,因此必须对文章内容的全部标识开展遍历,并展现在网页页面中。

此外,标识之间根据“|”开展隔开。

示例编码:

<div>

<h3>标识</h3>

{% for tag in object.tag.all %} <!--遍历全部标识-->

{{ tag }} <!--显示信息标识到网页页面-->

{% if not forloop.last %} <!--假如并不是循环系统的最终1项-->

| <!--显示信息1条竖线-->

{% endif %}

{% endfor %}

</div>

3、评价目录

评价目录必须按顶级评价分层。

由于HTML的目录标识“<ul>…</ul>”是成对的,每组评价內容都要写在这两个标识正中间,因此要留意标识的闭合。

这里存在1些逻辑性。

假如并不是第1条顶级评价,必须在评价內容前面再加“</ul>”标识,让前1组评价的标识闭合。

假如是顶级评价,必须在评价內容前再加“<ul>”标识。

假如并不是顶级评价,必须在评价中再加“>>>”,表明对哪个评价人的回应。

假如是最终1条评价,必须在评价內容结尾再加“</ul>”标识,让当今1组标识闭合。

示例编码:

<div>

<h3>评价</h3>

{% for comment in comment_list %} <!--遍历评价数据信息目录-->

{% if comment.reply == None %} <!--假如沒有回应总体目标(即顶级评价)-->

{% if not forloop.first %} <!--假如并不是循环系统遍历的第1项-->

</ul>

{% endif %}

<ul> <!--顶级评价-->

<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的特性中启用了1个js涵数 涵数的主要参数为评价人和评价id 此涵数在以后完成-->

</li> <!--class的特性值“active”可以让目录项款式为蓝色-->

{% else %}

<li> <!--回应评价-->

{{ 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 %} <!--假如是循环系统遍历的最终1项-->

</ul>

{% endif %}

{% empty %} <!--假如数据信息目录是空的-->

暂无评价!

{% endfor %}

</div>

4、发布评价

发布评价中关键是表模块素和款式的设定。

示例编码:

<div>

<h3 id="publish">发布评价</h3>

<input type="hidden" id="reply" name="reply" value="0"> <!--掩藏元素 用于纪录回应的总体目标-->

<div> <!--class中启用Bootstrap文字框组的款式-->

<span class="input-group-addon glyphicon glyphicon-user"></span>{{ comment_form.name }}

<!--span标识的class特性中启用Bootstrap文字框组的款式和文本标志-->

<!--span标识的后方根据表单字段转化成网页页面元素-->

</div>

<div style="margin-top: 10px"> <!--款式的功效是设定和上方的元素间距-->

<span class="input-group-addon glyphicon glyphicon-envelope"></span>{{ comment_form.email }}

</div>

<div 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>

<!--lable标识用于显示信息评价的提醒 默认设置掩藏 款式中界定了与上方元素的间隔 与左边按钮的竖直对齐方法 也有默认设置文本色调-->

</div>

到这里,大家的文章内容详细信息页就可以够一切正常的显示信息內容了。

大伙儿能够在Django自带的后台管理中加上1些评价內容,检测评价是不是显示信息一切正常。



扫描二维码分享到微信