Django中加载自己下载的CSS/JS文件

原创

anzhilengye 2022-11-07 17:23:39 博主文章分类：Python ©著作权

文章标签 html django css 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者anzhilengye的原创作品，请联系作者获取转载授权，否则将追究法律责任

之前从网上down了一套html的模板，自己想加载到Django中稍微修改引用，自己搞了好几天还是没有达到预期的效果，先是整理下已经完成的部分功能。

场景如下：下面为html和CSS/JS文件，我要html自动加载里面的CSS和JS

Django中加载自己下载的CSS/JS文件_html

打开index.html，可以看到加载样式代码如下

<head>
    <title></title>
        <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
    <meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">    
    <meta name="description" cnotallow="">
    <meta name="author" cnotallow="Xiaoying Riley at 3rd Wave Media">    
    <link rel="shortcut icon" href="favicon.ico">     
    <!-- FontAwesome JS-->
    <script defer src="assets/plugins/fontawesome/js/all.min.js"></script>    
    <!-- App CSS -->  
    <link id="theme-style" rel="stylesheet" href="assets/css/portal.css">
</head>

为了便于分类，我将html和CSS/JS文件分开存放，pycharm目录如下，新建了‘static_files’和‘themes’文件夹，分别用于存放样式文件和html文件。

Django中加载自己下载的CSS/JS文件_css_02

好了接下来开始修改settings的配置，之前在网上找了一篇写的挺详细的http://www.kaotop.com/it/12803.html，我按照自己的需求改了下，但还有一些功能需要自己来摸索。

以下为urls.py的部分配置内容

from polls.views import index,orders,docs
urlpatterns = [
    path('', index, name='index'),
    path('index.html/', index, name='index'),
    path('admin/', admin.site.urls),
]

以下为settings.py的部分配置内容

修改DIRS的配置内容,主要涉及到html文件的访问
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'themes')],       
        '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',
            ],
        },
    },
]

修改static_url相关配置
'''STATIC_ROOT这里我没用到'''

STATIC_ROOT = os.path.join(BASE_DIR, 'static')  STATIC_ROOT 是在部署的时候才发挥作用,执行 python managy.py collectstatic ，会在工程文件下生成(STATIC_ROOT )文件夹，把各个app下的静态文件收集到这个目录下.当然，需要配置Nginx.

'''STATIC_URL用于CSS的前缀，之前index.html中的<script defer src="assets/plugins/fontawesome/js/all.min.js"></script>，可以看到开头是assets的
所以这里要将static改成assets,这样的话我可以通过http://127.0.0.1:8000/assets/images/background/background-3.jpg访问本地的背景图片或样式,否则我必须通过
http://127.0.0.1:8000/static/images/background/background-3.jpg来访问'''

STATIC_URL = '/assets/'

'''STATICFILES_DIRS这里作为所有APP的公共样式, 'django.contrib.staticfiles'将STATICFILES_DIRS列表中的每一个路径转为可访问的'''
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static_files','assets')
]

配置完成后，我在访问http://127.0.0.1:8000/时发现一切正常，但是我点击上面的链接时发现问题来了。

Django中加载自己下载的CSS/JS文件_django_03

遗留的问题mark一下，1.跳转页面时，每个样式URL前面加了本页面的前缀，2、12个html，总不能写12条path记录，views.py定义12个视图。

找了一篇自己之前看书的一个Django模板发现样式加载就没有这个问题，仔细研究了下，发现里面的href用法与这个模板不一样，总结出来可能问题就出在这里。以下为两者区别：

正常的Django模板中可以看到html中的href="{% url 'category-list' cate.id %}，直接匹配了urls.py中的urlpatterns。在我看来，样式加载前面不会带上category前缀可能就是直接匹配了urlpatterns，然后样式直接匹配settings里面的路径

以下为html文件
<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">首页</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                {% for cate in navs %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'category-list' cate.id %}">{{ cate.name }}</a>
                </li>
                {% endfor %}
            </ul>
            <form class="form-inline my-2 my-lg-0" action='/search/' method='GET'>
                <input class="form-control mr-sm-2" type="search" name="keyword" placeholder="Search" aria-label="Search" value="{{ keyword }}">
                <button class= "btn btn-outline-success" type="submit">搜索</button>
            </form>
        </div>
    </nav>
 以下为urls.py文件
 urlpatterns = [
    path('',IndexView.as_view(), name='index'),
    path('category/<int:category_id>/', CategoryView.as_view(), name='category-list'),
    path('admin/', admin.site.urls),
]

这个模板中的html文件,可以看到直接写死了，href="docs.html"，感觉这样通过urlpatterns硬匹配有问题，就出现了那种在样式前面增加了herf的值的情况， "GET /docs.html/assets/plugins/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 2728

<li class="nav-item">                 
                  <a class="nav-link" href="docs.html">
                    <span class="nav-icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-folder" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M9.828 4a3 3 0 0 1-2.12-.879l-.83-.828A1 1 0 0 0 6.173 2H2.5a1 1 0 0 0-1 .981L1.546 4h-1L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3v1z"/>
  <path fill-rule="evenodd" d="M13.81 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zM2.19 3A2 2 0 0 0 .198 5.181l.637 7A2 2 0 0 0 2.826 14h10.348a2 2 0 0 0 1.991-1.819l.637-7A2 2 0 0 0 13.81 3H2.19z"/>
</svg>
                     </span>
                             <span class="nav-link-text">Docs</span>
                  </a><!--//nav-link-->
              </li><!--//nav-item-->
              
以下为urls.py文件
urlpatterns = [
    path('', index, name='index'),
    path('index.html', index, name='index'),
    path('docs.html', docs, name='docs'),
    path('admin/', admin.site.urls),
]