Visual studio 2019でさくっとBottle Pug

12346 ワード
pug Python bottle VisualStudio2019 Python テキストリンク

Node.jsでPug(Jade?)使ってhtmlを生成したのでpython bottleでPug使ってみよう。

html生成に効率的???

pugを使うための準備

参考までにrequirements.txtはねこんな感じ

requirements.txt
bottle==0.12.18
bottle-pypugjs==0.1.1.post6
chardet==3.0.4
pip==19.0.3
pypugjs==5.8.1
setuptools==40.8.0
six==1.13.0

index.pugの作成

index.pug
doctype html
html(lang="ja")
  head
    title {{title}}
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" ,crossorigin="anonymous")
    script(src="https://code.jquery.com/jquery-3.3.1.slim.min.js", integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", crossorigin="anonymous")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",crossorigin="anonymous") 
  body
   style.
    .bsz {
        width: 137px;
        height: 70px;
        font-size: small;
        margin: 2px !important;
    }
   .container 
    .jumbotron
     h1.display-3 {{title}}
    - colors='primary,secondary,success,danger,warning,info,light,dark'.split(',')
    - for i,x in enumerate(colors)
     - cx="bsz btn m-2 btn-"+x;
     button(class=cx,id='sw#{i}') SW#{i}
  script.
   $(function(){
     $('.btn').click(function(){
     var id=$(this).attr('id');
     alert("id="+id);
     });
   });

index.pugをviewsフォルダに配置

pugに対する変数の扱い。

appからの文字列は。{{title}}のように括弧でくくる。
pub中のスクリプトは、- の後にtemplate用pythonで記入できる。
pug中に使用する変数は、iを#{i}に表現する。

- colors='primary,secondary,success,danger,warning,info,light,dark'.split(',')
    - for i,x in enumerate(colors)
     - cx="bsz btn m-2 btn-"+x;
     button(class=cx,id='sw#{i}') SW#{i}
app.py
from bottle import *
from datetime import datetime
from bottle.ext.pypugjs import template, view, Plugin
@route('/')
@route('/home')
@view('index.pug')
def home():
    """Renders the home page."""
    return dict(
        year=datetime.now().year,title="Pug World"
    )
HOST,PORT='0.0.0.0',8080
run(server='wsgiref', host=HOST, port=PORT)

出力結果

生成されたhtml

pugout.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>None</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <style>.bsz {
    width: 137px;
    height: 70px;
    font-size: small;
    margin: 2px !important;
}
    </style>
    <div class="container">
      <div class="jumbotron">
        <h1 class="display-3">Pug World</h1>
      </div>
      <button id="sw0" class="bsz btn m-2 btn-primary">SW0</button>
      <button id="sw1" class="bsz btn m-2 btn-secondary">SW1</button>
      <button id="sw2" class="bsz btn m-2 btn-success">SW2</button>
      <button id="sw3" class="bsz btn m-2 btn-danger">SW3</button>
      <button id="sw4" class="bsz btn m-2 btn-warning">SW4</button>
      <button id="sw5" class="bsz btn m-2 btn-info">SW5</button>
      <button id="sw6" class="bsz btn m-2 btn-light">SW6</button>
      <button id="sw7" class="bsz btn m-2 btn-dark">SW7</button>
    </div>
  </body>
  <script>$(function(){
  $('.btn').click(function(){
  var id=$(this).attr('id');
  alert("id="+id);
  });
});
  </script>
</html>