Python Web开发:设计“新闻列表”页面
来自CloudWiki
“新闻列表”页面
在newsApp应用中创建templates文件夹,
然后在该文件夹中创建newList.html
newList.html:
{% extends "base.html" %} {% load staticfiles %} {% block title %} {{newName}} {% endblock %} {% block content %} <link href="{% static 'css/news.css' %}" rel="stylesheet"> <!-- 广告横幅 --> <div class="container-fluid"> <div class="row"> <img class="img-responsive model-img" src="{% static 'img/new.jpg' %}"> </div> </div> <!-- 主体内容 --> <div class="container"> <div class="row row-3"> <!-- 侧边导航栏 --> <div class="col-md-3"> <div class="model-title"> 新闻动态 </div> <div class="model-list"> <ul class="list-group"> <li class="list-group-item" id='company'> <a href="{% url 'newsApp:news' 'company' %}">社团要闻</a> </li> <li class="list-group-item" id='industry'> <a href="{% url 'newsApp:news' 'industry' %}">学院新闻</a> </li> <li class="list-group-item" id='notice'> <a href="{% url 'newsApp:news' 'notice' %}">通知公告</a> </li> </ul> </div> </div> <!-- 说明文字和图片 --> <div class="col-md-9"> <div class="model-details-title"> {{newName}} </div> <div class="model-details"> {% for mynew in newList %} <div class="news-model"> <img src="{% static 'img/newsicon.gif' %}"> <a href="#"><b>{{mynew.title}}</b></a> <span>【{{mynew.publishDate|date:"Y-m-d"}}】</span> <p> <!-- 添加新闻简要说明 --> </p> </div> {% endfor %} {% if pageData %} <div class="paging"> <ul id="pages" class="pagination"> {% if pageData.first %} <li><a href="?page=1">1</a></li> {% endif %} {% if pageData.left %} {% if pageData.left_has_more %} <li><span>...</span></li> {% endif %} {% for i in pageData.left %} <li><a href="?page={{i}}">{{i}}</a></li> {% endfor %} {% endif %} <li class="active"><a href="?page={{pageData.page}}"> {{pageData.page}}</a></li> {% if pageData.right %} {% for i in pageData.right %} <li><a href="?page={{i}}">{{i}}</a></li> {% endfor %} {% if pageData.right_has_more %} <li><span>...</span></li> {% endif %} {% endif %} {% if pageData.last %} <li><a href="?page={{pageData.total_pages}}"> {{pageData.total_pages}}</a></li> {% endif %} </ul> </div> {% endif %} </div> </div> </div> </div> {% endblock %}
讲解:
- 主体渲染部分没有采用Bootstrap缩略图,而是采用了一个class="news-model"的<div>类
- 新闻日期输出:采用了模板过滤器 date:"Y-m-d"来格式化显示。
新闻列表CSS
在style.css的同目录下创建news.css :
/* 分页控件样式 */ .paging{ text-align:center; } .pagination .active a{ background-color:#005197; border-color:#005197; } /* 新闻列表样式 */ .news-model{ margin-top:15px; } .news-model span{ float:right; } .news-model a{ color:#666; font-size:16px; } .news-model a:hover, .news-model a:focus{ text-decoration:none; color:#d30a1c; } .news-model p{ margin-top:5px; font-size:13px; } /* 新闻详情 */ .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; } /* 新闻搜索框 */ .model-details-title-search{ font-size:18px; width: 300px; float: right; margin-bottom: 20px; } /* 全文搜索样式 */ .news-search-model span{ float:none; } .news-model a span{ float: none; } .highlighted { color: red; }
最后,在newList.html文件中的{% block %}内添加样式引用
<link href="{% static 'css/news.css' %}" rel="stylesheet">