使用 Python 从 0 开发属于你的个人管理系统 26 | 让你的前端页面结构足够清晰可扩展
之前，我给你分享了 bootstrap 的静态模板文件，并且也给你讲了模板引擎的常用操作，但可能你在实际引用结构和划分还会遇到一些问题，这篇我要给你一个清晰的梳理前端页面结构和思路，通过这篇你可以清晰的把自己的前端页面结构整理好，并且，往后扩展的时候，非常方便。
当你下载了模板文件，放到你的 templates 时，这些静态资源文件都是独立的（即没有互相引用），其中有一些是你不需要的，你可以直接删除，或者你可以直接挑选那些适合你的页面放入 templates 目录中，而在这里面的文件，其中也有很多是重复使用到的，比如 js，css 的引入，导航，菜单栏，页脚等。
通往 Python 高手之路
把重复的页面独立出来
打开你的 index.html，把那些重复的结构独立开来，让它们成为一个个单独的模块。
header.html
每个页面都需要重复使用到 <head>，那么就直接创建一个 header 模块，也就是 header.html：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title %}我的人生管理{% endblock title%}</title>
<!-- Custom fonts for this template-->
<link href="{{ url_for('static', filename='vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{ url_for('static', filename='css/sb-admin-2.min.css') }}" rel="stylesheet">
</head>
同样的，页脚也是被重复使用的，抽取出来：
本文隐藏内容 登陆 后才可以浏览
我们以 index.html 为例，使用 extends 来继承基本模块：
{% extends 'base.html'%}
<!-- Page Wrapper -->
<div id="wrapper">
{% block main%}
{% include 'sidebar.html' %}
....
....
{% endblock main %}当你继承了 base.html 后，你只需要关心 index 这个自模块中特有的内容，在你定义的 block 下写你特定的内容。
现在是不是清晰了：
- 抽取公用的结构，独立成模块
- 在需要的的地方 include 它们
- 定义一个最基本的框架结构
- 其它页面 extends 继承基本模块从而只关心特有的内容
这样做的好处是，你把共有的模块抽取出来，需要的时候 include 到你需要的页面中。通过继承的方式，你可以扩展每一个页面，你只需要关心这个页面该有的内容，至于其他的静态资源导入等，在基础模块已经做好了，就不需要再关心了。又，你需要添加什么功能呢，只需要写一次，比如添加菜单，在 sidebar 中添加即可，其他引用到的页面会自动展现。
那么现在的你，应该可以完全的通过自己，去修改，去添加，去优化你的前端页面结构，而后，你想要实现什么，就在原有的结构上，直接扩展出来就行了。
