我的中心标签页导航

时间  2019-12-13
标签 我的 中心 标签 导航 繁體版
原文   原文链接
    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. 思考 如何实现点标签页导航到达不一样的我的中心子页面。

userbase.htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends "text.html" %}
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <title>首页</title>

</head>
<body background="../static/img/WeChat%20Image_20171027161942.png" style="background-attachment: fixed;background-size: 100% 100%" >
{% block personal_message %}
    <ul class="nav">
  <li role="presentation"><a href="{{ url_for('pre',user_id=user.id,tag='1') }}"> 所有问答</a></li>
  <li role="presentation"><a href="{{ url_for('pre',user_id=user.id,tag='2') }}">所有评论</a></li>
  <li role="presentation"><a href="{{ url_for('pre',user_id=user.id,tag='3') }}">我的资料</a></li>
</ul>

    {% block a %}{% endblock %}
{% endblock %}

</body>
</html>

usercenter1.htmlhtml

{% extends "userbase.html" %}
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <title>首页</title>

</head>
<body>
{% block a %}
    <div style="margin-left: 28%;margin-top: 1.5%">
<div class="card" style="width: 60rem;height:auto">
    <div class="card-header">
  <h2><a href="{{ url_for('pre',user_id=user.id,tag='1') }}"> {{ user.username }}</a></h2>
  </div>
  <div class="card-body">


  <ul style="font-size: large;list-style-type: none;">
     <p class="text-info"style="font-size: 30px">全部问答</p>
        {% for foo in user.question %}
        <div>  <li>
            <a href="#">{{ foo.author.username }}</a>
            <span class="">{{ foo.creat_time }}</span><br>
        <a href="{{ url_for("pinglun",question_id=foo.id) }}">{{ foo.title }}</a>
        <p>{{ foo.detail }}</p>
         </li></div>
{% endfor %}
       </ul>
  </div>
</div>



    </div>
{% endblock %}
</body>
</html>

usercenter2.hemlbootstrap

{% extends "userbase.html" %}
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <title>首页</title>

</head>
<body>
{% block a %}
    <div style="margin-left: 28%;margin-top: 1.5%">
<div class="card" style="width: 60rem;height:auto">
    <div class="card-header">
  <h2><a href="{{ url_for('pre',user_id=user.id,tag='1') }}"> {{ user.username }}</a></h2>
  </div>


<div class="card text-left" style="width: 60rem;height: auto">
  <div class="card-body">
      <ul style="font-size: large;list-style-type: none">
    <p class="text-info"style="font-size: 30px">全部评论</p>
          {% for foo in user.comment %}
          <li>
              <a href="#">{{ foo.author.username }}</a>
                <span>{{ foo.creat_time }}</span><br>
                <p>{{ foo.detail }}</p>
          </li>
          {% endfor %}
  </ul></div>

</div>


    </div>
{% endblock %}
</body>
</html>

usercenter3.htmlapp

{% extends "userbase.html" %}
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <title>首页</title>

</head>
<body>
{% block a %}
    <div style="margin-left: 28%;margin-top: 1.5%">
<div class="card" style="width: 60rem;height:auto">
    <div class="card-header">
  <h2><a href="{{ url_for('pre',user_id=user.id,tag='1') }}"> {{ user.username }}</a></h2>
  </div>

    <div class="card text-left" style="width: 60rem;height: auto">
  <div class="card-body">

      <ul style="font-size: large;list-style-type: none">
          <p class="text-info"style="font-size: 30px">我的信息</p>
      <li><p>用户名：{{ user.username }}</p></li>
            <li><p>Id：{{ user.id }}</p></li>
            <li><p>内容篇幅：{{ user.question|length }}</p></li>
      </ul>
  </div>
</div>

    </div>
{% endblock %}
</body>
</html>

defurl

@app.route('/presonal_message/<user_id>/<tag>')
@log
def pre(user_id,tag):
    user=User.query.filter(User.id==user_id).first()
    context={
        '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)

 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程