打开settings.py,在底部添加:

import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(os.path.dirname(__file__), '../static/').replace('\\','/'),

打开urls.py,添加:(注意,如果你在blog目录下也建立了urls.py,那么就得在blog/urls.py中做修改。别忘了import settings)

import settings
urlpatterns = patterns('',
url( r'^static/(?P<path>.*)$', 'django.views.static.serve',{ 'document_root': settings.STATIC_URL }),
)

然后将你的css,js文件以及html中引用的静态图片都放置在static文件夹里。
在html模板里调用:
<link rel="stylesheet" href="../../static/css/style.css" type="text/css">

注意,href就是你在static里面css等的路径。

然后启动python manage.py runserver
访问http://127.0.0.1:8000/static/css/style.css
若能访问文件,说明你css等静态文件已经可以被django找到了,这时访问你 的模板对应的页面就可以发现页面可以引用css了

用法

1.在settings.py中定义你的STATIC_URL:

STATIC_URL='/static/'
  • 1

2.在项目中,static文件的目录如下图所示:

项目名:ProjetTestDjango;APP名:peojetDjango,static 文件夹在APP目录下。

3.在settings.py中添加项目APP:

4.在HTML文件中调用:

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" media="all">
<img class="img" src="{% static 'images/logos/Google_Translate_Icon.png' %}" width="36" height="36">

笔记用,侵歉删

django模板中导入js、css等静态文件的更多相关文章

  1. Django day07 (一) 模板的导入 母板的继承 静态文件配置

    一:模板的导入 -写一个模板 {% include '模板的名字' %} 二:母板的继承 -写一个母版(可以留多个盒子) {% block 名字 %} / {% endblock %} 三:静态文件配 ...

  2. js css等静态文件版本控制,一处配置多处更新.net版【原创】

    日常web开发中,我们修改了js.css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了 怎么办呢? 1.小白:让客户清除缓存?,No ,  不靠谱 2.初级 ...

  3. Django 模板中引用静态资源(js,css等)

    Django 模板中免不了要用到一些js和CSS文件,查了很多网页,被弄得略晕乎,还是官网靠谱,给个链接大家可以自己看英文的. https://docs.djangoproject.com/en/1. ...

  4. django模板中如何导入js、css等外部文件

    本教程只适合Django1.4版本.(1.8版本之后不需要这么麻烦,详见 http://www.cnblogs.com/ryan255/p/5465608.html) html模板里面使用了css,但 ...

  5. Django 模板中使用css, javascript

    Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...

  6. django模板中的extends和include使用方法

    一.extends使用方法 首先extends也就是继承,子类继承父类的一些特性.在django模板中通过继承可以减少重复代码. 首先我们建立一个app,名字叫做hello.别忘了在settings. ...

  7. springMVC下jsp引用外部js,css等静态资源的解决方法

    直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...

  8. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

  9. Nginx设置Js、Css等静态文件的缓存过期时间

    location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小 ...

随机推荐

  1. NAT、端口映射、内网穿透、公网IP都是啥

    原文地址:https://wuter.cn/1756.html/ 一.IPv4地址 IP协议是为计算机网络相互连接进行通信而设计的协议,它是能使连接到网上的所有计算机网络实现相互通信的一套规则. 这里 ...

  2. Dubbo SPI源码解析①

    目录 0.Java SPI示例 1.Dubbo SPI示例 2.Dubbo SPI源码分析 ​ SPI英文全称为Service Provider Interface.它的作用就是将接口实现类的全限定名 ...

  3. Android驱动学习-app调用内核驱动过程(驱动框架回顾)

    考研已经过去了,android驱动的学习也断了半年多了,现在重新捡起来学习,回顾一下Android驱动的大体框架. Android系统的核心是java,其有一个David虚拟机.Android-app ...

  4. react脚手架抽离webpack报错解决

    我们在写react项目的时候,可能原有的webpack配置不满足我们的需求,需要自己去配置,可是你在创建脚手架的时候并不能在外部找到webpack文件,脚手架的webpack文件在node_modul ...

  5. 使用pdf.js aspose各种文档转PDF 版本对应license.xml 去水印破解

    在使用pdf.js途中,使用aspose转换的文件一直有水印,在网上找了许多破解办法都是已经失效的,于是乎,就查看了一下jar的源码,找到了版本对应的破解字符(如下):对应版本为 aspose-wor ...

  6. 【Redis】内部数据结构自顶向下梳理

    本博客将顺着自顶向下的思路梳理一下Redis的数据结构体系,从数据库到对象体系,再到底层数据结构.我将基于我的一个项目的代码来进行介绍:daredis.该项目中,使用Java实现了Redis中所有的数 ...

  7. node-sass 安装失败报错的原因及解决办法(整理)

    npm install 时偶尔遇到报错:没有安装python或node-sass 安装失败的问题,百度之后发现是被墙了,但根据百度的方法换了淘宝镜像和用了vpn都安装失败,最后发现原来是因为没有卸载之 ...

  8. Hadoop集群安装配置

    一.准备工作 1.首先准备好七台虚拟机,并确保都已经安装配置好jdk. 2.Hadoop3.2.0+jdk1.8自行到官网下载 3.修改好相称的主机名,并在hosts文件中相互添加. ######注意 ...

  9. SpringBoot框架中解决日期展示问题

    解决日期展示问题(返回的json中日期的格式是:"birthday":"1988-08-07T15:00:00.000+0000");需要转化成指定的格式(年月 ...

  10. SICP 课程总结 & 复习

    SICP 课程总结 & 复习 小作文 有赖于那个终极的.伟大的.命定的教务系统,我选上了这门课:SICP,Structure and Interpret of Computer Program ...