30、Flask实战第30天：cms模版抽离和个人信息页面完成

cms模版抽离

新建一个cms_base.html文件作为基础模板，把cms_index.html的内容拷贝到cms_base.html中。

编辑 cms_base.html，把在不同页面会变动的部分用block包起来

标题部分

<title>{% block title %}{% endblock %}</title>

在head中再预留一个block个，因为在其他页面可能会再加载一些js或css

{% block head %}{% endblock %}

内容标题和内容

<h1>{% block page_title %}{% endblock %}</h1>
<div class="main_content">
      {% block main_content %}{% endblock %}
</div>

模板已经编辑好了，现在就可以来编辑cms_index.html了

把cms_index.html的原来内容清空，然后继承cms_base.html，在把block填进来填充自己的内容就可以了，如下

{% extends 'cms/cms_base.html' %}

{% block title %}
    CMS管理系统
{% endblock %}

{% block  page_title %}
    欢迎来到CMS管理系统
{% endblock %}

<!--因为首页这里没有其他内容，这里就不配置main_content了-->

cms_index.html

个人信息页面

创建个人信息页cms_profile.html,暂时留空即可

编辑cms.views，编写个人信息的视图

@bp.route('/profile/')
@login_required
def profile():
    return render_template('cms/cms_profile.html')

再来编辑cms_profile.html

{% extends 'cms/cms_base.html' %}

{% block title %}
    个人信息-CMS管理系统
{% endblock %}

{% block page_title %}
    个人中心>>>个人信息
{% endblock %}

{% block main_content %}
    <!--这里使用的是bootstrap的表格样式，中文网站找到'带边框的表格'-->
    <table class="table table-bordered">
        <tr>
            <td>用户名</td>
            <td>{{ g.cms_user.username }}</td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td>{{ g.cms_user.email }}</td>
        </tr>
        <tr>
            <td>角色</td>
            <td>功能暂未实现</td>
        </tr>
        <tr>
            <td>权限</td>
            <td>功能暂未实现</td>
        </tr>
        <tr>
            <td>加入时间</td>
            <td>{{ g.cms_user.join_time }}</td>
        </tr>

    </table>
{% endblock %}

cms_profile.html

编辑cms_base.html， 把"首页"和"个人信息"的url改过来

<li class="unfold"><a href="{{ url_for('cms.index') }}">首页</a></li>
...
<li><a href="{{ url_for('cms.profile') }}">个人信息</a></li>

它是由js实现的，在cms_base.js里面