I built my backend using Python Flask and tested it with basic HTML templates with no CSS and it worked no problem. However, when I tried to implement Bootstrap it won't load the css. I've placed the css and js files into a static folder.
Here is the Bootstrap HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Simple Safety</title>
<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename ='bootstrap.min.css') }}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{ url_for('static', filename =ie10-viewport-bug-workaround.css') }}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename ='style.css') }}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]
<script type="text/javascript" src="{{ url_for('static', filename = 'ie-emulation-modes-warning.js') }}"></script>-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<!--Main Content-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{url_for('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/', filename='jquery.min.js') }}"></script>
<script>window.jQuery || document.write("<script type='text/javascript' src='{{ url_for('static', filename='jquery.min.js') }}''><\/script>")</script>
<script type="text/javascript" src="{{ url_for('static', filename ='bootstrap.min.js') }}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript" src="{{ url_for('static', filename='ie10-viewport-bug-workaround.js') }}"></script>
</body>
</html>
I realized that I had placed my 'static' folder in the 'templates' folder, an old habit I did with front-end only applications. You need to place the 'static' folder in the directory with the templates folder.
Related
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ static 'images/logo.png' }}" alt="Company Logo">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
-->
</body>
</html>
when including the static files in the Django-jinja template it shows an error. If I removed that line It worked. But I want to load my static files in jinja template.
First you have to load static at top of your html page
{% load static %}
Then you have to use {% %} instead of {{ }}
<link rel="icon" href="{% static 'images/logo.png' %}" alt="Company Logo">
you need to add {% load static %} first
This isn't a duplicate question. I've updated the flask code with the answers in the similar questions, but it still isn't working. I'm very new to flask, html and python, so I really do need help. I've probably seen my answer somewhere but haven't recognised it.
The code below doesn't render the index.html template. Instead, I get a HTTP 500 error (jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'string'). I think the problem is in the .html file because when I render other index.html templates without changing my app.py code, the html template is rendered.
Here's the code in app.py
from flask import Flask, render_template, request, session, abort
app = Flask(__name__)
app.static_folder = 'static'
#app.route('/', methods=['GET'])
def test():
resp = make_response(render_template('index.html'))
return resp
#app.route('/getTenants', methods=['GET'])
def dummy():
data = ['Black', 'Blue', 'White', 'Pink']
return jsonify(results=data)
if __name__ == "__main__":
app.run(debug=True)
Here's the code in index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
<title>Create Contract</title>
<!-- CSS -->
<link href="{{ url_for('static', filename= 'css/common.min.css') }}" rel="stylesheet" />
<link href="{{ url_for('static', filename= 'css/simple-line-icons.css') }}" rel="stylesheet" />
<link href="{{ url_for('static', filename= 'css/style.css') }}" rel="stylesheet" />
<head>
<body>
<!-- Spinner -->
<div class="spinner global" ng-class="{'showing' : loading }"><div class="spinner-icon"></div></div>
<!-- Main View -->
<div ui-view></div>
<!-- Awesome Angular -->
<script src="{{ url_for('static', filename='js/libs/angular.min.js') }}"></script>
<!-- AngularJS plugins -->
<script src="{{ url_for('static', filename='js/libs/ui-bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/angular-ui-router.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/ocLazyLoad.min.js') }}"></script>
<script src="{{ url_for('static', filename=js/libs/loading-bar.min.js') }}"></script>
<!-- App scripts -->
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<script src="{{ url_for('static', filename='js/routes.js') }}"></script>
<script src="{{ url_for('static', filename='js/services.js') }}"></script>
<script src="{{ url_for('static', filename='js/controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/directives.js') }}"></script>
</body>
</html>
The traceback error is
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'string'
Can someone please let me know what I'm doing wrong?
Line 33 in your code index.html snippet:
Right after filename attribute paste '
I am new to python Django.
I have a project like this below:
But in my TestModel APP, there is a index.html here:
<!doctype html>
{% load staticfiles %}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="description" content="" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> -->
<title>Python探索馆 - Slice</title>
<!-- Main Theme -->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<!-- Font -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_n5vylbuqe61or.css" />
</head>
<body>
...
You see I have load the static files.
And in my testdj/ the settings.py, I have set the STATIC_URL:
STATIC_URL = '/static/'
But in the browser, the stylesheet did not load success.
EDIT-1
The css structrue:
You have put your static files in your template folder. That is not where they go. You need to put them either in your app or in a folder that is referenced by the STATICFILES_DIRS setting.
Css and Javascript are not working on my website
I'm using Flask framework on PythonAnywhere
Directory sturcture:
home/dubspher/mysite/
- README.md
- app.py
- index.html
Static/
- css
- fonts
- images
- js
- sass
Original version of HTML:
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/jquery.scrollgress.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.slidertron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
Modified Version but not working:
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<noscript>
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/skel.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style-xlarge.css') }}" rel="stylesheet">
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dropotron.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.scrollgress.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.scrolly.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.slidertron.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/skel.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/skel-layers.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/init.js"') }}"></script>
As you can see I moved JS from as suggested on another post! And also moved all the stylesheet files to a new folder called static!
I cleared the cache on my browser but I can see that 404 errors in the inspect mode.
http://dubspher.pythonanywhere.com
App.py
from flask import Flask
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_folder='/home/dubspher/mysite/')
#app.route('/')
def static_file():
return app.send_static_file('index.html')
if __name__ == "__main__":
app.run()
With the files laid out like you currently have them, move your index.html file into the root of static subfolder.
home/dubspher/mysite/
- README.md
- app.py
Static/
- index.html
- css
- fonts
- images
- js
- sass
And use the following app.py
from flask import Flask
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path="/static", static_folder='/home/dubspher/mysite/static')
#app.route('/')
def static_file():
return app.send_static_file('index.html')
if __name__ == "__main__":
app.run()
And change your index.html links to:
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.dropotron.min.js"></script>
<script src="/static/js/jquery.scrollgress.min.js"></script>
<script src="/static/js/jquery.scrolly.min.js"></script>
<script src="/static/js/jquery.slidertron.min.js"></script>
<script src="/static/js/skel.min.js"></script>
<script src="/static/js/skel-layers.min.js"></script>
<script src="/static/js/init.js"></script>
<noscript>
<link rel="stylesheet" href="/static/css/skel.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/style-xlarge.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie/v8.css" /><![endif]-->
</head>
Your stylesheets are referenced in your javascript. Modify init.js so that it references the correct paths:
global: { href: '/static/css/style.css', containers: 1400, grid: { gutters: ['2em', 0] } },
xlarge: { media: '(max-width: 1680px)', href: '/static/css/style-xlarge.css', containers: 1200 },
large: { media: '(max-width: 1280px)', href: '/static/css/style-large.css', containers: 960, grid: { gutters: ['1.5em', 0] }, viewport: { scalable: false } },
medium: { media: '(max-width: 980px)', href: '/static/css/style-medium.css', containers: '90%', grid: { zoom: 2 } },
small: { media: '(max-width: 736px)', href: '/static/css/style-small.css', containers: '90%!', grid: { gutters: ['1.25em', 0], zoom: 3 } },
xsmall: { media: '(max-width: 480px)', href: '/static/css/style-xsmall.css' }
I'm working locally on a django project with bootstrap . The structure screenshot is above:
I have the following in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Landing Page - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
{% load staticfiles %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" />
<!-- Custom CSS -->
<link href="{% static "css/landing-page.css" %}" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="{% static "font-awesome-4.2.0/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
In my settings.py I have:
STATIC_URL = '/static/'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
When I open "http://onetwentyseven.0.0.1:8000/index/", I see the html but the bootstrap css styling is not present. in dev tools I see:
How can I fix the CSS paths?
This seems to be a syntax error. If you move the css directory from static>app1>css to static>css. It should work just fine