Django添加JS，CSS，图片等外部文件的方法

Django添加JS，CSS，图片等外部文件的方法

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

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

我的django版本为：1.8.2

假设我们有工程如下：

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

在此工程下，假设我们需要在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="">