Visual studio 2019でさくっとFlask Jade(Pug)　#1

#Flask vs Bottleの話は、どうでも良い。
##Jade vs Pugの話もどうでも良い。
### 早い話が鹿児島弁と標準語の違いを語るのと等しい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/7727210f-8c4b-fe3e-66b2-6b12b696fc7a.png)
次にをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/46ad3446-08c3-4bd9-eb03-0ab5109821b0.png)

作成をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/9a6c36fd-536d-08c8-2467-67fb0db59db9.png)

プジェクトが出来上がる。

``` tree
C:.
│  FlaskWebProject.pyproj
│  requirements.txt
│  runserver.py
│
├─FlaskWebProject
│  │  views.py
│  │  __init__.py
│  ├─static
│  │  ├─content
│  │  │      bootstrap.css
│  │  │      bootstrap.min.css
│  │  │      site.css
│  │  │
│  │  ├─fonts
│  │  │      glyphicons-halflings-regular.eot
│  │  │      glyphicons-halflings-regular.svg
│  │  │      glyphicons-halflings-regular.ttf
│  │  │      glyphicons-halflings-regular.woff
│  │  │
│  │  └─scripts
│  │          bootstrap.js
│  │          bootstrap.min.js
│  │          jquery-1.10.2.intellisense.js
│  │          jquery-1.10.2.js
│  │          jquery-1.10.2.min.js
│  │          jquery-1.10.2.min.map
│  │          jquery.validate-vsdoc.js
│  │          jquery.validate.js
│  │          jquery.validate.min.js
│  │          jquery.validate.unobtrusive.js
│  │          jquery.validate.unobtrusive.min.js
│  │          modernizr-2.6.2.js
│  │          respond.js
│  │          respond.min.js
│  │          _references.js
│  │
│  └─templates
│          about.jade
│          contact.jade
│          index.jade
│          layout.jade

```

```runserver.py

"""This script runs the FlaskWebProject application using a development server.
"""

from os import environ
from FlaskWebProject import app

if __name__ == '__main__':
    HOST = environ.get('SERVER_HOST', 'localhost')
    try:
        PORT = int(environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555
    app.run(HOST, PORT)
```

```__init__.py
"""
The flask application package.
"""

from flask import Flask
app = Flask(__name__)
app.jinja_env.add_extension('pyjade.ext.jinja.PyJadeExtension')

import FlaskWebProject.views

```

```views.py
"""
Routes and views for the flask application.
"""

from datetime import datetime
from flask import render_template
from FlaskWebProject import app

@app.route('/')
@app.route('/home')
def home():
    """Renders the home page."""
    return render_template(
        'index.jade',
        title='Home Page',
        year=datetime.now().year,
    )

@app.route('/contact')
def contact():
    """Renders the contact page."""
    return render_template(
        'contact.jade',
        title='Contact',
        year=datetime.now().year,
        message='Your contact page.'
    )

@app.route('/about')
def about():
    """Renders the about page."""
    return render_template(
        'about.jade',
        title='About',
        year=datetime.now().year,
        message='Your application description page.'
    )
```

```layout.jade
doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title #{title} - My Flask/Jade Application
    link(rel='stylesheet', type='text/css', href='/static/content/bootstrap.min.css')
    link(rel='stylesheet', type='text/css', href='/static/content/site.css')
    script(src='/static/scripts/modernizr-2.6.2.js')
  body
    .navbar.navbar-inverse.navbar-fixed-top
      .container
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') Application name
        .navbar-collapse.collapse
          ul.nav.navbar-nav
            li
              a(href='/') Home
            li
              a(href='/about') About
            li
              a(href='/contact') Contact
    .container.body-content
      block content
      hr
      footer
        p &copy; #{year} - My Flask/Jade Application

    script(src='/static/scripts/jquery-1.10.2.js')
    script(src='/static/scripts/bootstrap.js')
    script(src='/static/scripts/respond.js')

    block scripts
```

