Convert the html template into Django

Question

I am currently learning django, and at the moment I want to convert this page https://colorlib.com/etc/lf/Login_v6/index.html into django. I have tried heaps of times, still can't make everything right. The Button textures, label animations and fonts are completely not working. Let me show you my work structure below.

My problem is about using css and js under static/vendor fold. Seems the way I used got a bit problem, I have also attached my code for invoking the css and js under vendor.

Thanks for any help.

MyFirstDjangoWeb

--project
        --setting.py
        --urls.py
        --wsgi.py
        --_init_.py
    --project_app
        --template
            --myHtml.html
        --migration
            --0001_initial.py
            --_init_.py
        --__init_.py
        --admin.py
        --apps.py
        --models.py
        --test.py
        --urls.py
        --views.py
    --static
        --css
        --images
        --js
        --vendor
    manage.py

 <!DOCTYPE html> <html lang="en"> <head> <title>QC-Tool</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {% load static %} <!--===============================================================================================--> <link rel="icon" type="image/png" href="static/images/favicon.ico"/> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/fonts/iconic/css/material-design-iconic-font.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/vendor/css-hamburgers/hamburgers.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/vendor/animsition/css/animsition.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/vendor/daterangepicker/daterangepicker.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="static/css/util.css"> <link rel="stylesheet" type="text/css" href="static/css/main.css"> <!--===============================================================================================--> </head> <body> <center> <div class="limiter"> <div class="container-login100"> <div class="wrap-login100 pt-85 pb-20"> <form class="login100-form validate-form"> <span class="login100-form-avatar"> <img src="static/images/my_Logo.png" alt="AVATAR"> </span> <span class="login100-form-title pb-0"> QC Tool </span> <form action="/msggate/" method="post"> <div class="wrap-input100 validate-input mt-85 mb-35" data-validate = "Enter username"> <input class="input100" type="text" name="username"> <span class="focus-input100" data-placeholder="Username"></span> </div> <div class="wrap-input100 validate-input mb-50" data-validate="Enter password"> <input class="input100" type="password" name="pass"> <span class="focus-input100" data-placeholder="Password"></span> </div> <div class="container-login100-form-btn"> <form action='actionUrl' method='GET'> <button class="login100-form-btn"> Login </button> </form> </div> </form> <ul class="login-more pt-190"> <li class="mb-8"> <span class="txt1"> Forgot </span> <a href="#" class="txt2"> Username / Password? </a> </li> <li> <span class="txt1"> More options? </span> <a href="#" class="txt2"> Click here </a> </li> </ul> </form> </div> </div> </div> </center> {% load static %} <div id="dropDownSelect1"></div> <!--===============================================================================================--> <script src="static/vendor/jquery/jquery-3.2.1.min.js"></script> <!--===============================================================================================--> <script src="static/vendor/animsition/js/animsition.min.js"></script> <!--===============================================================================================--> <script src="static/vendor/bootstrap/js/popper.js"></script> <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script> <!--===============================================================================================--> <script src="static/vendor/select2/select2.min.js"></script> <!--===============================================================================================--> <script src="static/vendor/daterangepicker/moment.min.js"></script> <script src="static/vendor/daterangepicker/daterangepicker.js"></script> <!--===============================================================================================--> <script src="static/vendor/countdowntime/countdowntime.js"></script> <!--===============================================================================================--> <script src="static/js/main.js"></script> </body> </html>

Answer 1

Have you defined static STATIC_URL in your setting.py? If not then do this in setting.py

STATIC_URL = '/static/'

And store your static file in folder name static inside your app directory ie project/project_app/static

In your template myHtml.html , use the static template tag to build the URL like this:

<link rel="stylesheet" type="text/css" href="{% static '/vendor/bootstrap/css/bootstrap.min.css' %}">

<script src="{% static '/js/main.js' %}"></script>

Do this in every link and script.

Convert the html template into Django

Question

1 answers

solution1
0

Convert the html template into Django

Question

1 answers

solution1 0

solution1
0