Flask实战第59天：首页帖子布局完成

编辑front_index.html

<div id="carousel-example-generic" class="carousel slide index-banner" data-ride="carousel">
    ...
<div class="post-group">
    <ul class="post-group-head">
            <li class="active"><a href="{{ url_for("front.index",st=1,bd=current_board) }}">最新</a></li>
            <li><a href="{{ url_for("front.index",st=2,bd=current_board) }}">精华帖子</a></li>
            <li><a href="{{ url_for("front.index",st=3,bd=current_board) }}">点赞最多</a></li>
            <li><a href="{{ url_for("front.index",st=4,bd=current_board) }}">评论最多</a></li>
    </ul>
    <ul class="post-list-group">
        {% for post in posts %}
            <li>
                <div class="author-avatar-group">
                    <img src="{{ post.author.avatar or url_for('static',filename='common/images/logo.png') }}" alt="">
                </div>
                <div class="post-info-group">
                    <p class="post-title">
                        <a href="#">{{ post.title }}</a>
                        {% if post.highlight %}
                            <span class="label label-danger">精华帖</span>
                        {% endif %}
                    </p>
                    <p class="post-info">
                        <span>作者:{{ post.author.username }}</span>
                        <span>发表时间:{{ post.create_time }}</span>
                        <span>评论:0</span>
                        <span>阅读:0</span>
                    </p>
                </div>
            </li>
        {% endfor %}
    </ul>
</div>
</div>

编辑front_index.css

.index-banner{
    border-radius: 10px;
    overflow: hidden;
    height: 200px;
}

/*需要把图片的高度和轮播的一致*/
.index-banner img{
    height: 200px;
}

.post-group{
    border: 1px solid #ddd;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 5px;
    padding: 10px;
}

.post-group-head{
    overflow: hidden;
    list-style: none;
}

.post-group-head li{
    float: left;
    padding: 5px 10px;
}

.post-group-head li a{
    color:#333;
}

.post-group-head li.active{
    background: #ccc;
}

.post-list-group{
    margin-top: 20px;
}

.post-list-group li{
    overflow: hidden;
    padding-bottom: 20px;
}

.author-avatar-group{
    float: left;
}

.author-avatar-group img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.post-info-group{
    float: left;
    margin-left: 10px;
    border-bottom: 1px solid #e6e6e6;
    width: 85%;
    padding-bottom: 10px;
}

.post-info-group .post-info{
    margin-top: 10px;
    font-size: 12px;
    color: #8c8c8c;
}

.post-info span{
    margin-right: 10px;
}

front_index.css

编辑front_base.html

<ul class="nav navbar-nav navbar-right">
  {% if g.front_user %}
      <span id="login-tag" data-is-login="1" style="display:none;"></span>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            {{ g.front_user.username }}
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">个人中心</a></li>
            <li><a href="#">设置</a></li>
            <li><a href="#">注销</a></li>
          </ul>
      </li>
  {% else %}
      <li><a href="{{ url_for('front.signin') }}">登录</a></li>
      <li><a href="{{ url_for("front.signup") }}">注册</a></li>
  {% endif %}
</ul>

front_base.html