Flask开发在线问答系统的点赞评论模块

谁践踏了优雅 2022-10-10 13:59 215阅读 0赞

# 前言 #

--------------------

# 添加回答 #

import os
    
    from flask import current_app
    from flask_login import current_user
    from flask_wtf import FlaskForm
    from flask_wtf.file import FileAllowed
    from werkzeug.utils import secure_filename
    from wtforms import StringField, TextAreaField, FileField
    from wtforms.validators import DataRequired, Length
    from flask_ckeditor import CKEditorField
    
    from models import Question, db, QuestionTags, Answer
    
    
    class WriteQuestionForm(FlaskForm):
        """ 写文章\问题 """
        img = FileField(label='上传图片', render_kw={ 
            'accept': ".jpeg, .jpg, .png"
        }, validators=[
            FileAllowed(['png', 'jpg', 'jpeg'], '请选择合适的图片类型')
        ])
        title = StringField(label='标题', render_kw={ 
            'class': "form-control",
            'placeholder': "请输入标题（最多50个字）"
        }, validators=[DataRequired('请输入标题'),
                       Length(min=5, max=50, message='标题长度为5-50字')])
        tags = StringField(label='标签', render_kw={ 
            'class': "form-control",
            'placeholder': "输入标签，用,分隔"
        })
        desc = TextAreaField(label='描述', render_kw={ 
            'class': "form-control",
            'placeholder': "简述"
        }, validators=[Length(max=150, message='描述最长为150字')])
        content = CKEditorField(label='文章内容', render_kw={ 
            'class': "form-control",
            'placeholder': "请输入正文"
        }, validators=[DataRequired('请输入正文'),
                       Length(min=5, message='不能少于5个字符')])
    
        def save(self):
            """ 发布问题 """
            # 1. 获取图片
            img = self.img.data
            img_name = ''
            if img:
                img_name = secure_filename(img.filename)
                img_path = os.path.join(current_app.config['MEDIA_ROOT'], img_name)
                img.save(img_path)
            # 2. 保存问题
            title = self.title.data
            desc = self.desc.data
            content = self.content.data
            que_obj = Question(
                title=title,
                desc=desc,
                img=img_name,
                content=content,
                user=current_user
            )
            db.session.add(que_obj)
            # 3. 保存标签
            tags = self.tags.data
            for tag_name in tags.split('，'):
                if tag_name:
                    tag_obj = QuestionTags(tag_name=tag_name, question=que_obj)
                    db.session.add(tag_obj)
            db.session.commit()
            return que_obj
    
    
    class WriteAnswerForm(FlaskForm):
        """ 写回答 """
        content = CKEditorField(label='回答内容', validators=[
            DataRequired('回答内容不能为空'),
            Length(min=5, message='回答内容至少5个字')
        ])
    
        def save(self, question):
            """ 保存表单数据 """
            content = self.content.data
            user = current_user
            answer_obj = Answer(content=content, user=user, question=question)
            db.session.add(answer_obj)
            db.session.commit()
            return answer_obj

