Django静态文件（CSS，JS等）

2021-10-09 11:53:02 浏览数 (1)

Django静态文件

静态文件是指js，css，图片等文件。render可以返回模板文件（HTML），但是缺少了js，css。在Django中我们一般会指定一个目录存放静态文件，这样方便管理。在现在前后端分离的大环境之下，静态文件我们几乎也用不到。另外在HTML中调用的时候也需要指定静态文件的路径。一般都会将静态文件放置在项目的根目录下。要使用静态文件，需要配置两个参数。

  1. STATIC_URL
  2. STATICFILES_DIRS

模板文件

在模板文件（HTML）中指定静态文件的位置即可。如下所示：

代码语言：javascript复制
<!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文件中配置静态文件路径

代码语言：javascript复制
STATIC_URL = '/static/'     

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

在项目根目录下创建static文件夹

在创建好的文件夹中导入css文件和js文件即可。

代码语言：javascript复制
(venv) ~/mypython/bookmanager/static$ tree 
.
├── css
│   └── dmaku.css
└── js
    └── dmaku.js

完成上述步骤之后，刷新页面，即可看到如下的效果。

前端文件在这里。

css html django c++

0 人点赞