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. 使用Python的turtle库画圣诞树

    代码如下: from turtle import * import random import time n = 80.0 speed("fastest") screensize( ...

  2. Socket与TCP,UDP

    什么是socket 简单来说是IP地址与端口的结合协议(RFC 793) 一种地址与端口的结合描述协议 TCP/IP协议的 相关API的总称:是网络api的集合实现 涵盖了:Stream Socket ...

  3. ssm框架所需jar包整理及各jar包的作用

    以下是我目前新搭建的ssm项目的pom.xml 之后如果需要其他的话再加 <?xml version="1.0" encoding="UTF-8"?> ...

  4. mysql 案例 ~ 常见案例汇总

    一 简介:这里汇总了一些mysql常见的问题二 案例场景   问题1 mysql设置了默认慢日志记录1S,为何会记录不超过1S的sql语句   答案 mysql~log_queries_not_usi ...

  5. Ajax原生请求和java对象转成json

    \黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模 ...

  6. 简单日历dom

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...

  7. linux系统内核版本升级

    一.查看Linux内核版本命令(2种方法): 1.cat /proc/version 2.uname -a 二.查看Linux系统版本的命令(3种方法): 1.lsb_release -a 即可列出所 ...

  8. Control算法相关

    Control算法相关 添加新的control算法官方指导教程. 创建一个控制器: 在文件control_config中添加新控制器的配置信息: 注册新控制器. 如何添加新的CAN卡. Apollo中 ...

  9. Mudo C++网络库第二章学习笔记

    线程同步的精要 并发有两种基本的模型: 一种是message passing(消息传递); 另一种是shared memory(共享内存); 在分布式系统中(有多台物理机需要通信), 运行在多台机器上 ...

  10. 开源录屏工具 Best Screen Recording Open Source Software For Windows 2017

    OBS Studio OBS (Open Broadcaster Software) - Free and open source software for live streaming and sc ...