In Bottle.py, to be able to use static assets such as font, picture, JavaScript, and CSS files, we need to set a route to a folder to store those static files.
The name of the static folder could be anything we like, however, people like to name it as "public" folder in the root directory. And the best place to set the route to this folder is in the entry point file "index.py". Moreover, in this folder, we can create as many sub-folders as we need to store different kind of files.
# index.py
from bottle import static_file, get
from routes.frontend import index
app = index.app
@app.get('/static/<filepath:path>')
def staticFile(filepath):
return static_file(filepath, root="public")
###################################################################
import socket
host = socket.getfqdn()
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
app.run(host='localhost', port=8000, debug=True, reloader=True)
###################################################################
After the route to static assets is set, we can use different kind of static files as below:
<!--views/base.tpl-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TV Channel Website</title>
<script src="/static/scripts/jquery.js"></script>
<link href="/static/images/sitelogo.png" rel="icon" />
<link href="/static/fonts/setup.css" rel="stylesheet" />
<link href="/static/styles/base.css" rel="stylesheet" />
</head>
<body>
Hello World!
</body>
</html>
/* public/styles/base.css*/
:root{
--body-font: 14px/1.5 Vidaloka, OdorMeanChey;
--background-dark: #541616;
--background: #c64242;
--background-light: #f7c2c2;
--foreground: #fce4e4;
--color: white;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: #ff60ac;
}
a:hover{
opacity: 0.7;
}
.region{
max-width: 1100px;
margin: 0 auto;
}
body{
background: var(--background-light);
font: var(--body-font);
color: var(--color);
}
