Hello, everyone. This is the latest edition of Learning Python. What can YOU do? Django tutorials from scratch to finally successfully deploy live projects. In this section, integrate AdminLTE with Django.

Peekpa.com official address: Peekpa.com

In this section, we will introduce something very useful called Adminlte.

Official address: Adminlte. IO /

IO /themes/Admi…

IO /themes/v3/ I…

As you can see, this is a perfect Dashboard framework, and we’re going to integrate it into our website today. Let’s do it with me.

Download the source code

To integrate this thing, we first need to find its source code. Download the latest AdminLTE version 3.0.4 (if you are reading this, the latest AdminLTE version is not 3.0.4, please don’t worry, what this article is about, If no major changes are made, it can still be used on the latest version) :

Click on Source code.zip below to download:

After downloading it, I opened the file and it looked something like this:

HTML, index2. HTML and index3.html are in this folder. In fact, these three files are the corresponding Dashboard v1, Dashboard v2 and Dashboard V3 pages. Let’s click on any one of them. Here click index3.html, and the following interface is displayed:

This is the online Demo of the official website. Then we need to find the Login page, right under Extras on the left:

Click open and the entire login page looks like this:

The next step is to integrate this web page into our system.

Integration code

To integrate this web page into our system, start by creating login. HTML in the Templates directory:

Then we start gulp and put the URL in the index.html path:

Ok, so what we’ve seen so far is the contents of the login. HTML file.

Next, go to the AdminLTE Login page and right click “View page source” :

Let’s copy and paste the source code into our login. HTML file and, with the help of gulp, see what the front end looks like:

See why our style on the right is different from the original one? We mentioned this phenomenon in our previous article with Django Full stack development — 06. Introducing the Bootstrap framework for the front end, because we didn’t import CSS files. At this point we go back to the login. HTML file and find the following code:

<head>
<! -- Font Awesome -->
  <link rel="stylesheet" href=".. /.. /plugins/fontawesome-free/css/all.min.css">
  <! -- icheck bootstrap -->
  <link rel="stylesheet" href=".. /.. /plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <! -- Theme style -->
  <link rel="stylesheet" href=".. /.. /dist/css/adminlte.min.css">
</head>

<body>
<! -- Omit content -->
<! -- jQuery -->
<script src=".. /.. /plugins/jquery/jquery.min.js"></script>
<! -- Bootstrap 4 -->
<script src=".. /.. /plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<! -- AdminLTE App -->
<script src=".. /.. /dist/js/adminlte.min.js"></script>
</body>
Copy the code

We can see that SRC is an absolute path. Because of the absolute path, we didn’t import these things, so our webpage is showing the problem.

The solution is simple, we just need to import the above missing content.

For the sake of documentation, we’ll use the first Font Awesome as an example. Other file import processes are basically the same.

The path to Font Awesome is “.. /.. / plugins/fontawesome – free/CSS/all. Min. CSS”

So, let’s look at this file in the directory corresponding to the downloaded folder:

So we will copy and paste this folder directly into our project, create adminLTE path in dict directory, and check these actual files into this directory:

Once everything is copied and pasted down, we can modify the previous path by “.. /.. / plugins/fontawesome – free/CSS/all. Min. CSS “to read”.. / dist/adminlte/plugins/fontawesome – free/CSS/all. Min. CSS “, in this way, we’ll all be modified before such as the following:

<head>
<! -- Font Awesome -->
  <link rel="stylesheet" href=".. /dist/adminlte/plugins/fontawesome-free/css/all.min.css">
  <! -- icheck bootstrap -->
  <link rel="stylesheet" href=".. /dist/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <! -- Theme style -->
  <link rel="stylesheet" href=".. /dist/adminlte/dist/css/adminlte.min.css">
</head>

<body>
<! -- Omit content -->
<! -- jQuery -->
<script src=".. /dist/adminlte/plugins/jquery/jquery.min.js"></script>
<! -- Bootstrap 4 -->
<script src=".. /dist/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<! -- AdminLTE App -->
<script src=".. /dist/adminlte/dist/js/adminlte.min.js"></script>
</body>
Copy the code

After that, we were surprised to see our page look something like this:

We can see that the page looks exactly like the Demo. Well, the migration of the login page was successful.

Next, we will make some modifications based on the characteristics of our project. After modification, the login page will look like this:

Technical summary

So just to conclude,

The Login steps for integrating AdminLTE:

  1. Download the source code and open Demo
  2. Find the page, right click to view the page source
  3. In the source code, according to the HTML structure of the Demo page copy paste
  4. Modify the resource reference path and fix the missing file reference
  5. The completion of

The only way to get the code: follow “PI Ye Lu code” and reply “code” to get it.

Long press the two-dimensional code below to pay attention to, if the article is inspiring to you, welcome to look at and forward.