I am using a bootstrap index file in the header.html in a django project. Can anyone point out a fix or the easiest method to link the bootstrap file to the static folder. In what places does it need to be done, and how?
Also, for use of bootstrap, could I just use the index file rather than header?
I can see the error (below) but do not know the syntax to fix it. The route i've tried is using Jinja logic and it is on that line that the first error arises. (line 14)
Current error:
Error during template rendering
In template C:\Users\User\Desktop\pythonsite\mysite\aboutme\templates\aboutme\header.html, error at line 14
Invalid block tag on line 14: 'static'. Did you forget to register or load this tag?
4 <head>
5
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 <meta name="description" content="">
9 <meta name="author" content="">
10
11 <title>Freelancer - Start Bootstrap Theme</title>
12
13 <!-- Bootstrap core CSS -->
14 <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
15
16 <!-- Custom fonts for this template -->
17 <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
18 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
19 <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
20
21 <!-- Plugin CSS -->
22 <link href="{% static 'vendor/magnific-popup/magnific-popup.css' &}" rel="stylesheet" type="text/css">
23
24 <!-- Custom styles for this template -->
Update:
I changed the static and use of jinja to simply what it was originally in the bootstrap index file: e.g.
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
and this worked in that it ran the webpage, but without CSS>
I still cannot figure out how to link the css from this index page to the templates folder and how/where what syntax.
Current site structure:
The name of the folder is "aboutme" (name of main app)
Inside it is the static folder.
Inside the static folder, I have dropped the entire contents of the bootstrap download (e.g. the fonts, css and js folders)
I have the templates folder in which I have the aboutme folder and in that is are the header.html and home.html. The header.html is the file that I am using (below), trying to reference the css/js etc so the site looks and displays correctly.
Do I simply use:
<link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
instead of
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
and do I do this in each case? Or should I be using jinja logic?
Somewhere (anywhere) before that, put in
{% load static %}
The first thing is to load the static, for that we use the following:
{% load static %}
To call any static file, it would be like this:
<link href="{% static 'FILE PATH' %}" rel="stylesheet">
<script src="{% static 'FILE PATH' %}"></script>
Example:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anything</title>
<!-- Bootstrap CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Font Awesome -->
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
If you have a base template and you want to extend the other templates, you should use the following:
{% extends 'BASE FILE PATH' %}
Related
Okay, so I tried having a folder with static template elements accessible by all apps with two css files and one html file.
In settings.py I went to TEMPLATES and added: 'DIRS': os.path.join(BASE_DIR, 'static_files'),, as seen here (I edited out confidential info therefrom).
My template fragment topnav.html looks like this:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="w3.css">
<title>EvoLang</title>
</head>
<!-- Content will go here -->
<body>
<script src="myScript.js"></script>
<!-- Navigation -->
<nav class="topnav">
<ul class="topnav">
<li><a href="#">Entrywords
<li><a href="#">Sentences
</ul>
</nav>
<!-- / Navigation -->
</body>
Then, in previously working index.html in my app biblio looks like this:
{% extends "topnav.html" %} {# this enables using the top navigation bar #}
<p>Lorem ipsum</p>
What I get while accessing that page is the following error: [Errno 22] Invalid argument: 'E:\\MyProject\\myproject\\:\\biblio\\index.html'
I don't really get what is this \\:\\ part here.
I am using Django 1.11.2 with Python 3.6.
The DIRS setting should be a list. You are missing the square brackets and the trailing comma. Try:
'DIRS': [os.path.join(BASE_DIR, 'static_files')],
I'm working in Django 1.8, OSX, and Chrome. Some ionicons I've included in a rendered template are not showing up in Heroku (staging environment). I'm fairly certain that I have linked/included the icons properly in the css and font files (30464569), because they show up just fine on the localhost, on cPanel, and when published on the person's own website. Additionally, they even show up on Heroku if I use Safari! What is happening here?
I've read a bunch of SO posts about this, but most people are referencing other font packages (29687388) or (14366158), other frameworks (25982037) or (21472458), or completely missing icons (27766015).
EDITED TO INCLUDE HTML (from Django template)
<head>
<meta charset="UTF-8">
<title>{{ student.preferred_name }} {{ student.last_name }}</title>
<!--<meta name="description" content="[Insert your description here]">-->
<!--<meta name="google-site-verification" content="">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/normalize.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/grid.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/owl.carousel.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/owl.theme.default.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/ionicons.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'resources/css/queries.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'resources/css/style.css' %}">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic">
</head>
I'm hesitant to post code because it's not a public project, but here are are two images showing the issue:
Icons on LocalHost
Icons on Heroku
Any ideas on how I can fix this? I need my users to see an accurate preview before they publish their site and this icon issue has been a major headache for over a week.
Thanks!
Sarah
Be sure that run command $python manage.py collectstatic before pushing to heroku.
I had this same problem
confirm that the static assets are correctly spelled
Note that it might not be case sensitive on windows but Linus is case sensitive and Heroku runs on Linus
so ensure that your lower and upper cases are in place
I have a django page and I add various js dependencies on multiple pages. For example, on page 1 and 2 I have table that I want to sort. So I include following code in both pages.
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>
Let's say, on page 3 and 4 I have nvd3 graphs. So I include following code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link href="{% static 'js/nvd3-master/build/nv.d3.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
If I need to edit src url of these dependencies, I have to edit all pages containing them separately.
I would like to define variables on js and css static files, so I do not have to edit them multiple times, but just once.
Something like this:
bootstrap_sortable_css = """<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">"""
bootstrap_sortable_js = """<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>"""
And then just print it in my template:
<html>
<head>
{{bootstrap_sortable_css}}
</head>
<body>
content
{{bootstrap_sortable_js}}
</body>
</html>
Is there any standard for this I did miss?
You might want to use block. Block is used for template inheritance. So, you can have 1 root template file, then all your pages just need to inherit the root template.
You can define A css and js block like this.
<html>
<head>
{% block css %}
{% endblock css %}
</head>
<body>
content
{% block js %}
{% endblock js %}
</body>
</html>
Then, you can override the block on your page template based on your page needs.
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!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">
<title>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- 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>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>
What will be the best stage in Django to append file timestamp to all urls which start with /static/?
Example URLs:
http://mydomain.com/static/css/...
http://mydomain.com/static/img/...
http://mydomain.com/static/js/...
Is there an app which does that and that will work with Mercurial VCS?
You can try django-compressor
This app combines several CSS/JS files to the one file. And generates unique name for that file. For example:
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
<style type="text/css">p { border:5px solid green;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="utf-8">
{% endcompress %}
Result will be something like:
<link rel="stylesheet" href="/static/CACHE/css/f7c661b7a124.css" type="text/css" charset="utf-8">