一、帖子中心区域是 <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 %}