上一篇文章我们说道了导航栏目的设置,这篇文章我们说一下主页面的布局.

bootstrap栅栏系统

栅栏系统就是负责展示比例的,我们采用2-8-2布局,就是说,一整块屏幕我们分成12分,左右各占2份用来显示广告,中间显示博客主题内容.栅栏布局详情

bootstrap面板

面板是广告位的样式
点击查看

展示文章包括头像

首先得要从后台拿到数据
拿到所有的文章数据

def index(request):
    # 查询所有的文章列表
    article = models.Article.objects.all()

    return render(request, "index.html",{"article_list":article})

循环的拿到文章的标题,desc,这边关于头像有一个技术点:
头像使用户上传的,所有的用户上传的东西都放在media文件夹里,要在setting里面配置路径

# 在Django里面,用户上传的都叫media文件,这样才能看到用户头像
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR,"media")

另外拿到评论和点赞的数据也有一个技术点:
反向查询,我们先看看article表和comment表

class Article(models.Model):
    """
    文章
    """
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=50)  # 文章标题
    desc = models.CharField(max_length=255)  # 文章描述
    create_time = models.DateTimeField()  # 创建时间

class Comment(models.Model):
    """
    评论表
    """
    nid = models.AutoField(primary_key=True)
    article = models.ForeignKey(to="Article", to_field="nid")
    user = models.ForeignKey(to="UserInfo", to_field="nid")
    content = models.CharField(max_length=255)  # 评论内容
    create_time = models.DateTimeField(auto_now_add=True)
    parent_comment = models.ForeignKey("self", null=True)

可以看到comment是作为外键链接到article表的,所以不能用article.comment来查询,而是应该反向查询foo.comment_set.all.count拿到所有的评论数.

<div class="article-list">
                    {% for foo in article_list %}
                        <div class="article">
                            <h3>{{ foo.title }}</h3>
                            <div class="media">
                                <div class="media-left media-middle">
                                    <a href="#">
                                        <img class="media-object author-img img-circle" src="/media/{{ foo.user.avatar }}" alt="头像">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <p>{{ foo.desc }}</p>
                                </div>
                            </div>
                        <div class="article-footer">
                            <span><a href="">{{ foo.user.username }}</a></span>发布于
                            <span>{{ foo.create_time | date:"Y-m-d H:i:s" }}</span>
                            <span class="glyphicon glyphicon-comment">评论({{ foo.comment_set.all.count }})</span>
                            <span class="glyphicon glyphicon-thumbs-up">点赞({{ foo.articleupdown_set.all.count }})</span>
                        </div>
                        </div>
                    {% endfor %}

                </div>

效果

完整项目传至github,点击跳转