How To Use Static CSS JS Files In Django

This article will tell you how to add static css or js files in your django project, and how to reference the static js or css files in django template html files.

1. Create Static Folder.

add static js css files in django project

  1. Create a folder with name statics under the django project, the statics folder locate at same level with templates folder. You can give it any name that you like.
  2. Create a css and js sub folder in the statics folder, then you should save your js file or css file in them accordingly. In this example i use jquery-3.3.1.min.js file. The css file is created by my self.

2. Specify STATICFILES_DIRS In Django Project settings.py File.

django project app dept_emp source files structure

  1. Open the django project settings.py file ( DjangoHelloWorld / DjangoHelloWorld / settings.py ).
  2. Add below configuration code in the settings.py file.
    # this is the statics files context path when request the static file in url. for example http://127.0.0.1:8000/static/js/jquery-3.3.1.min.js
    STATIC_URL = '/static/'
    
    # this is the static files folder name which you created in django project root folder. This is different from above STATIC_URL. 
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'statics'),
    ]
    

3. Edit Base Template Html File.

Now edit your django application’s base html template file to load the statics files in it like below. My django app base html file is DjangoHelloWorld / templates / dept_emp / base.html. If you meet error like TemplateSyntaxError: Could Not Parse The Remainder, you can read article How To Fix Django: TemplateSyntaxError: Could Not Parse The Remainder Error In Template File.

Below is the steps:

  1. Use {% load staticfiles %} at first to load django static tag.
  2. Use django static tag to reference the static files.
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    
    <link rel=”stylesheet” href=”{% static 'css/dept_emp_style.css' %}”>
  3. Below is the complete source code of base.html.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block page_title %}{% endblock %}</title>


    <!-- add below Django command to use bootstrap3 in web page.  -->
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}

    <!-- first load django static tag. -->
    {% load staticfiles %}
 
    <!-- use django static tag ton load js file and css file. -->
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>

    <link rel=”stylesheet” href=”{% static 'css/dept_emp_style.css' %}”>

</head>
    <body>

        <div class="container">

            <!-- include web page navigation bar page -->
            {% include "./base_menu_bar.html" %}


            {% block page_content %}

            {% endblock %}

        </div>
    </body>
</html>

4. Run jQuery In home_page.html.

Now edit DjangoHelloWorld / templates / dept_emp / home_page.html, add below jQuery javascript source code. Below jQuery code will popup an alert dialog when you hover on the button web element.

{% block page_content %}

    <script type="text/javascript">

        $(function () {
            // when hover action on button.

            $('button').hover(function () {
                // alert the button text.
                alert($(this).text())
            });
        });


    </script>

    ......

{% endblock %}

Now when you run the example and browse url http://127.0.0.1:8000/dept_emp/, you can find the jQuery code execute correctly like below page. This example is based on Django Bootstrap3 Example, so you can edit that article’s source code with above code to see the effect.

READ :   How To Create / Remove Django Project Application

popup alert when hover on button use jquery

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.