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

时间:2021-11-24 09:28:05

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="">