How to add css and jquery file to django project?

Question

I am learning Django for one of my web projects. Before adding a css, jquery project to my project. The template is very simple and there is no need to use extends. Just one page. What I did to declare my media file: In the settings.py file: Added path:

`import os def path(*x): return os.path.join(os.path.abspath(os.path.dirname(__file__)), *x) 

`Then added:

 MEDIA_ROOT = path('media') #media is my folder where all the css,js file are MEDIA_URL = '/media/' ADMIN_MEDIA_PREFIX = '/media/' TEMPLATE_DIRS = ( path('templates') 

In the added urls.py file:

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

In the template file, I tried using all of these types of declarations:

 <script type="text/javascript" src="/media/jquery.min.js"></script> <script type="text/javascript" src="/media/site.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="/media/screen.css" /> <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../media/screen.css" /> 

But when I downloaded the template file as plain html with:

 <script type="text/javascript" src="../media/jquery.min.js"></script> <script type="text/javascript" src="../media/site.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="../media/screen.css" /> 

It worked. But I need to integrate into my Django project. Hope will get the navigation and solve it :) Thanks

Answer 1

My structure is as follows:

 |-- test_form |-- /settings.py |-- /urls.py |-- /media | '-- test.css '-- /templates '-- ... 

And I added the following syntax in the template.html file:

 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" /> 

I am confused where the problem is.

Answer 2

The correct syntax is listed in the list of failed attempts:

 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" /> 

If you define your MEDIA_URL as "/ media /", then this link will work as /media/test.css .

Provided that you have the following directory structure:

 my_project |-- settings.py |-- urls.py |-- media |-- test.css 

I would double check all your file and directory names, make sure you don't have any erroneous / extra slashes, etc.

Also, I assume that "test.css" should have been "screen.css", as it was in all your other examples ...

But basically, using an absolute URL (starting with a slash to indicate that it is allowed with the root of the site) will work just like using a relative path (../) if you really have your files in the right place . Then what you have will work.

Answer 3

I think in urls.py you could skip the url in urlpatterns , urlpatterns .:

urlpatterns = patterns ('', url (r '^ media / (? P. *) $', 'django.views.static.serve', {'document_root': settings. MEDIA_ROOT}),