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>