前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django 2.1.7 模板 - 动态配置静态文件路径

Django 2.1.7 模板 - 动态配置静态文件路径

作者头像
Devops海洋的渔夫
发布2019-07-02 18:02:30
2K0
发布2019-07-02 18:02:30
举报
文章被收录于专栏:Devops专栏Devops专栏

相关篇章

Django 2.1.7 创建应用模板

Django 2.1.7 配置公共静态文件、公共模板路径

Django 2.1.7 模板语言 - 变量、标签、过滤器、自定义过滤器、模板注释

Django 2.1.7 模板继承

Django 2.1.7 模板 - HTML转义

Django 2.1.7 模板 - CSRF 跨站请求伪造

Django 2.1.7 模板 - 图片验证码的实现

Django 2.1.7 模板 - 动态URL 反向解析

静态文件

项目中的CSS、图片、js都是静态文件。一般会将静态文件放到一个单独的目录中,以方便管理。在html页面中调用时,也需要指定静态文件的路径,Django中提供了一种解析的方式配置静态文件路径。静态文件可以放在项目根目录下,也可以放在应用的目录下,由于有些静态文件在项目中是通用的,所以推荐放在项目的根目录下,方便管理。

示例

1)在mysite/settings.py文件中定义静态文件存放的物理目录。

代码语言:javascript
复制
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

2)在项目根目录下创建static目录,再创建img、css、js目录。

3)在assetinfo/views.py中定义视图static_test。

代码语言:javascript
复制
def static_test(request):
    return render(request,'assetinfo/static_test.html')

4)在assetinfo/urls.py中配置url。

代码语言:javascript
复制
urlpatterns = [
    # ex:/assetinfo/static_test
    path('static_test', views.static_test, name='static_test'),
]

5)在templates/assetinfo/下创建static_test.html文件。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="/static/images/slide01.jpg"/>
</body>
</html>

6)保存图片到static/images/目录下,名称为slide01.jpg。

7)运行服务器,浏览效果如下图:

http://127.0.0.1:8000/assetinfo/static_test

配置静态文件

Django提供了一种配置,可以在html页面中可以隐藏真实路径。

1)在mysite/settings.py文件中修改STATIC_URL项。

代码语言:javascript
复制
STATIC_URL = '/abc/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

2)刷新浏览器,图片找不到了,效果如下图:

3)修改templates/assetinfo/static_test.html如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    修改前:<img src="/static/images/slide01.jpg"/>
    <hr>
    修改后:<img src="/abc/images/slide01.jpg"/>
</body>
</html>

3)刷新浏览器,效果如下图:

如果在模板中写死了静态文件路径,后续修改的话会很麻烦,下面来看看动态静态文件路径。

动态静态文件路径

1)修改templates/assetinfo/static_test.html如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    修改前:<img src="/static/images/slide01.jpg"/>
    <hr>
    修改后:<img src="/abc/images/slide01.jpg"/>
    <hr>
    配置动态静态文件:
    {% load static from staticfiles %}
    <img src="{% static "images/slide01.jpg" %}">
</body>
</html>

2)刷新浏览器,效果如下图:

说明:这种方案可以隐藏真实的静态文件路径,但是结合Nginx布署时,会将所有的静态文件都交给Nginx处理,而不用转到Django部分,所以这项配置就无效了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.06.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 相关篇章
  • 静态文件
  • 示例
  • 配置静态文件
  • 动态静态文件路径
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档