css - DJango 获取静态引导样式表以应用于视图
问题描述
我对此摸不着头脑,因为这没有任何意义。
我正在开发模式下运行一个 Django 项目。
我有一个包含在我的许多页面中的 base.html。
这是我的文件结构:
这是简单的 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
解决方案
您需要对代码进行一些更改。
请考虑更改您的 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" />
希望对你有用!
推荐阅读
- android - 在 Android 10 上获取应用程序崩溃的堆栈跟踪
- vue.js - 如何在设置功能之外使用 vue-meta-3 useAPI?
- azure - “创建管道时出错。” 在 Azure 管道自托管代理中运行 powershell 脚本时
- c - C - 发生“错误:无法访问地址处的内存”
- amazon-web-services - 为使用 for_each 创建的死信队列添加 SQS 重新驱动策略时如何修复错误消息
- python - Django QueryDict 如何确保“加号”不会在 QueryDict 中消失?
- python - 如何用python有效地替换word文档中的句子
- javascript - 在 ubuntu 20.04 中部署 nodejs 应用程序时出现“ERR_SSL_VERSION_OR_CIPHER_MISMATCH”错误
- python - 您可以从 Python 脚本中删除 BigQuery 中的行吗?
- python - 找到给定值的节点的最短路径 - 二叉树