[Solved] Django loads static resources and <!DOCTYPE html> marked red solution

1. Create a url link

2. New templates folder

1. Folder location:

Used by developers to store HTML pages.

The location of this folder is established under the app01 folder directory –> create a new templates folder –> and create an html file under the folder.
This file has the same filename as the html file pointed to by the above link.

2. Key points:

First go to the templates in the root directory of the project (this needs to be configured in advance), otherwise it will be invalid.
Such as configuration, as shown in the following figure:
According to the registration order of the app, look for the corresponding html page in the templates directory of each app.

3. Result display

2. New static static folder

1. Folder location:

For developers to store static resources.

The location of this folder is established in the app01 folder directory –> create a new static folder –> and create a total of 4 folders, css, js, img, and plugins under the folder.

2. Load static resources

Here, we take inserting an image or a css resource into the page as an example.
(1) Method 1: Write directly in the HTML file (not recommended)

(2) Method 2: Use Django-specific methods (recommended?)
There is a syntax for calling static files in Django, and we also recommend using Django’s method for calling static files.

① Use the load tag to load the static tag in the template.
This method requires each HTML page to be set when introducing external resources, which is rather troublesome. Here, when I tried it, there was a red mark. It is estimated that it may be because of the community version of pycharm or other reasons.

If you are able to use this method, the syntax example is as follows:

{<!-- -->% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
 <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
    <h1>User list</h1>
    <img src="{% static 'img/food.jpg'%}" alt="food">
</body>
</html>

② Add the STATICFILES_DIRS global setting in settings.py.
If you are like me and the previous method doesn’t work, try this one.

First, you need to make sure that the two configurations are set in settings.py (actually automatically generated by the system):

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles', # Is it set?
    'app01.apps.App01Config'
]
STATIC_URL = '/static/' # Is it set?

Second, find TEMPLATES in settings.py and add the following configuration:

TEMPLATES = [
    {<!-- -->
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # add path manually
        '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',
            ],
            'builtins': ['django.templatetags.static'], # Manually add paths
        },
    },
]

Finally, add the relevant configuration of STATICFILES_DIRS in settings.py as follows:

STATICFILES_DIRS = [ # Manually add paths
    os.path.join(BASE_DIR, 'static'),
]

Now, you can try loading the image on the page. Use the syntax "{% static 'fileName/resouceName.jpg'%}" directly at the desired location. Examples are as follows:

<body>
    <h1>User list</h1>
    <img src="{% static 'img/food.jpg'%}" alt="food">
</body>
</html>