Question

我正在使用base.html文件创建所有子模板的导航栏。

我面临的问题是，这不再加载我的JS图表（谷歌图表）。任何人都可以就为什么会发生这种情况大开眼界，也许还有可能的解决方法？

base.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

       {% block tab_menu %}
 <div class="topnav">
  <a href="/index">Home</a>
  <a href="/index/devops">Devops</a>
  <a href="/index/qa">QA</a>
  <a href="/index/frontend">Frontend</a>
     <a href="/index/middleware">Middleware</a>
     <a href="/index/portal">Portal</a>
  <
</div>
{% endblock tab_menu %}


</body>
</html>

child.html：

<!DOCTYPE html>
{% extends "KPI/base.html" %}
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
             google.charts.load("current", {packages:["corechart"]});
             google.charts.setOnLoadCallback(VelocityChart);
             function VelocityChart() {
               var data = google.visualization.arrayToDataTable([
                 ['Status', 'Number of Tasks'],
                 ['Completed', {{completed_velocity}}],
                 ['Incompleted',  {{incomplete_velocity}}],
                ]);

                var options = {
                   title: '',
                   is3D: true,
                 };

               var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));
        chart.draw(data, options);
      }

    </script>
</head>
<body>

{% block tab_menu %}
   {{ block.super }}

<h2> QA Dashboard</h2>

 <div id="velocity_chart"></div>


{% endblock tab_menu %}
</body>
</html>

base.html文件中的代码在其他模板上也可以正常工作，但不会在子模板中加载图表。

也可以在不使用导航栏的情况下很好地加载图表

在child.html中{% extends "KPI/base.html" %}的编辑位置

Answer 1

这是因为扩展时，{% block %}标记上方的任何内容都不会插入到base.html中。您需要创建{% block %}标签来封装脚本，以将其插入base.html。

扩展模板时，block标签之外的所有内容都会被丢弃。

添加了一个示例：

[[base.html]]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% block script %}  <!-- add matching block to contain insert -->
    {% endblock %}
</head>
<body>

{% block tab_menu %}
 <div class="topnav">
  <a href="/index">Home</a>
  <a href="/index/devops">Devops</a>
  <a href="/index/qa">QA</a>
  <a href="/index/frontend">Frontend</a>
     <a href="/index/middleware">Middleware</a>
     <a href="/index/portal">Portal</a>
  <
</div>
{% endblock tab_menu %}


</body>
</html>

[[child.html]]

<!DOCTYPE html>
{% extends "base.html" %}
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <!--  add block tag (along with endblock below) to insert your script -->
    {% block script %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
             google.charts.load("current", {packages:["corechart"]});
             google.charts.setOnLoadCallback(VelocityChart);
             function VelocityChart() {
               var data = google.visualization.arrayToDataTable([
                 ['Status', 'Number of Tasks'],
                 ['Completed', {{completed_velocity}}],
                 ['Incompleted',  {{incomplete_velocity}}],
                ]);

                var options = {
                   title: '',
                   is3D: true,
                 };

               var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));
        chart.draw(data, options);
      }

    </script>
    {% endblock %}
</head>
<body>

{% block tab_menu %}
{{ block.super }}

<h2> QA Dashboard</h2>

 <div id="velocity_chart"></div>


{% endblock tab_menu %}
</body>
</html>

Django扩展标签使JS图表无法加载

1 个答案: