Day 17 Flask 静态文件

这篇主要是讲到静态文件，静态文件就是 CSS 、 JavaScript 与图片档之类的档案(因为在 Flask 中 html 与这些东西位置不同，所以我没讲到 html，不然 html 应该也算静态档案)。而在 Flask 中要如何使用这些静态档案呢？位置又在哪里呢？

静态文件设定

再来说说要如何设定静态文件，在 app.py 中一开始一定会有这行：

app = Flask(__name__)

在这行中，其实可以加入许多参数，而它原本的型态是长这样的

Flask(import_name, static_url_path=None, static_folder='static', static_host=None, host_matching=False, subdomain_matching=False, template_folder='templates', instance_path=None, instance_relative_config=False, root_path=None)

除了 import_name 是必填的(基本上是填 __name__。可以改，但是这会扯到很多东西，所以算了)，其他都是选填。这篇主要会讲到的就是 static_folder 、 static_url_path 这两个参数，因为这两个设定完要使用的时候比较特殊一点。

其中 static_folder 就是静态文件的位置，必须设定为指向存放静态位置的地方(废话)，预设是存放在专案根目录下的 static (没有 s)，前面不可为斜线开头；後面可有可无。

那 static_url_path 又能做什麽呢，这个是将静态位置的位置虚拟成一个假路径，让资源到假路径去找(听不太懂对吧，我已经用尽了我 2X 年的中文功力去形容了，如果还是不懂的话到使用时直接看范例吧)，唯一要注意的是使用的时候前面必须为斜线开头，後面可有可无。

而 template_folder 就是上一篇所讲的前端页面位置了，在使用时基本上不太会遇到问题，所以我快速讲一下：如果页面在 uvw/xyz/index.html，这个参数设成这样：

# 前面不可为斜线开头，後面无所谓
app = Flask(__init__, template_folder='uvw/')

那回传画面就这样写就可以了。

@app.route('')
def index():
    return render_template('xyz/index.html')

对，没错，就接着写。接着来进入主题讲一下静态文件。

静态文件使用

再来说说要如何使用静态文件，在 Flask 中这些静态文件使用方式会受到 static_folder 、 static_url_path 这两个参数的影响。若要使用到静态文件的资源，有两种方式：

1. 直接找位置

   • 维持预设

     如果 static_folder 跟 static_url_path 都不做设定，那麽在 html 就必须这样呼叫：

     index.html

     <img src='static/logo.svg'>
     

   • 设定 static_folder

     如果现在设定了 static_folder，架构像这样(对啦，有点扯，只是举例，看看就好)：

       ithome
       ├── abc
       │   └── def
       │       └── logo.svg
       ├── templates
       │   ├── res
       │   │   └── home.html
       │   ├── base.html
       │   └── index.html
       ├── app.py
       ├── configs.py
       ├── Pipfile
       └── Pipfile.lock
     

     app.py 这样设定：

     # static_folder 前面不可为斜线开头，不然会找不到；後面可有可无。
     app = Flask(__init__, static_folder='abc/def/')
     

     index.html 内要直接找位置就必须这样写：

     <!-- 这个前面有没有斜线没关系 -->
     <img src='def/logo.svg'>
     

     好像有点抓到感觉了对吧，再看一个。

   • 设定 static_url_path

     如果现在设定了 static_url_path (还记得它是虚拟出来的假路径吗，不用真的建立的位置喔)， 那有没有设定 static_folder 其实没差(只要它还是正确的指向静态文件的位置就好)。而架构一样长这样：

       ithome
       ├── abc
       │   └── def
       │       └── logo.svg
       ├── templates
       │   ├── res
       │   │   └── home.html
       │   ├── base.html
       │   └── index.html
       ├── app.py
       ├── configs.py
       ├── Pipfile
       └── Pipfile.lock
     

     app.py 这样设定：

     # static_folder 前面不可为斜线开头，不然会找不到；後面可有可无。
     # static_url_path 前面必须为斜线开头；後面可有可无。
     app = Flask(__init__, static_url_path='/img/', 
                 static_folder='abc/def/')
     

     那麽 index.html 内要直接找位置就必须这样写：

     <!-- 这个前面有没有斜线没关系 -->
     <img src='img/logo.svg'>
     

   直接找位置的方式知道如何使用了吧！就是使用时必须抓位置路径的最後一个名称(我也不知道为什麽会这样，但是不抓就不会动，改天有空我在看一下框架如何实作的吧)。

2. url_for

   这个方式是 Flask 官方使用的写法(前面只是我想跟你说可以这样用而已)，这个方式跟 static_folder 与 static_url_path 设定了什麽无关(也就是说改路径了之後，可以不用跑到每个页面再改一次了)。实作就延续上面的架构：

    ithome
    ├── abc
    │   └── def
    │       └── logo.svg
    ├── templates
    │   ├── res
    │   │   └── home.html
    │   ├── base.html
    │   └── index.html
    ├── app.py
    ├── configs.py
    ├── Pipfile
    └── Pipfile.lock
   

   app.py 中怎麽设 static_folder 与 static_url_path 都不会影响到 templates 取使用静态文件，所以就让我跳过它吧。

   而在 html 中要使用时，就要这样使用：

   index.html

   <!-- 这个是 Flask 提供的方式， app.py 中不用设定这个 function -->
   <img src={{ url_for('static', filename='logo.svg' ) }} />
   

   推荐是使用 url_for() 这个方式，因为静态文件改位置时不用到每个页面再改一次，能够在程序的维护上更加的方便。

那麽就大概这样，基本上讲这麽多只是要讲最後一个方式而已，其他只是让最後的方式能够有个比较而已，话说本来这篇没有要讲这麽多的。

大家掰~掰~