Flask实战第62天：帖子详情页布局
在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天：帖子详情页布局的更多相关文章
- 用Vue来实现音乐播放器（四十）：歌单详情页布局以及Vuex实现路由数据通讯
1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中 定义一个别名 ...
- 一百四十二：CMS系统之帖子详情页面布局
定义一个404页面 <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
- BBS-文章详情页、点赞功能
文章详情页--布局中header和左边区域不变--用到继承 home_site和article_detail只是布局 中心区域 只是右侧不同-----用到继承原理 -------- url # 文章详 ...
- java亿级流量电商详情页系统的大型高并发与高可用缓存架构实战视频教程
亿级流量电商详情页系统的大型高并发与高可用缓存架构实战 完整高清含源码,需要课程的联系QQ:2608609000 1[免费观看]课程介绍以及高并发高可用复杂系统中的缓存架构有哪些东西2[免费观看]基于 ...
- mxonline实战13，授课讲师列表页，详情页，index页面全局导航
对应github地址:第13天 把teacher-list.html和teacher-detail.html拷贝过来 一. 授课讲师列表页 1. 修改html文件 把org-list.ht ...
- mxonline实战11，课程详情页2，课程章节页
对应github地址:第11天 一. 课程详情页2 1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码
- mxonline实战10，课程列表页，课程详情页1
对应github地址:第10天 一. 课程列表页 1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加
- 25、Django实战第25天：讲师详情页
1.复制teacher-detail.html到templates目录下 2.编辑teacher-detail.html,继承base.html 3.编辑organization.view.py cl ...
- 20、Django实战第20天：课程详情页
1.把course-detail.html复制到templates目录下 2.编辑course-detail.html,分析页面,继承base.html 3.编辑courses.views .... ...
随机推荐
- [Luogu 1160] 队列安排
Luogu 1160 队列安排 链表H2O H2O H2O模板. 太久不写链表,忘干净了,竟调了半个晚上. 保留备用. #include <cstdio> #include <cst ...
- 使用Apache Curator监控Zookeeper的Node和Path的状态
1.Zookeeper经常被我们用来做配置管理,配置的管理在分布式应用环境中很常见,例如同一个应用系统需要多台 PC Server 运行,但是它们运行的应用系统的某些配置项是相同的,如果要修改这些相同 ...
- Mantis 从Windows 迁移到Linux上
1. 导出windows manits的mysql数据库文件, 在cmd运行:mysqldump -uroot -p3edc$RFV bugtracker > C:/mantis.sql; 2. ...
- 【BZOJ4884】太空猫 [DP]
太空猫 Time Limit: 1 Sec Memory Limit: 256 MB[Submit][Status][Discuss] Description 太空猫(SpaceCat)是一款画面精 ...
- 【BZOJ4868】期末考试 [三分][贪心]
期末考试 Time Limit: 20 Sec Memory Limit: 512 MB[Submit][Status][Discuss] Description Input Output Samp ...
- 51Nod 1228 序列求和
T(n) = n^k,S(n) = T(1) + T(2) + ...... T(n).给出n和k,求S(n). 例如k = 2,n = 5,S(n) = 1^2 + 2^2 + 3^2 + 4^ ...
- 【NOIP】普及组2011 表达式的值
[算法]动态规划+后缀表达式 [题解] 先把算式转为后缀表达式后进行DP 令f[s][0]表示使表达式答案为0的方案数 f[s][1]表示使表达式答案为1的方案数 (加法) f[a+b][1]=f[a ...
- Codeforces Round #482 (Div. 2) B题
题目链接:http://codeforces.com/contest/979/problem/B B. Treasure Hunt time limit per test1 second memory ...
- kndo grid：通过checkbox 实现多选和全选
在kendo grid 里要想通过checkbox 实现多选和权限,我们就要通过templeate 和input 标签对kendo grid 进行自定义 1. 在column 里面加入一列checkb ...
- unbutu下Io language的解释器安装
今晚看Io,然后要安装解释器,然后就记录下来了... 首先去官网下载 http://iolanguage.com 在页面下方的binaries那里找到自己系统对应的版本,我的是x64deb的,本来是下 ...