如何将样式添加到 base.html：Django 框架？答案

【问题标题】：How to add style to base.html: Django framework?如何将样式添加到 base.html：Django 框架？
【发布时间】：2021-07-24 17:32:50
【问题描述】：

文件结构：应用程序/模板/base.html app/static/css/base.css

我创建了 base.html 以包含标题，我将其导入到其他 HTML 页面以在整个网站中保持相同。我也想设置这个标题的样式，所以我试图将 base.css 链接到我的 base.html，但没有运气。我尝试过的事情是：添加内联 css、添加外部 css、添加内部 css、清除缓存、添加块。

base.html 中的代码：

    {%load static%}<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
   
    </head>
    <body>
    
    <nav>
    
        <button id="myButton" >Home</button>

        <button id="aboutButton" >About</button>

        <button id="contactButton" >Contact</button>
      
</nav>
{% block content %}
{% endblock content %}
<footer>
    <p>this is footer</p>
</footer>

<script type="text/javascript">
    document.getElementById("myButton").onclick = function () {
        location.href = "{% url 'home' %}";
    };
    document.getElementById("aboutButton").onclick = function () {
        location.href = "{% url 'about' %}";
    };
    document.getElementById("contactButton").onclick = function () {
        location.href = "{% url 'contact' %}";
    };
</script>
</body>
</html>

这是我的 base.html 代码，我想将其与 base.css 链接：

 .header {
    padding: 60px;
    text-align: center;
    background: #1abc9c;
    color: white;
    
  }
  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

我如何将base.html扩展到其他页面如下，

home.html 扩展了 base.html 与其他导航栏相同的导航栏：

{% extends 'base.html' %}
{% load static %}
{% block content %}
<html>
    <head>
        
        <title>Smooth</title>
        
         <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> 
    <!--sample how my other html pages look like-->

我希望我已经很好地了解了我的文件系统是怎样的，代码在我的项目中是怎样的。现在如何将 base.css 与 base.html 链接起来，以便我可以使用外部 css 文件设置标题中的按钮样式。

【问题讨论】：

标签： html css python-3.x django django-templates

【解决方案1】：

这取决于您的设置，例如这就是我的静态文件设置的样子：

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

而我的 base.css 位于：

/project_name/static/base.css

所以你应该检查你的静态文件设置。

您也可以尝试将链接标签更改为

<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">

因为如果你的设置被配置为 /app/static/ 当你像链接静态一样

<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">

它正在寻找 /app/static/static/css/base.css 而不是 /app/static/css/base.css

【讨论】：