I used Pug (Jade?) In Node.js to generate html, so let's use Pug in python bottle.

Efficient for html generation ???

Preparing to use pug

For reference, requirements.txt looks like this

`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

Creating 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);
     });
   });

Place index.pug in the views folder

Handling of variables for pug.

The string from the app is. Enclose it in parentheses like {{title}}. Scripts in pub can be entered with python for template after-. Variables used in pug represent i in # {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)

Output result

Generated 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>

[PYTHON] Bottle Pug in Visual studio 2019