CSS
<link rel="stylesheet" type=text/css href="{{ url_for('static', filename='style.css') }}">
src="{{url_for('static', filename='')}}"
Javascript
<script type = "text/javascript" src = "{{ url_for('static', filename = 'script.js') }}" ></script>
DRY
{% block main %}
{% endblock %}
{% extends 'base.html' %}
{% block main %}
{% endblock %}
href="{{ url_for('index') }}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{% block main %}
{% endblock %}
</body>
</html>
Dynamic Titles
@app.route('/')
def home():
title = 'Make A Short URL'
return render_template('home.html', title=title)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<title>{{ title }}</title>
</head>
<body>
{% block main %}
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
{% for message in get_flashed_messages() %}
<h2 class="alert alert-info">{{ message }}</h2>
{% endfor %}
Image CSS
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>