Successful_12
Successful_12

Reputation: 25

Different static files in different templates

I had stuck in static files.

When I tried to {% load staticfiles %} in my main template (e.x. {% static "main.js" %}), it works great in main.html template. But when I tried to extend main.html template by detail.html template, and put there another static file (e.x. {% staticfiles 'fancybox.js' %}), it displays only

<script type="text/javascript" src="static/main.js"></script>

instead

<script type="text/javascript" src="static/main.js"></script> <script type="text/javascript" src="static/fancybox.js"></script>

in my detail.html.

main.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    
    {% load staticfiles %}
    <script type="text/javascript" src="{% static 'main.js' %}"></script>
</head>
<body>

{% block content %}
<!-- SOME CONTENT -->
{% endblock %}

</body>
</html>

detail.html:

{% extends 'layout/main.html' %}

{% load staticfiles %}
    <script type="text/javascript" src="{% static 'fancybox.js' %}"></script>

{% block title %}
<!-- SOME CONTENT -->
{% endblock %}

Can somebody help me with solution?

Thanks mates.

Upvotes: 0

Views: 49

Answers (2)

Abi Waqas
Abi Waqas

Reputation: 299

    {% extends 'layout/main.html' %}
  {% block title %}
    {% load staticfiles %}
        <script type="text/javascript" src="{% static 'fancybox.js' %}"></script>

  
    <!-- SOME CONTENT -->
    {% endblock %}

use this code in details.html.You have to put {% block body%} at the top just after the extend or include statement

Upvotes: 0

Jessie
Jessie

Reputation: 2495

When you extend a template you need to make sure all of the code in the child template is inside a block. So for your main template typically you do something like:

main.html

{% load staticfiles %} <!-- This should go at the top for readability -->

<!-- Load any site wide JS here -->
<script type="text/javascript" src="{% static 'main.js' %}"></script>

{% block js %}<!-- Put JS in here for extended templates -->{% endblock %}

detail.html

{% extends 'layout/main.html' %}
{% load staticfiles %}

{% block js %}
  <script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
{% endblock %}

{% block title %}
<!-- SOME CONTENT -->
{% endblock %}

Upvotes: 1

Related Questions