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. Unsupervised Domain Adaptation Via Domain Adversarial Training For Speaker Recognition

    年域适应挑战(DAC)数据集的实验表明,所提出的方法不仅有效解决了数据集不匹配问题,而且还优于上述无监督域自适应方法.        

  2. Intellij idea安装

    1.官网下载 官网: https://www.jetbrains.com/idea/ 旗舰版(涵盖所有功能的)和社区版 2.下载旗舰版 3.创建maven项目 IDE的设置 setting:当前项目的 ...

  3. ES6走一波 Generator异步应用

    Generator 函数的异步应用 JS异步编程 callback Promise(解决回调地狱) 事件 发布订阅 generator Thunk函数  屁股函数 两次高阶调用的函数 第一次调用的入参 ...

  4. Jmeter+Ant+Jenkins 接口自动化之简单demo

    之前的文章我们已经分享过了 Jmeter+Ant 的批量执行 ,并且搭建好了Jenkins部署平台,如何再将三者完美结合呢? 1.首先打开Jenkins主页面,进入“系统管理-插件管理”,安装相关的插 ...

  5. mysql 原理 ~ 死锁问题

    一 锁1 锁的定义   1 按照宏观角度     共享锁[S锁]     又称读锁,若事务T对数据对象A加上S锁,则事务T可以读A但不能修改A,其他事务只能再对A加S锁,而不能加X锁,直到T释放A上的 ...

  6. 音乐app各部分笔记(二)

    7-15播放器progress-circle圆形进度条组件实现 1.首先是引入三步  progress-circle 引入到player.vue中 然后就是 SVG技术 值得注意的事   svg 中 ...

  7. ASP.NET MVC - 发布web应用程序、部署到IIS

    发布项目 右击项目 - 发布 选择IIS - 点击发布 发布方法 - 文件系统,目标位置 - 选择与项目所在目录不同的目录(也即,指定一个发布生成文件的目录),文件发布选项 - 不选 - 点击发布 安 ...

  8. CXF2.7整合spring发布webservice

    ---------==========--服务端发布webservice-=============-------- 1.需要的jar包: 2.包结构 3.代码 1.实体类 package cn.ql ...

  9. 20145215《网络对抗》Exp4 恶意代码分析

    20145215<网络对抗>Exp4 恶意代码分析 基础问题回答 如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用 ...

  10. js学习笔记--基础部分

    自增 自增 ++ 通过自增可以使变量在自身的基础上增加1 对于一个变量自增以后,原变量的值会立即自增1 无论使a++, 还是++a,都会立即使原变量的值自增1. 不同的是a++ 和++a的值不同. a ...