Question

我目前正在学习django，目前我想将此页面https://colorlib.com/etc/lf/Login_v6/index.html转换为django。我已经尝试了很多次，但仍然无法解决所有问题。 Button纹理，标签动画和字体完全不起作用。让我在下面告诉我我的工作结构。

我的问题是关于在静态/厂商折叠下使用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>

Answer 1

您是否在settings.py中定义了静态STATIC_URL？如果没有，那么在 setting.py

STATIC_URL = '/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>

在每个链接和脚本中执行此操作。

将HTML模板转换为Django

1 个答案: