如何在html文件中加载css文件已经在django中扩展了另一个html文件（base.html）
Posted
技术标签:
【中文标题】如何在html文件中加载css文件已经在django中扩展了另一个html文件（base.html）【英文标题】：how to load css file in html file already extends another html file (base.html) in django 【发布时间】：2020-02-04 12:45:55 【问题描述】：我是 django 的新手，所以我在处理 django 模板方面遇到了困难，将 css 文件添加到 django 模板中。我的代码如下：
base.html
% load static %
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="% static 'portfolio/main.css' %"> % if title%
<title>Django Portfolio - title</title>
% else %
<title>Django Portfolio</title>
% endif %
</head>
<body>
<div class="topnav">
<a class="active" href="% url 'portfolio-home' %">Home</a>
<a href="% url 'portfolio-page' %">Portfolio</a>
<a href="% url 'portfolio-about' %">About</a>
<a href="#blog">Blog</a>
<a href="#account">Account</a>
</div>
<div class="container">
% block content % % endblock content %
</div>
</body>
</html>
这是我的 base.html 文件，我的所有其他 html 文件都继承了它。它工作得很好。注意：-我在 django 应用程序中创建静态文件并放置两个静态文件； main.css 和 home.css 现在。 但我想设计主页，我使用名为 home.html 的文件完成此操作，并在静态文件中使用 home.css。我的代码如下：
home.html
% extends 'portfolio/base.html' %
% load static %
% block content %
<link rel="stylesheet" type="text/css" href=" % static 'portfolio/home.css' %" />
<h1>My homepage</h1>
% endblock content %
问题是，<link rel="stylesheet" type="text/css" href=" % static 'portfolio/home.css' %" /> 行不起作用。我需要帮助。
【问题讨论】：
首先考虑看看何时出现此类问题是在您的浏览器开发工具中。什么是源 HTML？是否显示任何错误（例如 404 错误）？其次，正式的<link> 带有 rel 属性“样式表”是 body-ok，所以它可能出现在正文中，但我不能 100% 确定这会被所有浏览器接受，因为它是非常罕见的做法。您正在使用哪种浏览器进行测试？
您的 CSS 文件被包含在正文本身中，这将不起作用。在您的基本模板中创建一个% block extra_css % % endblock %，并将您的代码粘贴到 home.html 模板文件中的相同块% block extra_css % <link rel="stylesheet" type="text/css" href=" % static 'portfolio/home.css' %" /> % endblock %
@JaskaranSingh 根据this，将rel 设置为"stylesheet" 的链接元素是body-ok。您指的是 HTML4 规范，但我们生活在 HTML5 时代。我已经在 Safari 和 Chrome 中测试了 工作中 css 的 标签。同样，我不确定它是否适用于所有浏览器，我同意最好将其放在 中，但我不确定这是 OP 问题的原因。
【参考方案1】：
<link rel="stylesheet" type="text/css" href="% static 'portfolio/home.css' %">
这应该有效，它在语法上是正确的。您确定您的 .css 文件位于如下文件夹结构中：“/APPNAME/static/Portfolio/home.css”。
正如其他人所提到的，您没有将 CSS 包含在 HTML 文档的头部，而是将其放入正文中，在 % block content % 内。
你需要把它包装在一个 % BLOCK CSS % %ENDBLOCK %
% extends 'portfolio/base.html' %
% load static %
% block css %
<link rel="stylesheet" type="text/css" href="% static 'portfolio/home.css' %">
% endblock %
% block content %
etc...
【讨论】：
目前，这并没有提供问题的答案。询问更多信息时请使用 cmets。 我已按照建议将链接部分包装在块中，似乎我的 html 标签的样式没有变化。这意味着css文件还没有被渲染。 我这样说：- ` % extends 'portfolio/base.html' % % load static % % block css % % endblock css % % block content %我的主页
% endblock content %` CSS 样式可能被 base.html 中的 CSS 覆盖？这可能是正在发生的事情吗？【参考方案2】：它对我有用：
% extends 'menu.html' %
% load static %
<body>
% block content %
% block css %
<link rel="stylesheet" type="text/css" href="% static 'moduleone.css' %">
% endblock %
<div class="jumbotron">Test</div>
% endblock %
</body>
</html>
【讨论】：
以上是关于如何在html文件中加载css文件已经在django中扩展了另一个html文件（base.html）的主要内容，如果未能解决你的问题，请参考以下文章