.css 和其他 .html 文件的 Django webframework 相对路径

Question

这是我的项目目录的简要样子（不是完整的图片）。我在 link 将多个组件组合在一起时遇到问题 (.css、.html)。

├── bootstrap-3.3.5-dist
└── mysite
    ├── db.sqlite3
    ├── myApp
    │   ├── admin.py
    │   ├── forms.py
    │   ├── __init__.py
    │   ├── templates
    │   │   └── myApp
    │   │       ├── base.html
    │   │       ├── base_menu.html
    │   │       ├── main.css
    │   ├── tests.py
    │   ├── urls.py
    │   └── views.py

在上面的树中，base.html 是我的主要站点。我想在 base.html 的 <head> 中包含 main.css，但路径不正确。

<link rel="stylesheet" href="main.css">

我试过myApp/main.css,templates/myApp/main.css,等等...不仅我link我.css不行,我还想用模板继承对于 base_menu.html，同样的问题 - 相对路径不正确。

这是我目前的主要障碍，请帮助。谢谢。

Answer 1

静态资源

我们通常不使用 Django 路由到所谓的 "static" 资源。这背后的原因是让你的服务器启动一个调用 Django 的 Python 应用程序是一种浪费，这样你就可以找到并流回一个 "static" 或不变的文件。 Django 用于呈现动态响应（例如 HTML 中带有模板标签，您将在其中注入一些内容）。

无论如何，考虑到这一点，一个典型的 Django 项目通常是这样组织的（我删除了 myApp/templates 中的子目录以简化事情）：

├── bootstrap-3.3.5-dist
└── mysite
    ├── db.sqlite3
    ├── myApp
    │   ├── admin.py
    │   ├── forms.py
    │   ├── __init__.py
    │   ├── static
    │   │   └── myApp
    │   │       ├── main.css
    │   │       ├── some.js
    │   ├── templates
    │   │    ├── base.html
    │   │    ├── base_menu.html
    │   ├── urls.py
    │   └── views.py

然后，在您的 setings.py 中设置两个重要变量：

# This is the url that static routes will reverse to
STATIC_URL = '/static/'
# This is the place where static files actually live
STATIC_ROOT = '/location/for/storing/static/files'

之后，您可以运行以下命令：

 $ python manage.py collectstatic

并且 Django 将收集所有静态文件（在应用程序内的静态目录中），并将它们全部转储到上述指定位置的目录中。

最后，这将允许您像这样在模板中反转静态 urls：

{% load staticfiles %}
<link rel="stylesheet" href="{% static "myApp/main.css" %}">

当您在本地提供内容时，这可能会有点混乱，因为（与我上面所说的相反）您需要定义一个 url 路由（如果您使用的是 django 的 runserver 命令） , 这样 Django 就知道如何提供通向这些静态文件的路由。

见how to serve staticfiles in development and another Whosebug answer

模板继承

至于模板继承，也许缺少的是这一点：模板标签之间的内容由 Django 呈现，然后将整个响应发回。

这是一个快速演示：

模板文件：myApp/templates/about.html

{% extends 'index.html' %}

{% block maincontainer %}
<div class="container">
  <p>
    Some content.
  </p>
</div>
{% endblock maincontainer %}

模板文件：myApp/templates/index.html

<html>
  <head>
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static "myApp/main.css" %}">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <link 
  </head>
  <body>
    {% include "base_menu.html" %}
    {% block maincontainer %}
    {% endblock maincontainer %}
  </body>
</html>

以下是您的 Django 视图将使用这些模板执行的操作：

你告诉它渲染 about.html。它将解析和评估模板标记指示符 {% 和 %} 之间的所有内容。
它发现您希望此模板 extend 另一个模板 index.html，因此它神奇地找到了该模板并在其上执行第 1 步。
index.html 包含行 include base_menu.html，因此 Django 神奇地找到了该模板，执行第 1 步并将其所有内容插入 include 语句所在的位置。
Django 找到模板标签 static blabla，因此它对那里引用的静态文件执行 urlreverse（意思是，它创建了一个完整的 url 引用静态文件）。
最后，在完成 index.html 和任何其他包含的模板后，回到 about.html，它会看到您想要覆盖 [=26= 中定义的内容块] 因此它将 index.html 中定义的块替换为 about.html 中定义的覆盖块。

之后，它就完成了，它将完成的模板（现在只是一个大字符串）发送回任何请求它的地方。这可能包括类似以下标记的内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>

您的浏览器负责确定如何处理这一行。这就是您第一次尝试包含 css 失败的原因：浏览器试图在磁盘上找到该文件，但不知道它在哪里。

.css 和其他 .html 文件的 Django webframework 相对路径

Django webframework relative path to .css and other .html files

html

css

django

twitter-bootstrap

web-frameworks