# feat:学院简介页面美化

pythonweb/aboutApp/templates/about.html

@@ -1,15 +1,11 @@
 {% extends "base.html" %}
 
-{% block title %}
-学院概况
-{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 
 {% block content %}
-<!-- 主体内容 -->
 <div class="container">
-    <div class="row row-3">
-        <!-- 侧边导航栏 -->
-        <div class="col-md-3">
+    <div class="row">
+                <div class="col-md-3">
             <div class="model-title">
                 学院简介
             </div>
@@ -30,24 +26,41 @@
                 </ul>
             </div>
         </div>
-        <!-- 说明文字和图片 -->
-<!--        文章或者列表-->
         <div class="col-md-9">
-            <div class="model-details-title">
-                {{title}}
-            </div>
-            {% if type == 'art'%}
+            <div class="model-details-title">{{ title }}</div>
+            {% if type == 'art' %}
             <div class="model-details">
-                {{content|safe }}
+                {{ content|safe }}
             </div>
-            {% elif type == 'list'%}
-<!--            列表-->
-            <ul class="list-group">
-                {% for item in list %}
-                <a href="{%url 'article' id=item.id%}" target="_blank" class="list-group-item">{{item.title}}<span class="pull-right">{{ item.created_at }}</span></a>
-                {% endfor %}
-            </ul>
             {% else %}
+            <div class="row">
+                {% for article in list %}
+                <div class="col-md-4">
+                    <div class="thumbnail">
+                        {% if article.cover %}
+                        <img src="{{ article.cover }}" alt="{{ article.title }}" class="img-responsive" style="height:200px;object-fit:cover;">
+                        {% endif %}
+                        <div class="caption">
+                            <h4 style="text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><a href="{%url 'article' id=article.id%}" target="_blank">{{ article.title }}</a></h4>
+                            <p style="text-align:center;color:#999;">{{ article.created_at|date:"Y-m-d" }}</p>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% if list.has_other_pages %}
+            <nav>
+                <ul class="pagination">
+                    {% if list.has_previous %}
+                    <li><a href="?page={{ list.previous_page_number }}">&laquo;上一页</a></li>
+                    {% endif %}
+                    <li><span>第 {{ list.number }} / {{ list.paginator.num_pages }} 页</span></li>
+                    {% if list.has_next %}
+                    <li><a href="?page={{ list.next_page_number }}">下一页&raquo;</a></li>
+                    {% endif %}
+                </ul>
+            </nav>
+            {% endif %}
             {% endif %}
         </div>
     </div>