20180913：搭建网站前台页面的简要流程

根据视频08 4-1 前台布局 会员登录页面搭建的教学，理出前台搭建流程

1、在template中创建一个前台共用的导航页面。app\templates\home\home.html

导航页面实际就是：前台所有页面都会固定有的 ”顶部和尾部“ 的nav导航页面（如：顶部是公司Logo，尾部是XXX公司copyright等等，这个页面的基础html代码是前端工程师做好的），在导航顶部和底部中间的“页面具体内容”部分，用block来占位，然后在后面第2步用实际的内容来覆盖这个占位。

• 首先，在 templates目录中的 Home目录中（这个就是前台模板目录），新建一个home.html。将前台页面的nav导航页面（前端工程师负责做好基础HTML）装入，修改其中的绝对链接的静态资源，替换成用url_for的链接。

原句： <link rel="shortcut icon" href="../static/base/images/logo.png">
修改后：<link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">

• 然后，在home.html页面的”内容”部分，添加block块，以供其他页面调用了这个导航页面，替换其中实际内容。

原文：
<!--内容-->
<div class="container" style="margin-top:76px">
</div>
<!--内容-->
添加后：
<!--内容-->
<div class="container" style="margin-top:76px">
    {% block content %}
    {% endblock %}
</div>
<!--内容-->

# 解释：块的定义格式如下：
{% block 块名 %}
    块内容
{% endblock (块名)%}
# 其中 endblock 后面块名可以省略，有时候加上会让结构更加明晰
# 关于 block 块更详尽说明参考：https://www.cnblogs.com/wongbingming/p/6807771.html

2、在template中创建一个前台首页。app\template\home\index.html

这个页面实际上就是用户打开页面看到的前台首页。
- 先创建index.html文件，在文件中引入上面的导航文件（home.html），然后替换其中的“{% block contend %} 中的内容，就完成了该文件。

{% extends "home/home.html" %}   #引入导航模板

{% block content %}              #将导航模板中block块用实际内容替换掉
<h1>hello world  ！！</h1>
{% endblock %}

这样就形成了有 上下导航（home.html）+ 内容（hello word!!）的标准index.html文件，然后展现给客户就可以了！

3、展现templates中的前台首页。 app\template\home\index.html

要展现一个页面，就要修改主程序的页面文件（app\home\views.py)，让系统呈现出模板中的页面来。
用 render_template 命令让系统调用“home\index.html”，注意;render_template是会自动寻找目前下template目录的，因此导入的时候template目录名不要写到参数中。

from . import home_blue
from flask import  render_template

@home_blue.route("/")
def index():
    return render_template("home/index.html")