1.新建文件夹templates(存放模板文件),新建文件夹media(存放js、css、images文件夹),并把两个文件夹放到了项目的根目录下

2.设定模板路径

设置模板路径比较简单,只要在setting.py里面的TEMPLATE_DIRS选项里面添加:

import os.path
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__), '../templates').replace('\\','/'),
)

这步的意思就是,在网站项目的根目录下,有一个templates文件夹,里面放置所有的模板

3.设定CSS/JS/IMAGES等路径

1)同样,在setting.py里面,指定根目录下面的media路径:

STATIC_PATH= os.path.join(os.path.dirname(__file__), '../media').replace('\\','/')

2)在urls.py里面设定以下语句(注意:假如在blog应用中新建了一个urls.py文件,那么应该添加到blog目录下的urls.py文件):,将请求CSS/IMAGES/JS的URL转到该地方:

from django.conf import settings

(r'^site_media/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_PATH}),如:

(r'^css/(?P<path>.*)$', 'django.views.static.serve',{'document_root': '/var/www/django-demo/css'}),


(r'^js/(?P</path><path>.*)$','django.views.static.serve', {'document_root': '/var/www/django-demo/js'}),


(r'^images/(?P</path><path>.*)$','django.views.static.serve', {'document_root': '/var/www/django-demo/images'}),

 

 

4.最后,在模板中,已经可用以下方法访问CSS/IMAGES/JS等

<link href="/site_media/style/style.css" rel="stylesheet" type="text/css" />

<img src=’/site_media/images/a.jpg’>

<script src=’/site_media/js/b.js’> </script>

遇到的问题

问题1:
django 1.10 urls.py配置static静态文件的链接
url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}, name='static'),
报错:raise TypeError('view must be a callable or a list/tuple in the case of include().')
 
解决方法:
改成下面的 格式
from django.views import static
from 工程目录 import settings
url(r'^static/(?P<path>.*)$', static.serve, {'document_root':settings.STATIC_ROOT}, name='static'),
 
原因:django 1.10 url的格式变了,需要引入view对象,然后调用view对象中的方法,不能直接用字符串的形式了
 
问题2:
访问静态文件时,报下面的错误
django.core.exceptions.ImproperlyConfigured: The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting
 
解决方法:
修改settings.py文件,将STATICFILES_DIRS中包含的STATIC_ROOT的路径删除掉
 
比如我的STATICFILES_DIRS原来包含了../webManage/static/,而我实际上是用这个地址作为我的静态资源文件地址
STATICFILES_DIRS = (
# 动态的获取static文件的路径,注释掉STATIC_ROOT的路径
# os.path.join(os.path.dirname(__file__), '../webManage/static/').replace('\\', '/'),
os.path.join(os.path.dirname(__file__), '../static/').replace('\\', '/'),
os.path.join(os.path.dirname(__file__), '../static/js/').replace('\\', '/'),
)

django模板导入外部js和css等文件的更多相关文章

  1. Django导入外部js、css、图片等巨大的坑

    初学Django,踩过最大的坑只有之一.至今任然不是很明白. 通常我们导入外部js等文件都是 <script src="myScript.js"></script ...

  2. html引用外部js和css

    html引用外部js和css css:<link rel="stylesheet" type="text/css" href="xx.css&q ...

  3. js、css等文件引入空白问题

    路径没错,不管路径怎么改变,js.css等文件就是引入失败.很多时候是因为Spring的过滤器把js.css等资源文件拦截了.default是tomcat配置的一个servlet,"Defa ...

  4. Django模板导入和替换、以及对数据库的增加、查看

    静态文件引入的3中方式:例如对html模板里面对css样式的引入 STATIC_URL = '/static666/'STATICFILES_DIR=[ os.path.join(BASE_DIR,' ...

  5. Django模板导入及母版继承和自定义返回Html片段

    1.ROOT_URLCONF = '总路由所在路径(比如untitled.urls)'<===默认情况是这样 根路由的路径是可以修改的:ROOT_URLCONF = app01.urls< ...

  6. Django模板与Vue.js冲突问题

    参考: https://my.oschina.net/soarwilldo/blog/755984 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = [&quo ...

  7. 用t4模板和head.js进行css和js的版本控制

    head.js  介绍 http://headjs.com/site/api/v1.00.html#load 原文http://www.cnblogs.com/wang2650/p/5102690.h ...

  8. 转:CI引入外部js与css

    其实不管是在用CI还是ZF都有同样一个问题,就是路径的问题.前期,我在用ZF做CMS时,我在.htaccess文件中设置了如遇到js,css,img等资源文件都不重定向.但今天在用CI时,却忘记了,搞 ...

  9. ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

    最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...

随机推荐

  1. Django之CRM项目Day4-编辑客户 公私户 模糊查询

    1.增加客户 2.编辑客户 obj = models.Customer.objects.filter(pk=edit_id).first() form_obj = CustomerForm(insta ...

  2. c2d遮罩

    ClippingNode 节点 ClippingNode setStencil 设置模版  只有模版的区域显示此节点内容 使用了Opengl的 模板测试  http://www.cnblogs.com ...

  3. win7, ubuntu双系统,重装win7后,修复引导

    参考: http://blog.csdn.net/abcsunl/article/details/72875983 http://blog.csdn.net/davied9/article/detai ...

  4. artTemplate/template.js模板将时间戳格式化为正常的日期

    1:引用<script type="text/javascript" src="../js/artTemplate/template.js">< ...

  5. day 3 - 1 数据类型

    什么是数据类型: int 1,2,3用于计算. bool:True,False,用户判断. str:存储少量数据,进行操作 'fjdsal' '二哥','`13243','fdshklj' '战三,李 ...

  6. Struts2基础2

    一.struts中的API 1)完全解耦合的方式 1.1首先创建一个示例工程,在WEB-INF下创建lib文件夹,把struts2核心jar包导入.在工程下创建resource文件夹,并将其设为资源文 ...

  7. Java的两大数据类型

    Java的两大数据类型 基本数据类型 byte,short,int,long,float,double,boolean,char byte 类别 内容 类型 byte 简介 byte 数据类型是8位. ...

  8. constraintLayout的一些高级用法 布局一个16:9的图片 以及GuideLine的使用

    <!-- "W,9:16" 同样的效果 --> <ImageView android:layout_width="0dp" android:l ...

  9. Javascript - ExtJs - 其它

    组件通用配置 width:number | "%" //宽   height:number | "%" //高   autoEl:string | Json / ...

  10. Nginx系列2:用Nginx搭建一个可用的静态资源Web服务器

    上一节中编译好自己的nginx服务器后, 现在要对nginx.conf文件进行配置,搭建一个可用的静态资源Web服务器 1.放入可访问的html文件到nginx文件夹下,如图1所示: 这里我放入的是一 ...