首页 > 解决方案 > DJango 获取静态引导样式表以应用于视图

问题描述

我对此摸不着头脑,因为这没有任何意义。

我正在开发模式下运行一个 Django 项目。

我有一个包含在我的许多页面中的 base.html。

这是我的文件结构:

django 文件结构

这是简单的 base.html 代码:

<!doctype html>
<html lang="en">

<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


  <title>RAHQ Locations {% block head_title %} {% endblock %}</title>
</head>

<body style="background-color: #26272b; color: #fff">
  {% include 'navbar.html' %}
  <div class='container-fluid'>
    {% block content %}

    {% endblock %}
  </div>
  {% include 'js.html' %}

  <br>
  <br>
  {% include 'footer.html' %}
</body>

</html>

一切都像这样完美。但我想对引导 css 进行更改,所以我下载引导 css 文件,将其重命名为 styles.css,并将其放在我的静态文件夹中。

所以我用我能访问我的静态styles.css的所有东西替换了bootstrap href

我遵循所有在线指南,这些指南告诉我调整我的 settings.py 和 url.py 以允许使用静态文件。

我尝试从 view.py 引入路径:

url = staticfiles_storage.path('styles.css')

我什至尝试将整个路径输入到 href (C:/Try-Django-2.2-master/src/static/styles.css)

我已经尝试了几乎所有你能想到的东西,但我无法加载样式。我究竟做错了什么!?

如果我将 CSS 文件的实际路径放在浏览器中,我可以看到所有的 CSS ......所以我在这里不知所措:

C:/Try-Django-2.2-master/src/static/styles.css

这是我的settings.py:

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
DEBUG = True
ALLOWED_HOSTS = ['54.245.181.209', '*']
LOGIN_URL = '/login'

INSTALLED_APPS = [ # components
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'locationSearch',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'try_django.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'try_django.wsgi.application'


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

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

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "src/static"),
]

MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'src/media')
MEDIA_URL = 'src/media/'  # django-storages

标签: cssdjangostylesheetdjango-staticfiles

解决方案


您需要对代码进行一些更改。

请考虑更改您的 settings.py,然后更改 CSS 的 href 链接。

开始了...

设置.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'src'),
]

您的 CSS 的链接应该是这样的:

基本模板链接

<link type="text/css" rel="stylesheet" href="{% static 'css/main.css' %}" media="screen,projection" />

希望对你有用!


推荐阅读