Flask笔记--如何将网页模板导入Flask

1.从网上下载了一个比较简单的网页模板。

这里目前只有一个网页index.html
最终添加到Flask的结构如下，主要保留的就是index.html,css,js,img,fonts，这几个文件都是再index中出现的，或者是css需要加载的文件，按照如下步骤去修改，如果发现哪些东西没有按照原本的方式显示，可以查看
1.文件是否拷贝到static中。
2.拷贝之后，对应的路径有没有进行修改。

2.将整个文件夹先拷贝进之前已经写好的简单flask中。

注意：是拷贝到templates中，因为index.html是在templates中的。
只是将render_template中的html改成你刚才拷贝的这个，名称可以自己定义一个，我这里拷贝之后改了一下名称。
点击运行之后，网页应该可以打开，但是仅仅只有文字部分，格式，图片以及动态的部分是没有的。

def index():
    form=NameForm()
    if form.validate_on_submit():
        old_name=session.get('name')
        if old_name is not None and old_name!= form.name.data:
            print('name changed.')
            flash('Looks like you have changed your name!')
        session['name']=form.name.data
        return redirect(url_for('index'))

    return render_template('index1.html',current_time=datetime.utcnow(),
                           form=form,name=session.get('name'))

3.修改模板内容。

由于下载的模板不是bootscrap的，所以先将模板修改成bootstrap的。
{% extends ‘bootstrap/base.html’ %}
其他步骤可以参考书本。
修改完成后，再次运行。
顺利的话，应该不会报错。显示的内容和上一步的相同。

4.修改CSS文件的路径

原先index.html中的CSS连接文件如下：

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
  <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template -->
  <link href="css/landing-page.min.css" rel="stylesheet">

根据其中的地址，找到对应的CSS文件，并将他们拷贝到static/CSS文件夹下。同时修改引用的路径，修改后的内容如下：

 <link href="static/css/bootstrap.css" rel="stylesheet">
  <!-- Custom fonts for this template -->
  <link href="static/css/simple-line-icons.css" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template -->
  <link href="static/css/landing-page.css" rel="stylesheet">

点击运行后，会看到版式发生了变化。但是没有图片。
注意这里的icon。

<link href="static/css/simple-line-icons.css" rel="stylesheet" type="text/css">

网页里面的icon是通过这个连接去添加的。这个CSS还要去加载对应的字体，打开这个css可以看到如下内容：

@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'), url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'), url('../fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'), url('../fonts/Simple-Line-Icons.woff?v=2.4.0') format('woff'), url('../fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
  font-weight: normal;
  font-style: normal;

所以如果icon没有显示，对应的，你也要将字体添加到static文件夹下面。
路径这次可以不修改。
路径的解释如下：

一直没有效果，后来才发现是绝对路径，相对路径搞错了。url(images/sort.png)表示的是当前文件夹下的images文件夹下的sort.png图片，因为CSS文件位于/Content文件夹，所以系统就去/Content/images下寻找sort.png图片，而此时图片位于/images中，当然就找不到了。
修复方法：1. 绝对路径: url(/images/sort.png) 表示到根目录下寻找images文件夹里面的sort.png图片
2 相对路径：url(…/images/sort.png) 表示从当前目录返回到上一层目录，即/目录，然后再查找/目录下的images目录里面的sort.png图片
以下是百度的内容：
“.” 代表当前所在目录，相对路径。
“…” 代表上一层目录，相对路径。
“…/…/” 代表的是上一层目录的上一层目录，相对路径。

5.修改图片的路径

原先的路径如下：

 style="background-image: url('img/bg-showcase-1.jpg');"></div>

根据其中的地址，找到对应的img文件，并将他们拷贝到static/img文件夹下。同时修改引用的路径，修改后的内容如下：

 style="background-image: url('static/img/bg-showcase-1.jpg');"></div>

6.修改js的路径

在index.html中找到js的路径：

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

将对应的js拷贝到static/js，然后修改路径如下：

{% block scripts %}
<script src="static/js/jquery.js"></script>
<script src="static/js/bootstrap.js"></script>
    {%- endblock scripts %}

之后再运行，基本上就差不多了，可以正常的显示。
后面的话就是按照个人喜好进行内容的修改了。