简体   繁体   English

如何在 Django 模板中使用引导程序/静态文件

[英]How to use Bootstrap/static files in Django templates

Okay so I know there are a lot of SO questions on this and I have combed through all of them trying to find an answer but nothing was exactly what I was looking for.好的,所以我知道有很多关于此的 SO 问题,我已经梳理了所有这些问题,试图找到答案,但没有什么是我想要的。

My issue is that whenever I try to load the static files into a Django template it just won't work.我的问题是,每当我尝试将 static 文件加载到 Django 模板中时,它都无法正常工作。 Here is my file structure:这是我的文件结构:

MainProjectDir
|
+-- DjangoProject
|  |
|  +-- MainDjangoSub
|  |  |
|  |  +-- __init__.py
|  |  +-- settings.py (all the other usual folders below)
|  |
|  +-- StaticPages (this is my App directory)
|  |  |
|  |  +-- templates (will contain all templates for StaticPages app)
|  |  |  |
|  |  |  +-- StaticPages (directory containing html templates for the Static Pages App)
|  |  |  |  |
|  |  |  |  +-- main.html
|  |  |  |  +-- navbar.html
|  |  |
|  |  +-- __init__.py
|  |  +-- views.py (all other usual app files below)
|  |
|  +-- static (contains all static files for the project)
|  |  |
|  |  +-- Bootstrap (subdirectory containing the Bootstrap static files)
|  |  |  |
|  |  |  +-- css (directory containing all css files from Bootstrap precompiled files)
|  |  |  +-- js (directory containing all js files from Bootstrap precompiled files)
|  +-- manage.py

My the settings in my settings file pertaining to static files:我的设置文件中与 static 文件有关的设置:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'StaticPages',
]

STATIC_URL = '/static/'


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

In my views.py file under the StaticPages app I have this view to render my templates:在我的静态页面应用程序下的 views.py 文件中,我有这个视图来呈现我的模板:

def home(request):
    return render(request, 'StaticPages/main.html')

So here we get to my issue.所以这里我们来解决我的问题。 In the main.html file I use {% load static %} to load the static files and then inside any calls to css or js files I do something similar but pycharm highlights the text and says "cannot resolve directory..." Here is a sample of my html file: In the main.html file I use {% load static %} to load the static files and then inside any calls to css or js files I do something similar but pycharm highlights the text and says "cannot resolve directory..." Here is我的 html 文件示例:

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

{% load static %}

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href='{% static "/Bootstrap/css/bootstrap.min.css" %}'
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>
        .navbar-custom{
            background-color: #e86813;
        }
    </style>

    <h3>Hello World</h3>

</head>
<body>
    {% include 'StaticPages/navbar.html' %}
</body>
</html>

Turns out pycharm is messing up.原来 pycharm 搞砸了。 I uploaded a free Bootstrap template and utilized the same method: {% static load %} in my html files.我上传了一个免费的 Bootstrap 模板,并在我的 html 文件中使用了相同的方法: {% static load %}

and again pycharm highlighted any html that had href="{%static...directory... %}" and gave the error but when I started the server the template and all of its css appeared as normal so pycharm is just acting weird in this case. and again pycharm highlighted any html that had href="{%static...directory... %}" and gave the error but when I started the server the template and all of its css appeared as normal so pycharm is just acting weird在这种情况下。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM