비주얼 스튜디오 2019에서 사쿠토 Flask Jade (Pug) # 1
Flask vs Bottle의 이야기는 아무래도 좋다.
Jade vs Pug의 이야기도 아무래도 좋다.
이른 이야기가 가고시마 사투리와 표준어의 차이를 말하는 것과 같다.
다음을 클릭
만들기를 클릭
프로젝트가 완성된다.
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.jadedoctype 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 © #{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.jadeextends 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 »
.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 »
.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 »
.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 »
about.jadeextends layout
block content
h2 #{title}.
h3 #{message}
p Use this area to provide additional information.
contact.jadeextends 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:[email protected]') [email protected]
br
strong Marketing:
a(href='mailto:[email protected]') [email protected]
이상의 파일이 바삭하게 완성된다.
실행하면
순식간에 편지지가 완성된다.
Jade에 변수로 데이터를 전달합니다.
Getting started Get More Libraries Mcirosoft Azure를 변수로 바꾸자.
h2와 p를 변수화합니다. #{변수}로 다시 작성합니다.
index.jadeextends 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 »
.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 »
.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 »
.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 »
index.jadeblock 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 »
.row
.col-md-4
h2 #{header[0]}
p #{para[0]}
p
a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more »
.col-md-4
h2 #{header[1]}
p #{para[1]}
p
a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more »
.col-md-4
h2 #{header[2]}
p #{para[2]}
p
a.btn.btn-default(href='http://azure.microsoft.com') Learn more »
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,
)
프로그램에서 텍스트를 변경할 수 있습니다.
다음은 루프의 예입니다.
index.jade를 다음과 같이 다시 작성합니다.
index.jadeextends 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 »
.row
{% for x in header %}
.col-md-4
h2 #{x}
p #{para[loop.index-1]}
p
a.btn.btn-default(href='#') Learn more »
{% endfor %}
{% ... %}의 신사 (jinja) 문에서 변수는 그대로 header라고 씁니다.
다른 Jade 문은 #{prara[loop.index-1]}과 같이 작성됩니다.
loop.index 는 for loop 의 인덱스를 취급하기 위한 변수입니다. [1,2,3,...]와 1부터 시작하므로 주의
Reference
이 문제에 관하여(비주얼 스튜디오 2019에서 사쿠토 Flask Jade (Pug) # 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiratarich/items/13b003638bd9c0b60f2a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
"""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)
"""
The flask application package.
"""
from flask import Flask
app = Flask(__name__)
app.jinja_env.add_extension('pyjade.ext.jinja.PyJadeExtension')
import FlaskWebProject.views
"""
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.'
)
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 © #{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
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 »
.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 »
.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 »
.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 »
extends layout
block content
h2 #{title}.
h3 #{message}
p Use this area to provide additional information.
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:[email protected]') [email protected]
br
strong Marketing:
a(href='mailto:[email protected]') [email protected]
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 »
.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 »
.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 »
.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 »
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 »
.row
.col-md-4
h2 #{header[0]}
p #{para[0]}
p
a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more »
.col-md-4
h2 #{header[1]}
p #{para[1]}
p
a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more »
.col-md-4
h2 #{header[2]}
p #{para[2]}
p
a.btn.btn-default(href='http://azure.microsoft.com') Learn more »
@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,
)
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 »
.row
{% for x in header %}
.col-md-4
h2 #{x}
p #{para[loop.index-1]}
p
a.btn.btn-default(href='#') Learn more »
{% endfor %}
Reference
이 문제에 관하여(비주얼 스튜디오 2019에서 사쿠토 Flask Jade (Pug) # 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiratarich/items/13b003638bd9c0b60f2a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
