Конвертировать HTML-шаблон в Django - PullRequest
Новая
       13

Конвертировать HTML-шаблон в Django

0 голосов
/ 12 июля 2019

В настоящее время я изучаю django, и сейчас я хочу преобразовать эту страницу https://colorlib.com/etc/lf/Login_v6/index.html в django. Я перепробовал кучу раз, до сих пор не могу все исправить. Текстуры кнопок, анимация надписей и шрифты полностью не работают. Позвольте мне показать вам мою структуру работы ниже.

Моя проблема связана с использованием css и js в статическом / вендорном фолде. Кажется, у меня возникла небольшая проблема, я также приложил свой код для вызова css и js вендора.

Спасибо за любую помощь.

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 p-t-85 p-b-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 p-b-0">
						QC Tool
					</span>
					
					<form action="/msggate/" method="post">
						<div class="wrap-input100 validate-input m-t-85 m-b-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 m-b-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 p-t-190">
						<li class="m-b-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>

1 Ответ

0 голосов
/ 12 июля 2019

Вы определили статический STATIC_URL в вашем setting.py?Если нет, то сделайте это в setting.py 

STATIC_URL = '/static/'

и сохраните статический файл в папке с именем static в каталоге вашего приложения, т.е. project / project_app / static

В вашем шаблоне myHtml.html используйте тег статического шаблона для создания URL-адреса следующим образом: 

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

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

Делайте это в каждой ссылке и скрипте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...