Question

我正在学习项目模板（我正在使用带有HTML和CSS的Django框架创建Web应用程序）。但是，我遇到了障碍。我确实尝试将CSS文件链接到基本HTML文件（这是我的其他模板所继承的父模板），并且我的CSS更新没有反映在浏览器的首页上。

链接是否有问题？缩进没关系，我的代码没有错误。我也尝试过重新运行服务器，但一无所获。 “ main.css”文件位于Blog目录内的静态子目录中，而我的应用程序称为“ Brenda的Blog”。

下面是我的base.html文件中的代码，包括链接main.css文件的链接。

我的CSS文件：blog / static / main.css

{% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html> {% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html>
<html>

<head>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}"> 
  {% if title %}<!-- django for loop for when the user clicks on to different pages -->
  <title>Brenda's Blog - {{ title }}</title>
  {% else %}
  <title>Brenda's Blog</title>
  {% endif %}
</head>

<body>
  <!-- added navigation bar with bootstrap css classes to decorate the website -->
  <header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
      <div class="container">
        <a class="navbar-brand mr-4" href="/">Brenda's Blog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
          <div class="navbar-nav mr-auto">
            <a class="nav-item nav-link" href="/">Home</a>
            <a class="nav-item nav-link" href="/about">About</a>
          </div>
          <!-- Navbar Right Side -->
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#">Login</a>
            <a class="nav-item nav-link" href="#">Register</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <main role="main" class="container">
    <div class="row">
      <div class="col-md-8">
        {% block content %}{% endblock %}
      </div>
      <div class="col-md-4">
        <div class="content-section">
          <h3>Our Sidebar</h3>
          <p class='text-muted'>You can put any information here    you'd like >
            <ul class="list-group">
              <li class="list-group-item list-group-item-light">Latest Posts</li>
              <li class="list-group-item list-group-item-light">Announcements</li>
              <li class="list-group-item list-group-item-light">Calendars</li>
              <li class="list-group-item list-group-item-light">etc</li>
            </ul>
          </p>
        </div>
      </div>
    </div>
  </main>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

</html>

Answer 1

欢迎使用Stackoverflow。

确保您的settings.py文件具有以下配置。

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

然后运行

python manage.py collectstatic

此命令会将所有django应用程序中的静态文件收集到一个名为staticfiles的目录中，这将在您部署项目时使您受益。

然后在模板的开头加载静态文件。

{％load staticfiles％}

别忘了清除浏览器的缓存，刷新时按ctrl + F5忽略缓存的内容。

Answer 2

首先，清除缓存并强制刷新浏览器。如果不起作用，请执行以下步骤。

检查settings.py文件是否有正确的配置以访问静态文件。代码应该在settings.py文件中看起来像这样。

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

然后您的项目结构应类似于 app> static>应用程序名称（文件夹名称与应用程序名称相同）> main.css

因此，如果您的应用程序名称为blog。那么结构应该像 blog> static> blog> main.css

完成更改后，请刷新浏览器，清除缓存，转到“网络”选项卡（单击“检查”元素），并检查是否根据请求获取CSS文件，并且所有更改都已反映出来。

Answer 3

你应该更换

{% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html> {% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html>

与

{% load static %}
<!DOCTYPE html>

带有CSS文件的Django模板不起作用

3 个答案: