40 - 个人博客项目-11- 文章详情

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

(1). 继承公共模板

javascript 复制代码
{% extends 'base.html' %}
 
{% block title %}
    文章详情
{% endblock %}

(2). 编写文章样式

css 复制代码
{% 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). 编写详情页面

html 复制代码
{% 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><span
                        tag="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 %}"><a
                                    href="{{ url_for('article.article_detail') }}?page={{ comments.prev_num }}&aid={{ article.id }}"><span
                                    aria-hidden="true">&larr;</span> 上一页</a></li>
 
                            <li class="next {% if not comments.has_next %}disabled{% endif %}"><a
                                    href="{{ url_for('article.article_detail') }}?page={{ comments.next_num }}&aid={{ article.id }}">下一页
                                <span
                                        aria-hidden="true">&rarr;</span></a></li>
                        </ul>
                    </nav>
                </div>
 
 
            </div>
        </div>
    </div>
{% endblock %}

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

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

2. 编写文章详情函数

python 复制代码
# 文章详情页
@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 = None
    user_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 ,点击标题进入详情

html 复制代码
 <h4><a href="{{ url_for('article.article_detail') }}?aid={{ article.id }}">{{ article.title }}</a></h4>
相关推荐
moxiaoran575314 小时前
Flask学习笔记(一)
后端·python·flask
yzx99101314 小时前
接口协议全解析:从HTTP到gRPC,如何选择适合你的通信方案?
网络·人工智能·网络协议·flask·pygame
带娃的IT创业者1 天前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
0_0梅伊阁诗人1 天前
Flask
开发语言·数据库·python·flask
程序员的世界你不懂2 天前
【Flask】实现一个前后端一体的项目-脚手架
后端·python·flask
安岁的笔记本3 天前
Flask/Django 生产部署:Gunicorn vs Nginx,Windows 与 Linux 实战指引
django·flask·gunicorn
Q_Q19632884753 天前
python+springboot大学生心理测评与分析系统 心理问卷测试 自动评分分析 可视化反馈系统
开发语言·spring boot·python·django·flask·node.js·php
Q_Q5110082853 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
EvanSun__4 天前
Flask 框架引入
后端·python·flask
神仙别闹4 天前
基于 Python + redis + flask 的在线聊天室
redis·python·flask