CODEWITHSUNDEEP
pythonhtmlcssdjango
Jieke Wei
Jieke Wei

Reputation: 183

Django - load statics

I am trying to load static file into my html files. index.html extends base.html. However, files are not read(at least not shown on the screen, however, the terminal doesn't say Not Found)

In the head of index.html and base.html, I have a tag

{% load static %}

I read .css file by using tag in index.html:

{% static 'base/css/style.css' %}

In setting.py, I have:

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': ['Grace/templates/',
             'HomePage/templates/',
             'Forum/templates/',
             'CustomUser/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',
            'django.template.context_processors.csrf',
            ],
        },
    },
]

my project structure is like this:

|Grace
|--static
|----base
|------css
|--------boostrap.min.css
|--------style.css
|------templates
|--------base.html

|Homepage
|--templates
|----index
|------index.html

Thanks in advance!

Upvotes: 1

Views: 254

Answers (1)

Przemek
Przemek

Reputation: 647

Try to follow this steps:

Let's say that this is your directory:

project_folder
├── app_1
├── app_2
├── static
│   ├── css
│   │     ├── bootstrap.css
│   ├── fonts
│   └── js
├── templates

In your settings.py file you have to specify the path to the folder with static files named static in my example:

STATIC_URL = '/static/'

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

Than in any of your html file you can load boostrap.css file like that:

{% load static %}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>

    <meta charset="UTF-8">
    <title></title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

</head>

<body>

Upvotes: 2

Related Questions