前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BBS论坛(二十九)

BBS论坛(二十九)

作者头像
zhang_derek
发布2019-02-13 15:57:14
3390
发布2019-02-13 15:57:14
举报
文章被收录于专栏:有趣的django

29.帖子详情页布局

(1)front/hooks.py

代码语言:javascript
复制
@bp.errorhandler
def page_not_found():
    return render_template('front/front_404.html'),404

(2)front/front_404.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <p>您要找的页面飞到火星去了!!!!!</p>
    <a href="/">回到首页</a>

</body>
</html>

(3)front/views.py

代码语言:javascript
复制
@bp.route('/p/<post_id>')
def post_detail(post_id):
    print(post_id)
    post=PostModel.query.get(post_id)
    if not post:
        abort(404)
    return render_template('front/front_postdetail.html',post=post)

(4)front_index.html

代码语言:javascript
复制
 <p class="post-title"><a href="{{ url_for('front.post_detail',post_id=post.id) }}">{{ post.title }}</a></p>

(5)front_postdetail.html

代码语言:javascript
复制
{% extends 'front/front_base.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    {{ post.title }}
{% endblock %}

{% block head %}

    <link rel="stylesheet" href="{{ static('front/css/front_pdetail.css') }}">
{% endblock %}

{% block body %}
    <div class="lg-container">
        <div class="post-container">
            <h2>{{ post.title }}</h2>
            <p class="post-info-group">
                <span>发表时间:{{ post.create_time }}</span>
                <span>作者:{{ post.author.username }}</span>
                <span>版块:{{ post.board.name }}</span>
                <span>阅读数:{{ post.read_count }}</span>
                <span>评论数:0</span>
            </p>
            <article class="post-content" id="post-content" data-id="{{ post.id }}">
                {{ post.content|safe }}
            </article>
        </div>
    </div>

    <div class="sm-container"></div>

{% endblock %}

(6)front/css/front_pdetail.css

代码语言:javascript
复制
*{
    margin:0;
    padding:0
}
.post-container{
    border:1px solid #e6e6e6;
    padding: 10px;
}
.post-info-group{
    font-size: 12px;
    color: #8c8c8c;
    border-bottom:1px solid #e6e6e6;
    margin-top: 20px;
    padding-bottom: 10px;

}
.post-info-group span{
    margin-right: 20px;
}
.post-content{
    margin-top: 20px;
}
.post-content img{
    max-width:100%;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 29.帖子详情页布局
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档