Skip to main content
 首页 » 编程设计

python之如何在 Django 中扩展到 'base.html' 模板样式

2025年04月02日47TianFang

我在应用程序中使用模板。我在 base.html 中设置了网站的主要部分样式,这些文件始终相同(页眉、菜单、页脚...)在“base.html”中正确编码,并且还带有链接到它的样式(在链接 rel="stylesheet") 中。

当我尝试按原样使用基本模板时,一个基本模板,它运行良好,同时它允许我在 de {% block content %} 之间添加内容,还显示“永久”部分(菜单、标题等) , 但上面没有样式 (CSS)。我怎样才能扩展到这些样式表以加载 CSS 样式??

不胜感激,谢谢。

编辑 2:这是我的 base.html 头部内容:

    <head> 
<meta charset="utf-8"> 
{% load staticfiles %} 
<title>{% block title %}Index{% endblock %}</title> 
{% block style_base %} 
<link href="{% static 'css/styles.css' %}" rel="stylesheet"> 
{% endblock %} 
<meta name="description" content="{% block description %}{% endblock %}"> 
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,300' rel='stylesheet' type='text/css'> 
<script src="static/myapp/jquery.min.js" type="text/javascript"></script> 
<script src="static/myapp/main.js" type="text/javascript"></script> 
</head> 

这适用于 base.html,它获得了正确的样式。但是,当尝试在另一个模板的公共(public)部分中获取相同的样式时,它不会获取样式。模板代码是这样开始的:

{% extends "base.html" %} 
{% load staticfiles %} 
{% load i18n %} 
{% include "base.html" %} 
{% block title %}{% trans "Main index" %}{% endblock %} 
{% block content1 %} 

它从 base.html 获取所有正确的 HTML,但未设置样式。我也尝试删除“include”标签或更改其位置,但没有结果。有什么问题?谢谢。

另外,控制台告诉我:

Not Found: /list/static/myapp/styles.css 
[25/Mar/2016 01:03:03] "GET /list/static/myapp/styles.css HTTP/1.1" 404 3414 

当我刷新页面时(列表是我想从基础获取样式的模板所在的页面),它一直告诉我这个。 List 不是我项目中的目录,但/static/myapp/styles.css 路径是正确的。会发生什么?

请您参考如下方法:

您必须调用 base.html 中的 CSS 文件,因此当您在其他页面中扩展 base.hml 时,将调用 CSS。

对我来说,我通常这样做:

我有 Head.html 我调用我在网站中使用的所有 Javascript 和 CSS 文件,如下所示:

对于 CSS:

<link rel="stylesheet" type="text/css" href="/static/styles/example.css"/> 

对于 javascript:

<script type="text/javascript" src="/static/js/example.js"></script> 

然后,在网站的每个页面中,在 title 标签之后我包含这个 Head.html,如下所示:

{% include "Head.html" %} 

当您在每个页面中执行此操作时,CSS 和 javascripts 文件将在所有页面中可见并可调用。

此外,主 urls.py 文件应该是这样的:“答案来自 here”

urlpatterns = [ # ... the rest of your URLconf goes here ... 
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)