Django加入JS,CSS。图片等外部文件的方法

By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢。

在使用Django搭建站点时,往往须要使用一些js,css或者图片等外部文件,这里给出使用它们的使用方法。

我的django版本号为:1.8.2

如果我们有project例如以下:

sentiment_analysis

|-mysite

| |-mysite

| |-manage.py

| |-show_pages

| | |-__init__.py

| | |-admin.py

| | |-models.py

| | |-tests.py

| | |-urls.py

| | |-views.py

| | |-tests.py

| | |-templates

| | | |-show_pages

| | | | |-index.html



在此project下。如果我们须要在index.html中使用js等外部文件,能够按例如以下步骤进行使用。


加入外部文件

在应用show_pages(与manage.py同级)中新建static文件夹,里面放置外部资源文件(css,js等)。

改动settings.py

在settings.py文件里加入例如以下几行(当中有一行已经存在了)。

STATIC_ROOT= os.path.join(os.path.dirname(os.path.dirname(file)),’static’).replace(‘\’,’/’)

STATIC_URL = ‘/static/’

TEMPLATE_DIRS = (

‘/show_pages/templates’,

)

改动urls.py

改动mysite文件夹下的urls.py文件为:

from django.contrib import admin

from django.conf.urls import *

from django.conf import settings

urlpatterns = [

url(r’^admin/’, include(admin.site.urls)),

url(r’^show_pages/’, include(‘show_pages.urls’)),

url(r’^static/(?P.*)$’,’django.views.static.server’,{‘document_root’:settings.STATIC_ROOT},name=’static’),

]

改动manage.py

改动mysite文件夹下的manage.py文件,加入:

reload = reload(sys)

sys.setdefaultencoding(‘gb18030’)#否则载入css文件仍会出错

引用

最后,在index.html中引入外部资源文件时,使用例如以下方式进行引用:

  • js文件:<script src="/static/js/jquery.js"></script>
  • css文件:<link href="/static/css/bootstrap.min.css" rel="stylesheet">
  • 图片:<img class="img-responsive" src="/static/img/phones.png" alt="">

或者进行例如以下引用:

先在index.html文件里输入:{% load staticfiles %},再按例如以下方式进行引用。

  • js文件:<script src="{% static 'js/jquery.js' %}"></script>
  • css文件:<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  • 图片:<img class="img-responsive" src="{% static 'img/phones.png' %}" alt="">

Django加入JS,CSS,图片等外部文件的方法的更多相关文章

  1. 转:利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

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

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

  3. linux共享文件samba安装与java读取外部文件夹方法

    测试环境RedHat 6.4 一.安装 samba组件安装: (1)首先用“rpm –qa |grep samba”命令检验系统samba服务是否安装. #rpm –qa |grep samba sa ...

  4. Fiddler过滤css、js、图片等静态文件

    REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav)(\?.*)?$ REGEX:(?insx)/[^\?/]*\.(action|do)(\?.* ...

  5. js 下载图片与下载文件的方式一样;保存至本地 ASP.NET 方式

    <asp:Button ID="btnDownLoad" runat="server" style="display: none" T ...

  6. 解决VS2005打开js,css,asp.php等文件,中文都是乱码的问题

    用记事本打开可以正常观看但是用VS2005编辑器打开JS,中文确实乱码. 解决办法:在VS 2005 的设置里面选择自动检测Utf-8:“工具”->“选项”->“文本编辑器”->“自 ...

  7. PHP编写的图片验证码类文件分享方法

    适用于自定义的验证码类! <?php/* * To change this license header, choose License Headers in Project Propertie ...

  8. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  9. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

随机推荐

  1. Unity Shader (五)Surface Shader示例

    1.替换颜色 Shader "Custom/Example_Frag_5" { Properties { _MainTex ("Albedo (RGB)", 2 ...

  2. GenIcam标准(六)

    2.9.可用的接口 本章用伪代码列出在2.3章介绍过的最重要的接口.对每个接口,实际的实现可以提供更多的方法,例如,除了SetValue(value)方法,还可以用直接映射到SetValue()的方式 ...

  3. python中的future,你见过可以使用未来版本模块的语言吗?

    import xxx from yy.xxx import xx from yy.xxx import xx as x python最常见的导包导模块语句 yy为包名,包就是文件夹,模块就是xxx.p ...

  4. CentOS6 安装 aria2

    CentOS6 安装 aria2 https://www.jianshu.com/p/31ea7aba5524 http://blog.51cto.com/skypegnu1/1637168 1.先安 ...

  5. vue11 vue实例方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. hight charts

    hight charts http://www.hcharts.cn/resource/index.php http://www.hcharts.cn/api/index.php

  7. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  8. 简单学习Python之路1

    如何在cmd中打开文件:先用win+R打开cmd界面,在已知到你自己要打开文件的地址之后比如(F:\workspace),你先按F:,然后在用cd workspace进入workspace的文件中,然 ...

  9. 彻底分析虚拟视频驱动vivi(三)

    在Ubuntu系统中接上usb摄像头设备时,系统会自动安装对应的usb设备驱动程序.我们现在要使用自己编译的vivi驱动,该怎么办呢? 1.先安装系统自带的vivi驱动和它所依赖的所有驱动:sudo ...

  10. 把书《CUDA By Example an Introduction to General Purpose GPU Programming》读薄

    鉴于自己的毕设需要使用GPU CUDA这项技术,想找一本入门的教材,选择了Jason Sanders等所著的书<CUDA By Example an Introduction to Genera ...