Django Шаблон вложен в скрипт автоматически

Question

AOS и Chart. js файлы перекрываются. Я использую django 3.0.5. В шаблоне я попытался использовать 1 блок сценария и 2 блока сценария, но он по-прежнему выдает ту же ошибку. Сценарии в коде находятся в разных тегах, но ответ, отправленный локальным сервером, содержит сценарии. Я пытался включить AOS для графиков (холст) в следующем проекте: https://github.com/ruppysuppy/The-WeatherMan-Project

база. html часть сценария

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{% block script %} {% endblock script %} 
{% block script_2 %} {% endblock script_2 %}

weatherdetail. html часть скрипта

{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    // TEMPERATURE GRAPH
    var chart_temperature = document.getElementById('tempChart').getContext('2d');
    var chart = new Chart(chart_temperature, {
        type: 'line',

        data: {
            labels: {{days | safe}},
            datasets: [{
                label: 'Maximum Temperature',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(255, 0, 0, 0.9)',
                data: {{temp_high | safe}}
            }, {
                label: 'Minimum Temperature',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(255, 150,0,0.9)',
                data: {{temp_low | safe}}
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 50,
                        min: 0,
                        stepSize: 10
                    }
                }]
            }
        }
    });

    // PRECIPITATION GRAPH
    var chart_precipitation = document.getElementById('precipChart').getContext('2d');
    var chart = new Chart(chart_precipitation, {
        type: 'line',

        data: {
            labels: {{days | safe}},
            datasets: [{
                label: 'Precipitation',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgb(100, 100, 255)',
                data: {{precipitation | safe}}
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 200,
                        min: 0,
                        stepSize: 40
                    }
                }]
            }
        }
    });

    // HUMIDITY GRAPH
    var chart_humidity = document.getElementById('humidChart').getContext('2d');
    var chart = new Chart(chart_humidity, {
        type: 'line',

        data: {
            labels: {{days | safe}},
            datasets: [{
                label: 'Humidity',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(0, 100, 0, 0.9)',
                data: {{humidity | safe}}
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0,
                        stepSize: 20
                    }
                }]
            }
        }
    });
</script>
{% endblock script %}

{% block script_2 %} 
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>
{% endblock script_2 %}

Результат в части скрипта сайта

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
    AOS.init();
    </script>
    // TEMPERATURE GRAPH
    var chart_temperature = document.getElementById('tempChart').getContext('2d');
    var chart = new Chart(chart_temperature, {
        type: 'line',

        data: {
            labels: ['27/04', '26/04', '25/04', '24/04'],
            datasets: [{
                label: 'Maximum Temperature',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(255, 0, 0, 0.9)',
                data: [24.34, 32.64, 34.22, 32.63]
            }, {
                label: 'Minimum Temperature',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(255, 150,0,0.9)',
                data: [23.54, 24.34, 23.16, 22.75]
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 50,
                        min: 0,
                        stepSize: 10
                    }
                }]
            }
        }
    });

    // PRECIPITATION GRAPH
    var chart_precipitation = document.getElementById('precipChart').getContext('2d');
    var chart = new Chart(chart_precipitation, {
        type: 'line',

        data: {
            labels: ['27/04', '26/04', '25/04', '24/04'],
            datasets: [{
                label: 'Precipitation',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgb(100, 100, 255)',
                data: [0, 0, 0, 0]
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 200,
                        min: 0,
                        stepSize: 40
                    }
                }]
            }
        }
    });

    // HUMIDITY GRAPH
    var chart_humidity = document.getElementById('humidChart').getContext('2d');
    var chart = new Chart(chart_humidity, {
        type: 'line',

        data: {
            labels: ['27/04', '26/04', '25/04', '24/04'],
            datasets: [{
                label: 'Humidity',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(0, 100, 0, 0.9)',
                data: [87.0, 81.58333333333333, 82.58333333333333, 85.83333333333333]
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0,
                        stepSize: 20
                    }
                }]
            }
        }
    });
</script>

This тоже приводит к той же проблеме: weatherdetail. html часть скрипта (используя 1 блок скрипта)

{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    // TEMPERATURE GRAPH
    var chart_temperature = document.getElementById('tempChart').getContext('2d');
    var chart = new Chart(chart_temperature, {
        type: 'line',

        data: {
            labels: {{days | safe}},
            datasets: [{
                label: 'Maximum Temperature',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(255, 0, 0, 0.9)',
                data: {{temp_high | safe}}
            }, {
                label: 'Minimum Temperature',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(255, 150,0,0.9)',
                data: {{temp_low | safe}}
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 50,
                        min: 0,
                        stepSize: 10
                    }
                }]
            }
        }
    });

    // PRECIPITATION GRAPH
    var chart_precipitation = document.getElementById('precipChart').getContext('2d');
    var chart = new Chart(chart_precipitation, {
        type: 'line',

        data: {
            labels: {{days | safe}},
            datasets: [{
                label: 'Precipitation',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgb(100, 100, 255)',
                data: {{precipitation | safe}}
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 200,
                        min: 0,
                        stepSize: 40
                    }
                }]
            }
        }
    });

    // HUMIDITY GRAPH
    var chart_humidity = document.getElementById('humidChart').getContext('2d');
    var chart = new Chart(chart_humidity, {
        type: 'line',

        data: {
            labels: {{days | safe}},
            datasets: [{
                label: 'Humidity',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: 'rgba(0, 100, 0, 0.9)',
                data: {{humidity | safe}}
            }]
        },

        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0,
                        stepSize: 20
                    }
                }]
            }
        }
    });
</script>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>
{% endblock script %}