Python Web开发：设计“新闻列表”页面

“新闻列表”页面

在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">