The top of the dashboard architecture is a navigation, the left is a menu bar, and the right shows the corresponding content according to the selection on the left.
1, Preparatory work
1. Static file
Download bootstrap 3, unzip it, create a new dashboard folder under the static folder, and then create CSS and JS folders. Put bootstrap.min.css in CSS under bootstrap under CSS under dashboard folder, and then put bootstrap.min.js under JS folder.
Because bootstrap is from jQuery, you need to download jQuery again.
get into http://code.jquery.com/
After clicking minified, assign the address behind src to see all the code used by jQuery, then copy it, create a file in js and save it.
2. Project framework document
Create a new requirement.txt in video.
django==2.1.2 mako==1.0.7
use:
Enter the video folder and enter the command: pip install -r requirements.txt in cmd to install the dependencies as a whole.
2, Initialize Mako
First, create a new libs folder under the app. Under the libs folder, each py file is a function.
Create a new base_render file to initialize mako
# coding:utf-8
'''
mako Initialization of
'''
from mako.lookup import TemplateLookup
from django.template import RequestContext # Request context
from django.conf import settings # Get the templates address
from django.template.context import Context
from django.http import HttpResponse
def render_to_response(request, template, data=None):
context_instance = RequestContext(request) # Define context instance
# Get the template address
path = settings.TEMPLATES[0]['DIRS'][0]
lookup = TemplateLookup(
directories=[path], # Register path with mako
output_encoding='utf-8',
input_encoding='utf-8'
)
mako_template = lookup.get_template(template) # Register our template
if not data:
data = {}
if context_instance:
context_instance.update(data) # If the instance exists, update the data
else:
context_instance = Context(data) # If the instance does not exist, an instance is created
result = {}
for d in context_instance:
result.update(d)
result['csrf_token'] = ('<input type="hidden" '
' name="csrfmiddlewaretoken" value={0} '
' />'.format(request.META['CSRF_COOKIE']))
return HttpResponse(mako_template.render(**result))
Then we define a package of views in the dashboard and build a base file in it to deploy the environment.
# coding:utf-8
from django.views import View
from app.libs.base_render import render_to_response
class Base(View):
TEMPLATE = 'dashboard/base.html' # Basic template, and subsequent html should inherit this template
def get(self, request):
return render_to_response(request, self.TEMPLATE)
Then create a dashboard folder in templates, and then create a base html file.
Then start and try:
Normally started.
3, Define Mako
Determine the shared area in baseHTML. For example, title, js, css, body, etc. can be shared
base.html content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${self.title()}</title>
<link href="/static/dashboard/css/bootstrap.min.css" rel="stylesheet">
${self.css()}
</head>
<body>
${self.content()}
</body>
<script src="/static/dashboard/js/jquery-1.12.4.min.js"></script>
<script src="/static/dashboard/js/bootstrap.min.js"></script>
${self.js()}
</html>
<%def name="title()"></%def>
<%def name="js()"></%def>
<%def name="css()"></%def>
<%def name="content()"></%def>
Note: you need to import jQuery first, and then bootstrap.js
Create a new html to write the navigation bar.
Enter Bootstrap, select Bootstrap 3 Chinese document, and then select navigation bar
Create a nav.html in the dashboard and copy the example,
Remember to modify base.py TEMPLATE = 'dashboard/nav.html'
Then bring the css over again
The display effect is like this. We need to remove unused components.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">dashboard</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#"Class =" dropdown toggle "data toggle =" dropdown "role =" button "aria haspopup =" true "aria expanded =" false "> User < span class =" caret "> < / span ></a>
<ul class="dropdown-menu">
<li><a href="#"> logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Then we will embed this navigation into our basic html.
Add to base.html: <% include file = "NAV. HTML" / >
Remember to change the template in base.py to base
Look, it's embedded.
Here we want to write our own CSS: create a new base.css, and then add our CSS under the CSS of bootstrap in base.html: < link href = "/ static / Dashboard / CSS / base. CSS" rel = "stylesheet" / >
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#base-area {
width: 100%;
position: relative;
height: 100%;
}
.navbar {
margin-bottom: 0;
}
.side-menu {
height: 100%;
width: 12%;
position: absolute;
left: 0;
top: 0;
list-style: none;
padding-left: 0;
}
.side-menu li {
text-align: center;
width: 100%;
line-height: 32px;
cursor: pointer;
border: 2px solid #cccccc
}
Here are some adjustments in the leftmost column.
.side-menu {
height: 100%;
width: 12%;
position: absolute;
left: 0;
top: 0;
list-style: none;
}
Absolute is based on the parent base area of this tag and has an absolute positioning. The left side is 0 relative to base area, and the upper side is 0 relative to base area. list-style: none; It means that there is no list style (that dot is gone).
padding: sets the width of the inner margin of the element.
.side-menu li {
text-align: center;
width: 100%;
line-height: 32px;
cursor: pointer;
border: 1px solid #cccccc
}
Text align text centered, line height text line height, cursor: pointer mouse used to become a small hand. Border: 1px solid #cccc border.
This is the style.
Next, change the style of the right column.
Add right in base.html
<div class="base-content">
${self.content()}
</div>
Modify its style in the css we defined:
.base-content{
width: 88%;
height: 100%;
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #cccccc
}
Then create an index.html, change the Base in base.py to Index, modify the response, and change the template to index.html.
In index, the html of base is introduced.
That's all for now. The next article continues.