1. 新建 templates / article / detail.html 文章详情页面

        (1). 继承公共模板

{% extends 'base.html' %}{% block title %}文章详情
{% endblock %}

        (2). 编写文章样式

{% block styles %}{{ super() }}<style>#container {width: 1200px;margin: 0 auto;background-color: #83cae3;border-radius: 30px;padding: 20px;}#container h2 {text-align: center;}#shang {margin-top: 20px;}#shang span {margin-left: 10px;}#container p {overflow: auto;}#left {float: left;}#right {float: right;}#content {margin-top: 60px;}#item_left {display: inline-block;margin-top: 20px;}#item_left img {width: 60px;height: 60px;border-radius: 50px;margin-left: 100px;}#item_right {margin-top: 20px;display: inline-block;float: right;clear: both;margin-right: 65%;}</style>
{% endblock %}

        (3). 编写详情页面

{% block newcontent %}<div id="container"><div id="detail"><h2>{{ article.title }}</h2><div id="shang"><div id="left"><span>作者:{{ article.user.username }}</span><span>发布时间:{{ article.pdatetime }}</span></div><div id="right"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><spantag="0">{{ article.save_num }}</span><span class="glyphicon glyphicon-thumbs-up"aria-hidden="true"></span><span tag="0">{{ article.love_num }}</span></div></div><div id="content">{{ article.content|cdecode|safe }}</div><hr><div id="comment"><p>文章评论:</p><div><form action="#" method="post"><input type="hidden" name="aid" value="{{ article.id }}"><p><textarea name="comment" class="form-control" rows="5" cols="60">写下你的评论吧~</textarea></p><p><input type="submit" value="评论" class="btn btn-info"></p></form></div></div><p></p><div id="comment_item">{% if comments.items %}{% for comment in comments.items %}<div class="item"><div id="item_left"><img src="{% if comment.user.icon %}{{ url_for('static',filename=comment.user.icon) }}{% else %}{{ url_for('static',filename='images/touxiang.jpg') }}{% endif %}"></div><div id="item_right"><p><span>{{ comment.user.username }}</span><span>{{ comment.cdatetime }}</span></p><p>{{ comment.comment }}</p></div><hr>{% endfor %}{% else %}<div class="item">当前文章还没有评论,赶快发表意见吧</div>{% endif %}</div><div id="paginate"><nav aria-label="..."><ul class="pager"><li class="previous {% if not comments.has_prev %}disabled{% endif %}"><ahref="{{ url_for('article.article_detail') }}?page={{ comments.prev_num }}&aid={{ article.id }}"><spanaria-hidden="true">&larr;</span> 上一页</a></li><li class="next {% if not comments.has_next %}disabled{% endif %}"><ahref="{{ url_for('article.article_detail') }}?page={{ comments.next_num }}&aid={{ article.id }}">下一页<spanaria-hidden="true">&rarr;</span></a></li></ul></nav></div></div></div></div>
{% endblock %}

        (4). 编写js, 操作文本域点击后,默认内容清空

{% block scripts %}{{ super() }}<script>$(function () {//文本域$('textarea[name="comment"]').focus(function () {$(this).val("")})})</script>
{% endblock %}

2. 编写文章详情函数

# 文章详情页
@article_bp.route('/detail')
def article_detail():# 通过文章id获取文章对象article_id = request.args.get('aid')article = Article.query.get(article_id)# 获取文章分类types = Article_type.query.all()# 登录用户user = Noneuser_id = session.get("uid", None)if user_id:user = User.query.get(user_id)# 单独查询评论page = int(request.args.get("page", 1))comments = Comment.query.filter(Comment.article_id == article_id).order_by(-Comment.cdatetime).paginate(page=page,per_page=5)return render_template("article/detail.html", article=article, types=types, user=user, comments=comments)

3. 配置首页 index.html ,点击标题进入详情

 <h4><a href="{{ url_for('article.article_detail') }}?aid={{ article.id }}">{{ article.title }}</a></h4>