Django静态文件（CSS，JS等）
Django静态文件
静态文件是指js，css，图片等文件。render可以返回模板文件（HTML），但是缺少了js，css。在Django中我们一般会指定一个目录存放静态文件，这样方便管理。在现在前后端分离的大环境之下，静态文件我们几乎也用不到。另外在HTML中调用的时候也需要指定静态文件的路径。一般都会将静态文件放置在项目的根目录下。要使用静态文件，需要配置两个参数。
- STATIC_URL
- STATICFILES_DIRS
模板文件
在模板文件（HTML）中指定静态文件的位置即可。如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>高性能滑动的登录注册页面静态模板 - </title>
<link rel="stylesheet" href="../static/css/dmaku.css"> <!--正确的css文件路径-->
</head>
<!--/************************************************************
* *
* *
* *
* 努力创建完善、持续更新插件以及模板 *
* *
**************************************************************-->
<body>
<div class="dowebok" id="dowebok">
<div class="form-container sign-up-container">
<form action="#">
<h1>注册</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>或使用邮箱注册</span>
<input type="text" placeholder="姓名">
<input type="email" placeholder="电子邮箱">
<input type="password" placeholder="密码">
<button>注册</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>登录</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>或使用您的帐号</span>
<input type="email" placeholder="电子邮箱">
<input type="password" placeholder="密码">
<a href="#">忘记密码？</a>
<button>登录</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>已有帐号？</h1>
<p>请使用您的帐号进行登录</p>
<button class="ghost" id="signIn">登录</button>
</div>
<div class="overlay-panel overlay-right">
<h1>没有帐号？</h1>
<p>立即注册加入我们，和我们一起开始旅程吧</p>
<button class="ghost" id="signUp">注册</button>
</div>
</div>
</div>
</div>
<script src="../static/js/dmaku.js"></script> <!--正确的js文件路径-->
</body>
</html>在settings.py文件中配置静态文件路径
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]在项目根目录下创建static文件夹
在创建好的文件夹中导入css文件和js文件即可。
(venv) ~/mypython/bookmanager/static$ tree
.
├── css
│ └── dmaku.css
└── js
└── dmaku.js完成上述步骤之后，刷新页面，即可看到如下的效果。
在这里插入图片描述
前端文件在这里。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-10-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录