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模板会自动解析富文本中的内容,