django的静态文件夹中是不是有必要将css、js和图片放入
Posted
技术标签:
【中文标题】django的静态文件夹中是不是有必要将css、js和图片放入【英文标题】：Is it necessary to put css, js and images in static folder in djangodjango的静态文件夹中是否有必要将css、js和图片放入 【发布时间】：2018-12-25 15:02:49 【问题描述】：我是 Django 和 Python 编程的新手。我很困惑，为什么要把css、javascript和图像放在django的静态目录中。
我们可以把这些文件和其他html文件一样放在模板中，直接在html代码中链接
例如：
<html>
<head>
<script src="myscript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="mypic.jpg">
</body>
</html>
index.html、myscript.js、style.css 和 mypic.jpg 都位于同一目录中，即 Django 中的模板。
【问题讨论】：
为什么要将它们放在模板目录中？它们不是模板。从那里为他们提供什么服务？ 【参考方案1】：在进行不同规模的项目时，我们总会有css、javascript、images等，建议将这些元素分别放在各自的文件夹中。
django 建议使用一个文件夹：static 其中存在其他文件夹，例如：
js CSS 图片..等等..您的页面（html）位于 templates 文件夹，现在可以使用静态文件夹和您可能需要设置的所有内容：
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
将此代码添加到使用静态的 django...
base.html 是一个建议，例如，如果我更喜欢使用 bootstrap 或 materialize 或其他框架 css 更喜欢在 this(base.html) 上实现，对于期货更改只有你更改一个文件...
示例 base.html
% load staticfiles %
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="% static 'css/bootstrap.min.css' %">
<title>Hello, world!</title>
</head>
<body>
% block body%
% endblock %
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="% static 'jquery/jquery-3.3.1.slim.min.js' %"></script>
<script src="% static 'popper/popper.min.js' %"></script>
<script src="% static 'js/bootstrap.min.js' %"></script>
</body>
</html>
我使用 % load staticfiles % 来加载静态内容，url 使用 "% static 'url/to/file/css/or/js/or/image ' %"
在这种情况下，我使用引导程序，我将在 login.html 上实现此页面位于模板文件夹中。
login.html 上的代码：
% load staticfiles %
% include "base.html" %
% block body %
<!--HERE IS MY CODE FOR CREATE A LOGIN -->
<form>.....your code for login...or do you need..!!</form>
% endblock%
我用 % include "base.html" % 包含 base.html 祝你好运.. this is a tutorial Django 并且为了写我的代码在标签 block 和 endblock
之间【讨论】：
【参考方案2】：由于您使用的是 Python/Django 后端，因此您必须单独链接静态的“前端”文件。这在连接到数据库（例如 AWS/S3）和部署应用程序时的“collectstatic”时变得特别有用。如果您没有***静态文件夹，并且您尝试在终端中运行python3 manage.py collectstatic，它将无法正确运行，并且您所做的任何样式都不会正确部署。
在静态文件夹中，还应该有一个单独的“css”、“js”和“images”文件夹。对于 JavaScript 文件，它实际上取决于您使用它的目的，以及您是否计划需要在扩展为您的基本 HTML（子模板）的 HTML 页面上呈现它的部分内容。
您需要以下内容：
<html>
<head>
<script src="% static 'js/myscript.js' %"></script>
<link rel="stylesheet" href="% static 'css/style.css' %">
</head>
<body>
<img src="% static 'images/mypic.jpg' %">
</body>
</html>
您还需要在基本 HTML 页面上的 !<DOCTYPE html> 之前的顶部添加 % load static from staticfiles %。如果您希望您的 CSS/JS/图像显示在您从基本 HTML（子模板）扩展而来的任何 HTML 上，请确保添加
% extends 'yourbasepage.html' %
% load static from staticfiles %
在任何子 HTML 页面中。
对于图像，此代码仅适用于您没有从模型中获取它并使用 for 循环将其渲染到 HTML 模板中的情况。
【讨论】：
以上是关于django的静态文件夹中是不是有必要将css、js和图片放入的主要内容，如果未能解决你的问题，请参考以下文章
Django在开发中直接从静态文件夹加载静态（不是来自应用程序）