How can I add css and jquery file in my django project?

Question

I am learning Django for one of my web projects. Facing difficulties to append css,jquery file in my project. The template is very simple and need not to use extends.Just one page form. What I have done to declare my media file that: In 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 urls.py file added:

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 have tried with all these types of declaration:

<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 loaded the template file as simple 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" />

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

Answer 1

The correct syntax is in the list of things you tried unsuccessfully:

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

If you define your MEDIA_URL as "/media/", then that link will work out to be /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 errant/extra slashes, etc.

Also, I presume that "test.css" was supposed to be "screen.css" like it was in all your other examples...

But basically, using an absolute url path (starting with the slash to indicate it resolves from the site root) will work just the same as using a relative path (../) as long as you actually have your files in the right place. Then what you have will work.

Answer 2

My dir structure is as follows:

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

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

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

I am confused where the problem is.