-
让很多app都共享的静态文件, 创建一个static目录专门放静态文件:
image.png -
把jquery.min.js复制到static目录下再创建 commons.css 文件(目录如下):
image.png
image.png
- commons.css代码如下:
body{
background: gray;
}
-
然后想把它引用到login.html方法:
image.png
- 修改settings.py 文件在最后一行修改添加以下代码:
STATIC_URL = '/static/'
# os.path.join(BASE_DIR, 'static'), 的逗号很重要,不加会报错
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
image.png
-
修改login.html:
image.png
image.png login.html 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/commons.css">
<style>
label{
width:80px;
text-align: right;
display:inline-block;
}
</style>
</head>
<body>
<!--/* action="/login/" 指向urls.py 的login,以post方式提交表单 */-->
<from action="/login" method="post">
<p>
<label for="username">用户名: </label>
<input id="username" type="text" />
</p>
<p>
<label for="password">密码: </label>
<input id="password" type="text" />
<input type="submit" value="提交" />
</p>
</from>
<script src="/static/jquery.min.js"></script>
</body>
</html>
-
运行django文件效果图:
image.png
-
知识点:
1、配置模板的路径
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
2、配置静态目录
static
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
<link rel="stylesheet" href="/static/commons.css" />
