For some reason I cant seem to load my css file onto my flask website, I have tried many ways but for some reason it's not working. Here's all the files with the directory on the left hand side.
main.py
from flask import Flask, render_template
app = Flask(__name__)
app.config['SESSION_COOKIE_SECURE'] = False
#app.route("/home")
#app.route("/")
def home():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True)
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
{{super()}}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}" />
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
home.html
{% extends 'base.html'%}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h1>Home Page</h1>
{% endblock %}
style.html
body {background-color:000000;}
Please note that 'main.py' is not inside of the folder of 'venv' but rather a sibling of 'venv', since it might look misleading
Related
I would like to connect my layout.html file with a CSS file so that every other page extending my layout.html has access to this CSS file.
That is the code:
layout.html
<!DOCTYPE html>
<html lang="de">
<head>
<title>Aufgabenzettel</title>
<link rel="stylesheet" href="/aufgabenzettel/static/css/main.css">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
index.html
{% extends "aufgabenzettel/layout.html" %}
{% block body %}
<h1>Meine Aufgaben</h1>
{% endblock %}
main.css
h1 {
color: aqua;
}
The href in layout.html is probably correct bacause I can be redirected to it in VS via ctrl + click. However, the h1 in index.html still appears in black instead of aqua...
What am I doing wrong?
I appreciate every kind of help!
First you have to add {% load static %} at the top of your code where you want to use static function in template and than you have to use static function like this {% static 'your_css_path_inside_static_directory' %} eg.
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Aufgabenzettel</title>
<link rel="stylesheet" href="{% static '/aufgabenzettel/static/css/main.css' %}">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I am new to Flask. I started from some Youtube videos,but somehow mine is not working with the extends part. I am getting the output as if I haven't extended the second HTML file specified below. Am I missing something ?
This is my "main.py" file
from flask import Flask,redirect,url_for,render_template
app = Flask(__name__)
#app.route("/")
def index():
return render_template("home.html")
if __name__=="__main__":
app.run(debug=True)
this is "templates/home.html" file
<!doctype html>
<html lang="en">
<head>
<title>mY Page</title>
</head>
<body>
<h1> this is nav----------- bar</h1>
<hr/>
{% include 'templates/test.html' %}
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>
and this is 2nd html "templates/test.html"
{% extends 'templates/home.html' %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
{% endblock %}
Probably the templates/ part is not required for extends.
Just use:
{% extends 'home.html' %}
in place of:
{% extends 'templates/home.html' %}
and it should work.
My webpage just prints out "{% extends 'base.html'% }". I'm wanting it to just print out the header "Template".
Both html files are in templates and the py file is one directory outside of that.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
index.html:
{% extends 'base.html' %}
{% block head %}
{% endblock %}
{% block body %}
<h1>Template</h1>
{% endblock %}
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% block head %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
I'm learning Flask and this is the file structure of my first project:
This is my app.py:
from flask import Flask, request, render_template
from data import Articles
app = Flask(__name__)
Articles = Articles()
#app.route('/')
def index():
return render_template('home.html')
#app.route('/about')
def about():
return render_template('about.html')
#app.route('/contact')
def contact():
return render_template('contact.html')
#app.route('/articles')
def articles():
return render_template('articles.html', articles = Articles)
#app.route('/article/<string:id>/')
def article(id):
return render_template('article.html', id=id)
if __name__ == '__main__':
app.run(debug=True)
This is my layout.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
{% block head %}
<meta charset="utf-8">
<title>Learning Flask - App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
{% endblock head %}
</head>
<body>
{% include 'components/_navbar.html' %}
<div class='container'>
{% block content %}
{% endblock %}
</div>
</body>
</html>
This is my home.html which is the only page working properly:
{% extends 'layout.html' %}
{% block content %}
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
{% endblock %}
This is my contact.html which doesn't show anything after the navigation bar, same problem with rest of the templates:
{% extends 'layout.html' %}
{% block content %}
<h1>WHY THE HELL DOESNT THIS SHOW UP!!</h1>
{% endblock %}
Well, changing the navbar HTML fixed the problem. Don't know what exactly caused the issue but it was probably a matter of conflicting CSS.
New to Django, I want to use different css files for different pages - i.e. page1.css for page1.html, page2.css for page2.html. Is there a way to do this while still extending base.html?
In base.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}Default Title{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- css -->
if page1.html
<link rel="stylesheet" href="{% static "css/page1.css" %}">
if page2.html
<link rel="stylesheet" href="{% static "css/page2.css" %}">
if page3.html
<link rel="stylesheet" href="{% static "css/page3.css" %}">
</head>
<body class="{% block body_class %}{% endblock %}">
{% block content %}{% endblock%}
</body>
</html>
In page1.html
{% extends "base.html" %}
{% load staticfiles %}
{% block body_class %}page1{% endblock %}
{% block title %}Page1{% endblock %}
{% block content %}
Page 1
{% endblock content %}
You can use the same concept that applies to {% block content %} in that you can fill it in or extend it on a page by page basis.
Hence, in base.html, create a block called styles in the head section (or anywhere you want to load your CSS):
{% block styles %}
{% endblock %}
Now, you can extend this block on a per page basis in any of your templates that use base.html:
Example: page1/template-view.html
{% extends "base.html" %}
{% load staticfiles %}
{% block styles %}
<link rel="stylesheet" href="{% static 'css/page1.css' %}">
{% endblock %}