Javascript 是否有必要将css、js和图像放在django的静态文件夹中_Javascript_Css_Django_Linux_Python 3.x

Javascript 是否有必要将css、js和图像放在django的静态文件夹中

javascript css django linux python-3.x

Javascript 是否有必要将css、js和图像放在django的静态文件夹中,javascript,css,django,linux,python-3.x,Javascript,Css,Django,Linux,Python 3.x,我是Django和Python编程新手。我很困惑，为什么有必要将css、javascript和图像放在django的静态目录中我们可以像其他html文件一样将这些文件放在模板中，并在html代码中直接链接它们吗例如： <html> <head> <script src="myscript.js"></script> <link rel="stylesheet" href="style.css"> </head> <

我是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中的模板。

因为您使用的是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>

您还需要在

之前的顶部添加{%loadstaticfromstaticfiles%}
。如果希望CSS/JS/图像显示在从基本HTML（子模板）扩展的任何HTML上，请确保添加
{%extends'yourbasepage.html%}
{%loadstaticfromstaticfiles%}

在任何子HTML页面中
对于图像，只有当您不是从模型获取图像并使用For循环将其呈现到HTML模板中时，此代码才适用
 当执行不同规模的项目时，我们总是会有css、javascript、图像等，建议将这些元素分别放在各自的文件夹中
django建议在此文件夹中使用一个文件夹：static，其他文件夹包括：

js
css
图像。。等等

您的页面（html）位于模板文件夹中，现在可以使用静态文件夹和您可能需要设置的所有内容：
设置.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/static/',
]

为使用静态的say to django添加此代码
base.html是一个建议，例如，如果我更喜欢使用bootstrap或materialize，或者其他框架css更喜欢在此基础上实现（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%}
你好，世界！
{%block body%}
{%endblock%}

我使用{%load staticfiles%}加载静态内容，url使用“{%static”url/to/file/css/或/js/或/image%}”
在本例中，我使用引导，我将在login.html上实现此页面位于模板文件夹中
登录时的代码。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%}

{%load staticfiles%}
{%include“base.html”%}
{%block body%}
..您的登录代码…或者您是否需要。。！！
{%endblock%}

我使用{%include“base.html”%}
祝你好运
对于write，我的代码位于标记块和端块
之间，为什么要将它们放在templates目录中？它们不是模板。从那里可以为他们提供什么服务？