Static 文件未在一个模板上加载但在另一个模板上加载

Question

I got a template from online, and managed to get the CSS and JS working with one of my HTML templates;我从网上得到了一个模板，并设法让 CSS 和 JS 与我的 HTML 模板之一一起工作； but for another one, the same CSS/JS won't load despite the code being identical.但是对于另一个，尽管代码相同，但不会加载相同的 CSS/JS。

Here is my settings.py:这是我的settings.py：


STATIC_URL = '/static/'

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

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")

This is my views:这是我的看法：

from django.shortcuts import render

# Create your views here.
def home_view(request, *args, **kwargs):
    return render(request, "about.html", {})
 
def contact(request, *args, **kwargs): 
    return render(request, "contact.html", {})

def work(request, *args, **kwargs): 
    return render(request, "work.html", {})

Here are my URL Patterns:这是我的 URL 模式：

from django.contrib import admin
from django.urls import path
from pages.views import home_view
from pages.views import contact
from pages.views import work
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home_view , name='home'), 
    path('contact/', contact, name = 'contact' ),
    path('work/', work, name = 'work'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Here is the CSS of my template that works;这是我的模板的 CSS 有效； I had to hard code it because the static tag wouldn't work for some reason:我不得不对其进行硬编码，因为 static 标记由于某种原因无法工作：


{ % load static %}

<html lang="en">

  <head>
    <title>Mighty &mdash; Website Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href = https://fonts.googleapis.com/css?family=Muli:400,700  rel="stylesheet">

    <link rel="stylesheet" href= 'static/fonts/icomoon/style.css'>

    <link rel="stylesheet" href='static/css/bootstrap.min.css'>
    <link rel="stylesheet" href='static/css/bootstrap-datepicker.css'>
    <link rel="stylesheet" href='static/css/jquery.fancybox.min.css'>
    <link rel="stylesheet" href='static/css/owl.carousel.min.css'/>
    <link rel="stylesheet" href='static/css/owl.theme.default.min.css'>
    <link rel="stylesheet" href='static/fonts/flaticon/font/flaticon.css'>
    <link rel="stylesheet" href='static/css/aos.css'>

    <!-- MAIN CSS -->
    <link rel="stylesheet" href= 'static/css/style.css'>

And here is the CSS portion of the template that does not work:这是模板的 CSS 部分不起作用：

{ % load static % }
<html lang="en">

  <head>
    <title>Mighty &mdash; Website Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">

    <link rel="stylesheet" href='static/fonts/icomoon/style.css'>

    <link rel="stylesheet" href='static/css/bootstrap.min.css'>
    <link rel="stylesheet" href='static/css/bootstrap-datepicker.css'>
    <link rel="stylesheet" href='static/css/jquery.fancybox.min.css'>
    <link rel="stylesheet" href='static/css/owl.carousel.min.css'>
    <link rel="stylesheet" href='static/css/owl.theme.default.min.css'>
    <link rel="stylesheet" href='static/fonts/flaticon/font/flaticon.css'>
    <link rel="stylesheet" href='static/css/aos.css'>

    <!-- MAIN CSS -->
    <link rel="stylesheet" href='static/css/style.css'>

Answer 1

settings.py:设置.py：

 STATIC_URL = '/static/'
    MEDIA_URL = '/media/'
    
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static')
    ]
    
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')

Each file write like this:每个文件都这样写：

<link rel="stylesheet" href= "{% static 'fonts/icomoon/style.css' %}">

Answer 2

You have paths without starting /你有没有开始的路径 /

which then appends path to already existing path like然后将路径附加到已经存在的路径，例如

lala.la/contact/static/fonts/flaticon/font/flaticon.css'

just change them to root paths只需将它们更改为根路径

<link rel="stylesheet" href='/static/fonts/flaticon/font/flaticon.css'>

Also it would be wise to set static settings correctly using documentation使用文档正确设置 static 设置也是明智的

Static 文件未在一个模板上加载但在另一个模板上加载

问题描述

2 个解决方案

解决方案1
0 2020-07-10 17:45:48

解决方案2
0 2020-07-10 18:03:49

Static 文件未在一个模板上加载但在另一个模板上加载

问题描述

2 个解决方案

解决方案1 0 2020-07-10 17:45:48

解决方案2 0 2020-07-10 18:03:49

解决方案1
0 2020-07-10 17:45:48

解决方案2
0 2020-07-10 18:03:49