zoukankan      html  css  js  c++  java
  • Django 静态文件

    静态文件

       在一个Django项目中,我们可能用到很多静态文件(图片,前端库,框架),那么如何去调用这些静态文件其实在Django里面有了非常高明的处理方式。

       下面就看一看如何在Django项目中配置自己的静态文件,以及如何去使用它们。

    创建目录

       首先我们需要在根目录下创建出一个static的文件夹用于存放静态文件,其次可以按照下面的规则进行创建目录以方便管理。

    -- static	静态文件根目录
    	-- public	公用文件夹,存放所有APP共有的资源
        	-- js
        	-- css
        	-- imges
        	-- modules 
        -- app01		APP01自己用的一些静态文件
        	-- js
        	-- css
        	-- imges
        	-- modules
        -- app02
        	-- js
        	-- css
        	-- imges
        	-- modules
    

       创建好目录之后,可以在public中放入一些静态文件了,如jQuerybootstrop等等。

       那么我这里就放一个自己写的css文件吧,放在app01css中,命名为h1-style.css

    h1{
        background: red;
        color: #fff;
    }
    

    配置文件

       静态文件创建好了之后需要进行配置,打开项目全局文件夹中的settings.py,找到最下面

    STATIC_URL = '/static/'  # 静态文件路径映射别名(十分重要,默认都是static,一般不更改)
    STATICFILES_DIRS = ( # 必须是这个名字
        os.path.join(BASE_DIR,"static"),  # 真实的静态文件路径,注意逗号
    )
    

    引用文件

    测试工作

       在配置完成后,我们可以对静态文件进行测试工作了。

       第一步:建立urls路由视图解析关系

    from django.conf.urls import url
    from django.contrib import admin
    from app01 import views
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^static_test/', views.static_test),
    ]
    

       第二步:编写视图函数

    from django.shortcuts import render
    
    def static_test(request):
        return render(request,"static_test.html")
    

       第三步:编写HTML文档static_test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>static_test</h1>
    </body>
    </html>
    

       此时我们启动Django服务后发现<h1>并没有样式,这是由于还没对css文件进行引入。

    静态解析

       现在在HTML文档中,我们就可以引用这个h1-style.css文件了。

       以下方式属于静态解析,是根据STATIC_URL这个变量值来进行查询的,也就是说如果你真实的静态文件根目录名字不叫static而是叫其他的,只要你在配置文件中进行了配置,那么在引入的时候通通使用STATIC_URL的变量值进行引入。

       注意静态引入的方式十分依赖于STATIC_URL起的别名,你的别名是什么,引入的目录名就应该是什么。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="/static/app01/css/h1-style.css"> <!-- 静态解析,依赖别名 -->
        
        <title>Document</title>
    </head>
    <body>
        <h1>static_test</h1>
    </body>
    </html>
    

    动态解析

       动态解析也依赖于STATIC_URL这个变量,不过在使用动态解析时STATIC_URL变量值(拼接路径映射别名)可以随意进行更换。

       他相当于找到这个变量,然后再用{% static '/app01/css/h1-style.css' %}后面的部分去与这个变量的别名映射即我们配置的路径做拼接,拼接上就找到了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        {% load static %} 
        <link rel="stylesheet" href="{% static '/app01/css/h1-style.css' %}"> <!-- 动态解析,不依赖别名 -->
    
        <title>Document</title>
    </head>
    <body>
        <h1>static_test</h1>
    </body>
    </html>
    
  • 相关阅读:
    linux安装navicat全程记录
    MySQL5.7.20报错Access denied for user 'root'@'localhost' (using password: NO)
    java中的异步处理和Feature接口(一)
    @Autowired注解与@Resource注解的区别与用法
    超详细MySQL安装及基本使用教程
    linux下mysql开启远程访问权限及防火墙开放3306端口
    mysql之my.cnf详解
    centos7 mysql 启动mysqld.service
    linux系统安装mysql数据库
    ExecutorService 的理解与使用
  • 原文地址:https://www.cnblogs.com/Yunya-Cnblogs/p/13632864.html
Copyright © 2011-2022 走看看