Question

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

Answer 1

当执行不同规模的项目时，我们总是会有css，javascript，图像等，建议将这些元素中的每一个分隔在各自的文件夹中。

django建议使用一个文件夹：静态，其中存在其他文件夹，例如：

js
css
图像..等。

并且您的页面（html）位于 templates文件夹上，现在可以使用静态文件夹以及您可能需要在其上设置的所有内容：

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/static/',
]

将此代码添加到使用静态...的django的发言中

base.html 是一个建议，例如，如果我更喜欢在此（base.html）上使用bootstrap或materialize或其他框架css更喜欢实现，则期货更改仅在您更改一个文件...

示例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％} 加载静态内容，网址使用“ {％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%}

我将base.html包含在 {％包括“ base.html”％} 祝好运.. this is a tutorial Django 为了编写代码，我的代码位于标签 block 和 endblock

之间

Answer 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页面上的{% load static from staticfiles %}之前的顶部添加!<DOCTYPE html>。如果您希望CSS / JS /图像显示在从基本HTML扩展的任何HTML（子模板）上，请确保添加

{% extends 'yourbasepage.html' %} {% load static from staticfiles %}

在任何子HTML页面中。

对于图像，仅当您没有从模型中获取它并使用for循环将其呈现到HTML模板中时，此代码才适用。

是否有必要将CSS，JS和图像放在Django的静态文件夹中

2 个答案: