一、帖子中心区域是 <div class="container">
（1）在里面实现一个 <div class="row">，包含左右两个小模块区：<div class="col-md-8 left-content-panel"> 和 <div class="col-md-4 right-sidebar">
其中用 django内置的 class="row"，可以使两个左右模块在一行显示，col-md-8，col-md-4 分别表示左右的横向宽度（总共是12）
（2）在 左模块区 left-content-panel里，放的是帖子列表，建一个<div class="content-box">
{% for article in articles %} 循环显示所有article，再一次横向显示图片和文章，
新建一个<div class="article-box row">，把循环结果放入这个<div> 里,
包含 <div class="article-head-img col-md-3"> 和<div class="article-summary col-md-8">，
（3）右侧文章区域，标题建立一个链接
<h4><a href="{% url ‘article_detail‘ article.id %}">{{ article.title }}</a></h4>
标题下面，建立 <div class="artcile-attr">，显示文章属性，
要一行显示 使用<ul class="list-inline">，如：<li>{{ article.auther.name }}</li>
不是同一张表的信息，使用
<li>thumbup: {{ article.thumbup_set.select_related.count }}</li>
（4）因为每个帖子之间要分割，所以最后加上 <hr/>
<div class="container">
{% block page-container %}
<div class="row">
<div class="col-md-8 left-content-panel">
<div class="content-box">
{% for article in articles %}
<div class="article-box row">
<div class="article-head-img col-md-3">
<img src="/static/imgs/test.jpg">
</div>
<div class="article-summary col-md-8">
<h4><a href="{% url ‘article_detail‘ article.id %}">{{ article.title }}</a></h4>
<div class="artcile-attr">
<ul class="list-inline">
<li>{{ article.auther.name }}</li>
<li>{{ article.publish_date }}</li>
<li>thumbup: {{ article.thumbup_set.select_related.count }}</li>
<li>comment: {{ article.comment_set.select_related.count }}</li>
</ul>
</div>
<p>{{ article.summary }}</p>
</div>
</div>
<hr/>
{% endfor %}
</div>
</div>
<div class="col-md-4 right-sidebar">
bar
</div>
</div>
{% endblock %}
</div> <!-- /container -->
二、在展示帖子信息时，遇到一个问题，之前建模的时候，文章表里面没有一个列是表示文章简介的，所以现在要加上去
models.py 加入
class Article(models.Model): summary = models.CharField(max_length=255)
再执行
python manage.py makemigrations
python manage.py migrate
三、index.html里面使用的新样式，需要自己编辑
css目录下新建custom.css
.left-content-panel{
border: 2px solid crimson;
}
.right-sidebar{
border: 2px solid black;
}
.article-head-img img{
height: 125px;
width: 200px
}
.article-summary{
margin-left: 20px;
}
然后在index.html里面加入
<!-- Custom styles for this template --> <link href="/static/bootstrap/css/custom.css" rel="stylesheet">
四、之前在文章列表里，每个标题都加了超链接，点击跳转每个文章详细信息
url.py
url(r‘^article/(\d+)/$‘,views.article_detail,name="article_detail")
views.py
from django.core.exceptions import ObjectDoesNotExist
def article_detail(request,article_id):
try:
article_obj = models.Article.objects.get(id=article_id)
except ObjectDoesNotExist as e:
return render(request,‘404.html‘,{‘err_msg‘:u"文章不存在!"})
return render(request,‘article.html‘,{‘article_obj‘:article_obj})
templates里面新建
404.html
{% extends ‘index.html‘ %}
{% block page-container %}
<h1 style="font-size: 200px" >404</h1>
<h3>{{ err_msg }}</h3>
{% endblock %}
article.html
{% extends ‘index.html‘ %}
{% block page-container %}
<div class="artile-detail"></div>
<h4>{{ article_obj.title }}</h4>
<p>{{ article_obj.content }}</p>
{% endblock %}