Python Web开发:设计“新闻详情”页面

来自CloudWiki
跳转至: 导航搜索

实训步骤

编辑“新闻详情”页面

newsApp/templates中新建newDetail.html:

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
新闻详情
{% endblock %}
{% block content %}
<link href="{% static 'css/news.css' %}" rel="stylesheet">
<!-- 主体内容 -->
<div class="container">
    <div class="model-details-product-title">
        {{mynew.title}}
        <div class="model-foot">发布时间:{{mynew.publishDate|date:"Y-m-d"}}   
            浏览次数:{{mynew.views}}</div>
    </div>
    <div class="model-details">
        {{ mynew.description | safe }}
    </div>
</div>
{% endblock %}

编写CSS

新建news.css:

/* 新闻详情 */
.model-details-product-title{
	padding:15px 0px;
	font-size:18px;
	border-bottom:1px #005197 solid; 
	color:#005197;
	margin-bottom:10px;
	margin-top:10px;
	text-align:center;
}

/* 新闻主体副标题 */
.model-foot{
	padding:5px 0px;
	font-size:14px;
	color:#545353;
	margin-top:10px;
	text-align:center;
}

上述代码传入模板变量mynew渲染“发布时间”和“浏览次数”,

在主体描述部分采用了{{mynew.description|safe}}来实现富文本的内容渲染,此时django模板会自动解析富文本中的内容,

效果图

Python21051902.png