```index.jade
extends layout

block content
  .jumbotron
    h1 Flask/Jade
    p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
    p
      a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more &raquo;
  .row
    .col-md-4
      h2 Getting started
      p Flask gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development.
      p
        a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more &raquo;
    .col-md-4
      h2 Get more libraries
      p The Python Package Index is a repository of software for the Python programming language.
      p
        a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more &raquo;
    .col-md-4
      h2 Microsoft Azure
      p You can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today.
      p
        a.btn.btn-default(href='http://azure.microsoft.com') Learn more &raquo;

```

```about.jade
extends layout

block content
  h2 #{title}.
  h3 #{message}
  p Use this area to provide additional information.
```


```contact.jade
extends layout

block content
  h2 #{title}.
  h3 #{message}
  address
    | One Microsoft Way
    br
    | Redmond, WA 98052-6399
    br
    abbr(title='Phone') P: 
    | 425.555.0100

  address
    strong Support: 
    a(href='mailto:Support@example.com') Support@example.com
    br
    strong Marketing: 
    a(href='mailto:Marketing@example.com') Marketing@example.com
```
以上のファイルがサクッと出来上がる。
##実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/d9b295f3-0089-fce2-e894-4abfd638f12b.png)
###あっという間にひな形が出来上がる。
##Jadeに変数でデータを渡す。
Getting started Get More Libraries Mcirosoft Azureを変数で入れ替えみよう。

h2とpのところを変数化します。#{変数}で書き直します。

```index.jade
extends layout

block content
  .jumbotron
    h1 Flask/Pug(Jade)
    p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
    p
      a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more &raquo;
  .row
    .col-md-4
      h2 Getting started
      p Flask gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development.
      p
        a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more &raquo;
    .col-md-4
      h2 Get more libraries
      p The Python Package Index is a repository of software for the Python programming language.
      p
        a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more &raquo;
    .col-md-4
      h2 Microsoft Azure
      p You can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today.
      p
        a.btn.btn-default(href='http://azure.microsoft.com') Learn more &raquo;
```


```index.jade
block content
  .jumbotron
    h1 Flask/Jade
    p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
    p
      a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more &raquo;
  .row
    .col-md-4
      h2 #{header[0]}
      p #{para[0]}
      p
        a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more &raquo;
    .col-md-4
      h2 #{header[1]}
      p #{para[1]}
      p
        a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more &raquo;
    .col-md-4
      h2 #{header[2]}
      p #{para[2]}
      p
        a.btn.btn-default(href='http://azure.microsoft.com') Learn more &raquo;

```
h2 を#{header[0]},#{header[1]},#{header[2]},#{header[3]}に置き換えています。配列形式にしました。
p を#{para[0]},#{para[1]},#{para[2]},#{para[3]}に置き換えています。配列形式にしました。
###次にviews.pyに変数を書き込みます。

```views.py
@app.route('/')
@app.route('/home')
def home():
    """Renders the home page."""
    return render_template(
        'index.jade',
        title='Home Page',header='入門,多くのライブラリを取得,サーバー'.split(","),
        para='''Flaskは、動的なWebサイトを構築するための強力なパターンベースの方法を提供します。これにより、関心事を明確に分離し、楽しいアジャイル開発のためにマークアップを完全に制御できます。
Python Package Indexは、Pythonプログラミング言語用のソフトウェアのリポジトリです。
Visual Studioを使用して、Microsoft Azureに簡単に発行できます。今日の無料試用版を使用してアプリケーションをホストする方法をご覧ください。'''.split('\n'),

        year=datetime.now().year,
    )
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/6bf4d02a-af0b-862c-0eba-e7a33a12c695.png)
プログラムからテキストを変更することができました。

### 次にループの例です。
index.jadeを下記のように書き直します。

```index.jade
extends layout

block content
  .jumbotron
    h1 Flask/Jade
    p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
    p
      a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more &raquo;
  .row
       {% for x in header %}
       .col-md-4
        h2 #{x}
        p #{para[loop.index-1]}
        p
        a.btn.btn-default(href='#') Learn more &raquo;
       {% endfor %}

```
{% ... %}の神社(jinja)ステートメントでの変数は、そのまま　headerと書きます。
そのほかのJadeステートメントは、#{prara[loop.index-1]}のように書きます。
loop.indexは、for loop のインデックスを扱うための変数です。<strong>[1,2,3,...]と1から始まるので注意</strong>