个人中心标签页导航


    1.  

      新页面userbase.html,用<ul ><li role="presentation"> 实现标签页导航。
      <ul class="nav nav-tabs">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>

    2. 让userbase.html继承base.html。
      重写title,head,main块.
      将上述<ul>的样式放在head块，<ul>放在main块中.
      定义新的块user。

    3. 让上次作业完成的个人中心页面，继承userbase.html，原个人中心就自动有了标签页导航。

    4. 制作个人中心的三个子页面，重写userbase.html中定义的user块，分别用于显示问答、评论、个人信息。

    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。 
      {% extends 'basic.html' %}
{% block title %}个人中心{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="../static/css/20.css">
    <link rel="stylesheet" type="text/css" href="../static/css/200.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="../static/js/39.js"></script>

    <style type="text/css">
        a{
            color: #000000;
        }
    </style>

{% endblock %}
<body background="../static/timg.jpg" style="background-attachment: fixed;background-size: 100% 100%" >

{% block userbase %}

<div  style="width:50rem; margin:0 auto">
<ul class="list-group list-group-flush">
    <h2 style="margin: 0%;align:center">{{ user.username }}</h2>
    </ul>
    <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag=1) }}">Question</a> </li>
    <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag=2) }}">Comment</a> </li>
    <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag=3) }}">Info</a> </li>

</ul>
</div>
{% block main %}{% endblock %}
{% endblock %}

</body>
      {% extends 'userbase.html' %}
{% block title %}PERSONAL{% endblock %}
{% block main %}
<div class="touming">
<div class="card" style="width:50rem; margin:0 auto">

<ul class="list-group list-group-flush">

<h3 style="margin:0" align="center">ANSWER</h3>


{% for foo in user.questions %}

        <li class="list-group-item">
            <span class="icon" aria-hidden="true"></span>

            <br>

            <h3> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3>

            <p>{{ foo.detail }}</p>
        <span class="badge"style="float:right">{{ foo.creat_time}}</span>

            <a href="{{ url_for('usercenter',user_id=foo.author.id) }}">{{ foo.author.username}}</a>
        </li>

        {% endfor %}

</ul>
</div>
</div>
{% endblock %}
      {% extends 'userbase.html' %}
{% block title %}PERSONAL{% endblock %}
{% block main %}

<div class="card touming" style="width:50rem; margin:0 auto">
<ul class="list-group list-group-flush">
<h3 style="margin:0" align="center">COMMENT</h3>


{% for foo in user.comments %}

        <li class="list-group-item">
            <span class="icon" aria-hidden="true"></span>

            <br>

            <h3> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3>

            <p>{{ foo.detail }}</p>
        <span class="badge"style="float:right">{{ foo.creat_time}}</span>

            <a href="#">{{ foo.author.username}}</a>
        </li>

        {% endfor %}
    </ul>

</div>

    
{% endblock %}
      {% extends 'userbase.html' %}
{% block title %}PERSONAL{% endblock %}
{% block main %}
    <body class="abc">
 <div class="card touming" style="width:50rem; margin:0 auto">
<h3 style="margin:0" align="center" color="blue">{{ username }}MESSAGE</h3>
<ul class="list-group list-group-flush">


        <li class="list-group-item">
            <span class="icon" aria-hidden="true">
                Username：{{ user.username }}<br>
                id：{{ user.id }}<br>
                nickname：{{ user.nickname }}<br>
                Comperhantion：{{ user.questions|length }}
            </span>

        </li>


    </ul>

</div>
    </body>

    
{% endblock %}
      @app.route('/usercenter/<user_id>/<tag>')
@loginFrist
def usercenter(user_id,tag):
    user=User.query.filter(User.id==user_id).first()
    context={
        # 'username':user.username,
        # 'question':user.questions,
        # 'comments':user.comment
        'user':user
    }
    if tag == '1':
        return render_template('usercenter1.html',**context)
    elif tag == '2':
        return render_template('usercenter2.html', **context)
    else :
        return render_template('usercenter3.html', **context)

       

       

       

posted @ 2017-12-15 22:19  067杜嘉成  阅读(183)  评论(0)  编辑  收藏  举报