在templates/front/下创建详情页面front_pdetail.html

编辑front.views.py创建详情页的视图函数

from flask import abort

...

@bp.route('/p/<post_id>/')

def post_detail(post_id):

    post = PostModel.query.get(post_id)

    if not post:

        abort(404)

    return render_template('front/front_pdetail.html', post=post)

上面写了，如果帖子不存在，则返回404，我们先创建个404页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BBS论坛404页面</title>

</head>

<body>

    您要找的页面已经到火星去了~~

    <div>

        <a href="/">回到首页</a>

    </div>

</body>

</html>

front_404.html

然后我们写个钩子函数，返回404的页面， 编辑front.hooks.py

@bp.errorhandler

def page_not_found():

    return render_template('front/front_404.html'),404

帖子详情页面布局

编辑front_pdetail.html

{% extends 'front/front_base.html' %}

{% block title %}

    {{ post.title }}

{% endblock %}

{% block head %}

    <link rel="stylesheet" href="{{ url_for('static', filename='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 %}

front_pdetail.html

.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%;

}

front_pdetail.css

在首页配置帖子的链接

Flask实战第62天：帖子详情页布局的更多相关文章

  1. 用Vue来实现音乐播放器（四十）：歌单详情页布局以及Vuex实现路由数据通讯

    1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 ...

  2. 一百四十二：CMS系统之帖子详情页面布局

    定义一个404页面 <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  3. BBS-文章详情页、点赞功能

    文章详情页--布局中header和左边区域不变--用到继承 home_site和article_detail只是布局 中心区域 只是右侧不同-----用到继承原理 -------- url # 文章详 ...

  4. java亿级流量电商详情页系统的大型高并发与高可用缓存架构实战视频教程

    亿级流量电商详情页系统的大型高并发与高可用缓存架构实战 完整高清含源码,需要课程的联系QQ:2608609000 1[免费观看]课程介绍以及高并发高可用复杂系统中的缓存架构有哪些东西2[免费观看]基于 ...

  5. mxonline实战13，授课讲师列表页，详情页，index页面全局导航

    对应github地址:第13天   把teacher-list.html和teacher-detail.html拷贝过来   一. 授课讲师列表页   1. 修改html文件 把org-list.ht ...

  6. mxonline实战11，课程详情页2，课程章节页

    对应github地址:第11天   一. 课程详情页2   1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码

  7. mxonline实战10，课程列表页，课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加

  8. 25、Django实战第25天：讲师详情页

    1.复制teacher-detail.html到templates目录下 2.编辑teacher-detail.html,继承base.html 3.编辑organization.view.py cl ...

  9. 20、Django实战第20天：课程详情页

    1.把course-detail.html复制到templates目录下 2.编辑course-detail.html,分析页面,继承base.html 3.编辑courses.views .... ...

随机推荐

  1. 大聊Python----SocketServer

    什么是SocketServer? SocketServer的最主要的作用是实现并发处理,也就是可以多个用户同时上传和下载文件. socketserver模块简化了编写网络服务器的任务. sockets ...

  2. python调参神器hyperopt

    一.安装 pip install hyperopt 二.说明 Hyperopt提供了一个优化接口,这个接口接受一个评估函数和参数空间,能计算出参数空间内的一个点的损失函数值.用户还要指定空间内参数的分 ...

  3. Linux 入门记录：二、Linux 文件系统基本结构

    一.树状目录结构 Linux 文件系统是一个倒置的单根树状结构.文件系统的根为"/":文件名严格区分大小写:路径使用"/"分割(Windows 中使用" ...

  4. java===java基础学习（6）---流程控制，for，if，switch，continue，break

    注意点: for循环的用法和python截然不同,注意格式 switch~,switch对应的case每当执行完毕都要break,由于基本不怎么用switch,所以作为了解. 中断流程控制语句,请考虑 ...

  5. python 命名规范最近遇到的问题

    1.remove redundant parentheses 出去多余的括号,写C#习惯了先加个括号,python的if不用加括号. 改为:if chrome_args().get("hea ...

  6. 剑指offer-高质量的代码

    小结: 规范性:书写清晰.布局清晰.命名合理 完整性:完成基本功能.考虑边界条件.做好错误处理 鲁棒性:采取防御性编程.处理无效输入 面试这需要关注 输入参数的检查 错误处理和异常的方式(3种) 命名 ...

  7. 【LabVIEW技巧】你可以不懂OOP，却不能不懂封装

    前言 大多数写LabVIEW程序的工程师都不是一个纯软的工程师,很多做硬件的.做机械的.甚至学化学的也会学习LabVIEW. 由于主要重心不在软件,所以LabVIEW程序基本上能用行,也就得到入门容易 ...

  8. Network——物理层-练习题与解答

    1. 无线电天线通常在其直径等于无线电波的波长的情况下工作效果最好.合理的天线直径的范围是从1厘米到5米.问所覆盖的频率范围是怎样的? 解答: λf = c , c=3x108 (m/s) 对于λ=1 ...

  9. Webstorm和Eclipse常用快捷键

    快捷键配置 点击“File”-> “settings” Webstorm预置了其他编辑器的快捷键配置,可以点击 默认配置-Eclipse的常用快捷键对照表 查找/代替 Webstorm快捷键 E ...

  10. overflow属性在IE6下面失去效果

    自然状态下 overflow的属性设置,本来是超过了一定的长度时会自动产生滚动条,但是在ie6下面失效了. 例如:原来的代码: .code{overflow-x:auto;margin:5px aut ...