29-----BBS论坛

BBS论坛（二十九）

29.帖子详情页布局

（1）front/hooks.py

@bp.errorhandler
def page_not_found():
    return render_template('front/front_404.html'),404

（2）front/front_404.html

复制代码
<!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

@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

 <p class="post-title"><a href="{{ url_for('front.post_detail',post_id=post.id) }}">{{ post.title }}</a></p>

（5）front_postdetail.html

复制代码
{% 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

复制代码
*{
    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%;
}
复制代码

 

posted @   王竹笙  阅读(191)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
点击右上角即可分享
微信分享提示
SQL AI 助手