{ % extends 'base_layout.html' %}
    { % block title %}{ {  super() }} - 文章详情{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="/assets/style/detail.css">
      { % endblock %}
    { % block content %}
      
      <div class="layout-question">
        <div class="container">
          <div class="row">
            <div class="col-md-9">
            { % include 'components/flash_messages.html' %}
              
            { % if question.tags %}
              <ul class="que-tag-ls">
                { % for tag in question.tags %}
                <li><a href="#">{ {  tag.tag_name }}</a></li>
                { % endfor %}
              </ul>
            { % endif %}
              
              <h3>{ {  question.title }}</h3>
              <div class="show-desc hidden">
                { {  question.desc|d('暂无', True) }}…
                <span class="btn-show-more">显示全部<i class="glyphicon glyphicon-menu-down"></i></span>
              </div>
              <div class="show-all ">
                { % autoescape false %}
                { {  question.content|safe }}
                { % endautoescape %}
                <span class="btn-show-less">收起<i class="glyphicon glyphicon-menu-up"></i></span>
              </div>
              
              <div class="qa-footer">
                <div>
                  <button type="button" class="btn btn-info btn-sm">关  注</button>
                </div>
                <div>
                  <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#addComment">写回答</button>
                </div>
                <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> { {  question.comment_count }}条评论</div>
                <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                <div class="txt-menu"></div>
                <div class="txt-menu btn-group">
                  <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false"></i>
                  <ul class="dropdown-menu">
                    <li><a href="#">不感兴趣</a></li>
                  </ul>
                </div>
              </div>
              
            </div>
            <div class="col-md-3">
              <div class="que-stats-box">
                
                <div>
                  <span>关注者</span>
                  <strong>{ {  question.follow_count|number_split }}</strong>
                </div>
                
                
                <div>
                  <span>被浏览</span>
                  <strong>{ {  question.view_count|number_split }}</strong>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
      
    
      <div class="layout-answer">
        <div class="container">
          <div class="row">
            <div class="col-md-9 left-content">
              { % block link_more %}
              <a class="link-more" href="#">查看全部 { {  question.answer_count|number_split }} 个回答</a>
              { % endblock %}
              
              { % if answer %}
              <div class="answer-content box-wrap">
                <div class="user-info">
                  <div class="avater">
                    { % if answer.user.avatar %}
                      <img src="{ { answer.user.avatar }}" alt="用户头像">
                    { % else %}
                      <img src="/assets/home/qa/user_head.jpg" alt="用户头像">
                    { % endif %}
                  </div>
                  <div class="desc">
                    <h4>{ {  answer.user.nickname }}</h4>
                    <p>{ {  answer.user.profile.maxim }}</p>
                  </div>
                </div>
                <div class="answer-stats">5,550 人赞同了该回答</div>
                <div class="answer-txt">
                  { % autoescape false %}
                  { {  answer.content|safe }}
                  { % endautoescape %}
                </div>
                <div class="answer-time">发布于{ {  answer.created_at }}</div>
                
                <div class="qa-footer">
                  <div><button type="button" class="btn btn-info btn-sm">
                      <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 { {  answer.love_count }}</button>
                    <button type="button" class="btn btn-info btn-sm"><i
                        class="glyphicon glyphicon-thumbs-down"></i></button>
                  </div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> 113条评论</div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                  <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                  <div class="txt-menu"></div>
                  <div class="txt-menu btn-group">
                    <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false"></i>
                    <ul class="dropdown-menu">
                      <li><a href="#">不感兴趣</a></li>
                    </ul>
                  </div>
                </div>
                
                
                <div class="comment-box box-wrap">
                  
                  <div class="comment-stats">
                    <div class="title">8条评论</div>
                    <div class="menu"><i class="glyphicon glyphicon-random"></i>切换为时间顺序</div>
                  </div>
                  
                  
                  <div class="comment-ls">
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item reply">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                    <div class="comment-item">
                      <div class="header">
                        <div class="user-info">
                          <img class="avater" src="./assets/home/qa/user_head.jpg" alt="">
                          <strong class="uname">用户昵称</strong>
                        </div>
                        <div class="time">2小时前</div>
                      </div>
                      <div class="body">
                        不能这么说，是他们的眼界让他们不能接受。现在中国做到的事是让他们世界观崩塌的事[飙泪笑][飙泪笑]
                      </div>
                      <div class="footer">
                        <div><i class="glyphicon glyphicon-thumbs-up"></i> 5</div>
                        <div><i class="glyphicon glyphicon-share-alt"></i> 回复</div>
                        <div><i class="glyphicon glyphicon-thumbs-down"></i> 踩</div>
                        <div><i class="glyphicon glyphicon-flag"></i> 举报</div>
                      </div>
                      
                      <form class="form-horizontal comment-publish hidden">
                        <input type="text" class="form-control" placeholder="写下你的评论...">
                        <button type="button" class="btn btn-default btn-grey">发布</button>
                      </form>
                      
                    </div>
                  </div>
                  
                  
                  <form class="form-horizontal comment-publish">
                    <input type="text" class="form-control" placeholder="写下你的评论...">
                    <button type="button" class="btn btn-default btn-grey">发布</button>
                  </form>
                  
                </div>
                
              </div>
              { % else %}
                <div class="answer-content box-wrap">
                暂无人回答该问题
                </div>
              { % endif %}
              
              { {  self.link_more() }}
            </div>
            <div class="col-md-3 right-content">
              
              <div class="about-user box-wrap">
                <div class="user-info">
                  <div class="avater">
                    <img src="./assets/home/qa/user_head.jpg" alt="用户头像">
                  </div>
                  <div class="desc">
                    <h4>舒大克</h4>
                    <p>《互联网营销人实战手记》新书上市； 公众号：舒大克。</p>
                  </div>
                </div>
                
                <div class="qa-stats">
                  <div>
                    <span>回答</span>
                    <strong>309</strong>
                  </div>
                  <div>
                    <span>文章</span>
                    <strong>40</strong>
                  </div>
                  <div>
                    <span>关注者</span>
                    <strong>85,265</strong>
                  </div>
                </div>
                
                <div class="menu-ls">
                  <div>
                    <a href="#" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-plus"></i>关注他</a>
                  </div>
                  <div>
                    <a href="#" class="btn btn-default btn-sm btn-grey"><i class="glyphicon glyphicon-comment"></i>发私信</a>
                  </div>
                </div>
              </div>
              
              
              <div class="rel-ques box-wrap">
                <div class="title">相关问题</div>
                <div class="rel-que-ls">
                  <div>
                    <a href="#">疫情过后，你会报复性消费吗？</a><span>30 个回答</span>
                  </div>
                  <div>
                    <a href="#">疫情过后你最想去哪？和谁一起？</a><span>19 个回答</span>
                  </div>
                  <div>
                    <a href="#">如果能熬过这波疫情，你最想做的事情是什么？</a><span>21 个回答</span>
                  </div>
                  <div>
                    <a href="#">请问这次疫情可能有积极影响吗？</a><span>9 个回答</span>
                  </div>
                  <div>
                    <a href="#">如果疫情结束了你最想做什么？</a><span>3 个回答</span>
                  </div>
                </div>
              </div>
              
              
              <div class="right-footer">
                <a href="#">用户指南</a><span class="dot">·</span>
                <a href="#">用户使用协议</a><span class="dot">·</span>
                <a href="#">用户隐私权政策</a>
                <br />
                <a href="#">侵权举报</a><span class="dot">·</span>
                <a href="#">网上有害信息举报专区</a>
                <br />
                <a href="#">京ICP证 第10001000号</a>
                <br />
                <a href="#">京ICP备 第10001000号</a>
                <br />
                <a href="#">联系我们 © 2020在线问答</a>
              </div>
              
            </div>
          </div>
        </div>
      </div>
      <div class="layout-footer">
        <a href="#" data-toggle="tooltip" title="意见反馈"><i class="glyphicon glyphicon-briefcase"></i></a>
        <a href="#" data-toggle="tooltip" title="回到顶部"><i class="glyphicon glyphicon-arrow-up"></i></a>
      </div>
      
      <div class="modal fade" id="addComment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <form class="form-horizontal modal-dialog" role="document"
              method="post" action="{ { url_for('qa.detail', q_id=question.id) }}">
          { {  form.csrf_token }}
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title" id="myModalLabel">写回答</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                { {  form.content }}
                { {  ckeditor.load() }}
                { {  ckeditor.config(name='content') }}
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary">提交</button>
            </div>
          </div>
        </form>
      </div>
      
    { % endblock %}
    { % block js_inline %}
          // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
          $('.show-desc').click(function () { 
            $(this).addClass('hidden');
            $(this).next().removeClass('hidden')
          })
          $('.show-all').click(function () { 
            $(this).addClass('hidden');
            $(this).prev().removeClass('hidden')
          })
    { % endblock %}

from flask import Blueprint, render_template, request, abort, redirect, url_for, flash
    from flask_login import login_required, current_user
    
    from models import Question
    from qa.forms import WriteQuestionForm, WriteAnswerForm
    
    qa = Blueprint('qa', __name__,
                   template_folder='templates',
                   static_folder='../assets')
    
    
    @qa.route('/')
    def index():
        """ 首页 """
        return render_template('index.html')
    
    
    @qa.route('/follow')
    def follow():
        """ 关注 """
        per_page = 20  # 每页数据的大小
        page = int(request.args.get('page', 1))
        page_data = Question.query.filter_by(is_valid=True).paginate(
            page=page, per_page=per_page)
        return render_template('follow.html', page_data=page_data)
    
    
    @qa.route('/qa/list')
    def question_list():
        """ 查询问题数据列表
        // json
        { 
            'code': 0,
            'data': ''
        }
        """
        try:
            per_page = 2  # 每页数据的大小
            page = int(request.args.get('page', 1))
            page_data = Question.query.filter_by(is_valid=True).paginate(
                page=page, per_page=per_page)
            data = render_template('qa_list.html', page_data=page_data)
            return { 'code': 0, 'data': data}
        except Exception as e:
            print(e)
            data = ''
        return { 'code': 1, 'data': ''}
    
    
    @qa.route('/write', methods=['GET', 'POST'])
    @login_required
    def write():
        """ 写文章，提问 """
        form = WriteQuestionForm()
        if form.validate_on_submit():
            try:
                que_obj = form.save()
                if que_obj:
                    flash('发布问题成功', 'success')
                    return redirect(url_for('qa.index'))
            except Exception as e:
                print(e)
            flash('发布问题失败，请稍后重试', 'danger')
        return render_template('write.html', form=form)
    
    
    @qa.route('/detail/<int:q_id>', methods=['GET', 'POST'])
    def detail(q_id):
        """ 问题详情 """
        # 1. 查询问题信息
        question = Question.query.get(q_id)
        if not question.is_valid:
            abort(404)
        # 2. 展示第一条回答信息
        answer = question.answer_list.filter_by(is_valid=True).first()
        # 添加回答
        form = WriteAnswerForm()
        if form.validate_on_submit():
            try:
                if not current_user.is_authenticated:
                    flash('请先登录', 'danger')
                    return redirect(url_for('accounts.login'))
                form.save(question=question)
                flash('回答问题成功', 'success')
                return redirect(url_for('qa.detail', q_id=q_id))
            except Exception as e:
                print(e)
        return render_template('detail.html',
                               question=question,
                               answer=answer,
                               form=form)

# 首页回答列表 #

from flask import Blueprint, render_template, request, abort, redirect, url_for, flash
    from flask_login import login_required, current_user
    
    from models import Question, Answer
    from qa.forms import WriteQuestionForm, WriteAnswerForm
    
    qa = Blueprint('qa', __name__,
                   template_folder='templates',
                   static_folder='../assets')
    
    
    @qa.route('/')
    def index():
        """ 首页 回答列表 """
        per_page = 20  # 每页数据的大小
        page = int(request.args.get('page', 1))
        page_data = Answer.query.filter_by(is_valid=True).paginate(
            page=page, per_page=per_page)
        return render_template('index.html', page_data=page_data)
    
    
    @qa.route('/follow')
    def follow():
        """ 关注 问题列表 """
        per_page = 20  # 每页数据的大小
        page = int(request.args.get('page', 1))
        page_data = Question.query.filter_by(is_valid=True).paginate(
            page=page, per_page=per_page)
        return render_template('follow.html', page_data=page_data)
    
    
    @qa.route('/qa/list')
    def question_list():
        """ 查询问题数据列表
        // json
        { 
            'code': 0,
            'data': ''
        }
        """
        try:
            per_page = 2  # 每页数据的大小
            page = int(request.args.get('page', 1))
            page_data = Question.query.filter_by(is_valid=True).paginate(
                page=page, per_page=per_page)
            data = render_template('qa_list.html', page_data=page_data)
            return { 'code': 0, 'data': data}
        except Exception as e:
            print(e)
            data = ''
        return { 'code': 1, 'data': ''}
    
    
    @qa.route('/write', methods=['GET', 'POST'])
    @login_required
    def write():
        """ 写文章，提问 """
        form = WriteQuestionForm()
        if form.validate_on_submit():
            try:
                que_obj = form.save()
                if que_obj:
                    flash('发布问题成功', 'success')
                    return redirect(url_for('qa.index'))
            except Exception as e:
                print(e)
            flash('发布问题失败，请稍后重试', 'danger')
        return render_template('write.html', form=form)
    
    
    @qa.route('/detail/<int:q_id>', methods=['GET', 'POST'])
    def detail(q_id):
        """ 问题详情 """
        # 1. 查询问题信息
        question = Question.query.get(q_id)
        if not question.is_valid:
            abort(404)
        # 2. 展示第一条回答信息
        answer = question.answer_list.filter_by(is_valid=True).first()
        # 添加回答
        form = WriteAnswerForm()
        if form.validate_on_submit():
            try:
                if not current_user.is_authenticated:
                    flash('请先登录', 'danger')
                    return redirect(url_for('accounts.login'))
                form.save(question=question)
                flash('回答问题成功', 'success')
                return redirect(url_for('qa.detail', q_id=q_id))
            except Exception as e:
                print(e)
        return render_template('detail.html',
                               question=question,
                               answer=answer,
                               form=form)

{ % extends 'base_layout.html' %}
    { % block title %}{ {  super() }} - 首页{ % endblock %}
    { % block header %}
      <link rel="stylesheet" href="./assets/style/index.css">
    { % endblock %}
    { % block content %}
      <div class="layout-main">
        <div class="container">
          <div class="row">
            <div class="col-md-9">
              { # 展示flash消息 #}
              { % include 'components/flash_messages.html' %}
              
              <div id="id-index-banner" class="carousel slide" data-ride="carousel">
                
                <div class="carousel-inner" role="listbox">
                  <div class="item active">
                    <img class="img-responsive" src="./assets/home/banner/banner1.jpg" alt="banner图">
                  </div>
                  <div class="item">
                    <img class="img-responsive" src="./assets/home/banner/banner1.jpg" alt="banner图">
                  </div>
                </div>
    
                
                <a class="left carousel-control" href="#id-index-banner" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#id-index-banner" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
              
              
              <div class="cls-menu-ls">
                <a href="{ { url_for('qa.index') }}" class="active">推荐</a>
                <a href="{ { url_for('qa.follow') }}">关注</a>
                <a href="#">热榜</a>
              </div>
              
              
              <div class="qa-ls">
                { % for answer in page_data.items %}
                  { % with question=answer.question %}
                    <div class="qa-item">
                      <a href="{ { url_for('qa.detail', q_id=question.id) }}" class="title">{ {  question.title }}</a>
                      <div class="desc">
                        { % if question.img %}
                          <div class="left">
                            <img src="{ { question.get_img_url }}" alt="" srcset="">
                          </div>
                        { % endif %}
                        <div class="right">
                          <div class="show-desc">{ {  answer.content|safe|truncate(150) }}
                            <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>
                          </div>
                          <div class="show-all hidden">
                            { {  answer.content|safe }}
                            <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>
                          </div>
                        </div>
                      </div>
                      <div class="qa-footer">
                        <div>
                          <button type="button" class="btn btn-info btn-sm">
                            <i class="glyphicon glyphicon-thumbs-up"></i> 赞同 { {  question.love_count }}
                          </button>
                        </div>
                        <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i> { {  question.answer_count }}条回答
                        </div>
                        <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>
                        <div class="txt-menu"><i class="glyphicon glyphicon-heart"></i>收藏</div>
                        <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>
                        <div class="txt-menu btn-group">
                          <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="false"></i>
                          <ul class="dropdown-menu">
                            <li><a href="#">不感兴趣</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  { % endwith %}
                { % endfor %}
              </div>
              <nav aria-label="Page navigation">
                <ul class="pagination">
                  <li>
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true">«</span>
                    </a>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">»</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="col-md-3">
              
              <div class="right-menu-box box-wrap">
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-plus"></i>
                  <span>写回答</span>
                </a>
                <a href="write.html" class="menu-item">
                  <i class="glyphicon glyphicon-pencil"></i>
                  <span>写文章</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-ok"></i>
                  <span>些想法</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-play-circle"></i>
                  <span>发视频</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-adjust"></i>
                  <span>稍后答</span>
                </a>
                <a href="#" class="menu-item">
                  <i class="glyphicon glyphicon-file"></i>
                  <span>草稿箱</span>
                </a>
              </div>
              
              <div class="right-creater-box box-wrap">
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-user"></i>
                    <span>草稿箱</span>
                  </div>
                  <div class="right">
                    <span>去开通</span>
                    <i class="glyphicon glyphicon-menu-right"></i>
                  </div>
                </a>
              </div>
              
              <div class="right-menu-box box-wrap">
                <a href="#" class="menu-item menu-live">
                  <i class="glyphicon glyphicon-plus"></i>
                  <span>Live</span>
                </a>
                <a href="#" class="menu-item menu-store">
                  <i class="glyphicon glyphicon-pencil"></i>
                  <span>书店</span>
                </a>
                <a href="#" class="menu-item menu-table">
                  <i class="glyphicon glyphicon-ok"></i>
                  <span>圆桌</span>
                </a>
                <a href="#" class="menu-item menu-special">
                  <i class="glyphicon glyphicon-play-circle"></i>
                  <span>专栏</span>
                </a>
                <a href="#" class="menu-item menu-consult">
                  <i class="glyphicon glyphicon-adjust"></i>
                  <span>付费咨询</span>
                </a>
                <a href="#" class="menu-item menu-wiki">
                  <i class="glyphicon glyphicon-file"></i>
                  <span>百科</span>
                </a>
              </div>
              
              
              <div class="right-mine-box box-wrap">
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-heart"></i>
                    <span>我的收藏</span>
                  </div>
                  <div class="right">
                    <span>0</span>
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-question-sign"></i>
                    <span>我关注的问题</span>
                  </div>
                  <div class="right">
                    <span>28</span>
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-user"></i>
                    <span>我的邀请</span>
                  </div>
                  <div class="right">
                    <span>33</span>
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>我的余额</span>
                  </div>
                  <div class="right">
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-king"></i>
                    <span>站务中心</span>
                  </div>
                  <div class="right">
                  </div>
                </a>
                <a href="#" class="menu-item">
                  <div class="left">
                    <i class="glyphicon glyphicon-file"></i>
                    <span>版权服务中心</span>
                  </div>
                  <div class="right">
                  </div>
                </a>
              </div>
              
              
              <div class="right-footer">
                <a href="#">用户指南</a><span class="dot">·</span>
                <a href="#">用户使用协议</a><span class="dot">·</span>
                <a href="#">用户隐私权政策</a>
                <br/>
                <a href="#">侵权举报</a><span class="dot">·</span>
                <a href="#">网上有害信息举报专区</a>
                <br/>
                <a href="#">京ICP证 第10001000号</a>
                <br/>
                <a href="#">京ICP备 第10001000号</a>
                <br/>
                <a href="#">联系我们 © 2020在线问答</a>
              </div>
              
            </div>
          </div>
        </div>
        
      </div>
    { % endblock %}
    { % block js_inline %}
      // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
      $('.show-desc').click(function () { 
      $(this).addClass('hidden');
      $(this).next().removeClass('hidden')
      })
      $('.show-all').click(function () { 
      $(this).addClass('hidden');
      $(this).prev().removeClass('hidden')
      })
    { % endblock %}

#  #