个人中心标签页导航

Posted 100彭楚殷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了个人中心标签页导航相关的知识,希望对你有一定的参考价值。

    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. 思考 如何实现点标签页导航到达不同的个人中心子页面
      @app.route(/user_detail<user_id>)
      @login_first
      def user_detail(user_id):
          user=User.query.filter(User.id == user_id).first()
          context={
              "user":user
          }
          return render_template("user.html",**context)
      {% extends "base.html" %}
      {% block title%}用户详情{% endblock %}
      
      {% block head %}
          <style>
              .u_ul li{
                  float: left;
                  margin: 20px;
                  list-style: none;
      
              }
          </style>
      {% endblock %}
      
      {% block main %}
          <ul class="u_ul">
              <li role="presentation"><a href="{{ url_for("user_detail",user_id = user.id)}}">全部问答</a></li>
              <li role="presentation"><a href="{{ url_for("user_detail",user_id = user.id)}}">全部评论</a></li>
              <li role="presentation"><a href="{{ url_for("user_detail",user_id = user.id)}}">个人信息</a></li>
          </ul>
      
          {% block user %}{% endblock %}
      
      {% endblock %}
      {% extends "user.html" %}
      
      {% block user %}
      
          <form class="basic">
              {% for foo in user.question %}
                  <h2>{{ foo.username }}<span>全部问答</span></h2>
                  <fieldset>
                      <span >{{ foo.create_time }}</span>
                      <h3>{{ foo.title }}</h3>
                      <h3>{{ foo.detail}}</h3>
                  </fieldset>
              {% endfor %}
          </form>
      
      {% endblock %}
      {% extends "user.html" %}
      
      {% block user %}
      
          <form class="basic">
              {% for foo in user.comment %}
                  <h2>{{ foo.username }}<span>全部评论</span></h2>
              <fieldset>
                  <span>{{ foo.create_time }}</span>
                  <h3>{{ foo.detail}}</h3>
              </fieldset>
              {% endfor %}
          </form>
      
      
      {% endblock %}
      {% extends "user.html" %}
      
      {% block user %}
      
          <form class="basic">
              <fieldset>
                  <span>个人信息</span>
                  <ul>
                      <li>用户:{{ user.username }}</li>
                      <li>编号:{{ user.id }}</li>
                      <li>文章篇数:{{ user.question|length }}</li>
                  </ul>
              </fieldset>
          </form>
      
      {% endblock %}

       

以上是关于个人中心标签页导航的主要内容,如果未能解决你的问题,请参考以下文章

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航

个人中心标签页导航