For using templates
we need to modify in setting.py
TEMPLATES = [
{
'BACKEND':
'django.template.backends.django.DjangoTemplates',
'DIRS':
[os.path.join(BASE_DIR,'templates')],
'APP_DIRS':
True,
'OPTIONS':
{
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
'templates' is name of your templates directory. It must be at
your root directory.
Template file will
be your html file. Create template html file in template directory.
How to include
CSS/JS in your template file.
Define your static directory named as “staticFiles” in your project.
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,
'staticFiles'),
)
In your html
template how to use static directory files.
Include {% load static %} for
loading static directory in template file.
Use <script
type="text/javascript" src="{% static "jquery.min.js"
%}"></script> to include java-script file.
Enjoy your first
template!!
For using layout of
web-site you need to create a layout.html in templates directory.
This layout.html
contain the layout. That file need to be include in page view file.
In views.py file
you need to define function like.
def main(request):
variables =
{
'variable_1': 'Value of variable one',
'variable_2': 'Value of variable two'
}
return
render(request, "main.html", context=variables )
So your main page
will call main.html.
which contain
{% extends "layout.html" %}
{% block content %}
<H1>Main
body part</H1>
<p>{{
variable_1 }}</p>
<p>{{
variable_2 }}</p>
{% endblock %}
Here we extent
layout.html in main.html. here layout.html is web-site layout.
It contain.
It contain.
<!DOCTYPE html>
<html>
<head>
<title>First App</title>
{% load static
%}
<link
rel="stylesheet" href="{% static
"/bs3.4.1/css/bootstrap.min.css" %}">
<link
rel="stylesheet" href="{% static "/layout.css"
%}">
<script
type="text/javascript" src="{% static
"/bs3.4.1/js/bootstrap.min.js" %}"></script>
<script
type="text/javascript" src="{% static "jquery.min.js"
%}"></script>
</head>
<body>
<div
class="container container-table">
<div
class="row header" >
<div
class="col-md-2">md2</div>
<div
class="col-md-8">md8</div>
<div
class="col-md-2">md2</div>
</div>
<div
class="row bodyContainer col-md-12" >
{% block content %}{% endblock %}
</div>
<div
class="row footer" >
<div
class="col-md-2"></div>
<div
class="col-md-8" align="center">Footer</div>
<div
class="col-md-2"></div>
</div>
</div>
</body>
</html>
Enjoy your first
page with basic website layout.
0 comments:
Post a Comment