Help us understand the problem. What is going on with this article?

Visual studio 2019でさくっとBottle Pug

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

html生成に効率的???

image.png

pugを使うための準備

image.png

image.png

参考までに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)

出力結果
image.png

生成された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>
hiratarich
生涯プログラマ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away