Javascript 在 django 模板中不起作用答案

【问题标题】：Javascript doesn't work in django templateJavascript 在 django 模板中不起作用
【发布时间】：2018-05-20 14:09:44
【问题描述】：

我有一个模板继承自 javascript 中的基本模板。

这是基本模板：

{% load static %}
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{% block title %}{% endblock %}</title>

    {% include 'base/css.html' %}
    {% block head %}{% endblock %}

  </head>

  <body id="page-top">

    {% include 'base/navbar.html' %}

    {% block content %}{% endblock %}

    {% include 'base/js.html' %}
    {% block js %}{% endblock %}

  </body>
</html>

这是 javascript 不起作用的模板：

{% extends 'base.html' %}
{% load static %}

{% block head %}
<link href="{% static 'css/card.css' %}" rel="stylesheet"></link>
{% endblock %}

{% block content %}

<div class="card-wrapper">
    {% for account in object_list %}
    <div id="make-3D-space">
        <div id="product-card">
            <div id="product-front">
                <div class="shadow"></div>
                <img src="" alt="" />
                <div class="image_overlay"></div>
                <div id="view_details"><a href="{{ account.get_absolute_url }}">View details</a></div>
                <div class="stats">         
                    <div class="stats-container">
                        <span class="product_price">{{ account.price }}</span>
                        <span class="product_name">{{ account.get_arena_readable }}</span>    
                        <p>King level {{ account.king_tower }}</p>                                            

                        <div class="product-options">
                            <strong>SIZES</strong>
                            <span>XS, S, M, L, XL, XXL</span>
                            <strong>COLORS</strong>
                            <div class="colors">
                                <div class="c-blue"><span></span></div>
                                <div class="c-red"><span></span></div>
                                <div class="c-white"><span></span></div>
                                <div class="c-green"><span></span></div>
                            </div>
                        </div>                          
                    </div>
                </div>  
            </div>  
        </div>  
    </div>
    {% endfor %}
</div>

{% endblock %}

{% block js %}
<script src="{% static 'js/card.js' %}"></script>
{% endblock js %}

css 可以正常加载，但 javascript 不能。我已将 javascript 标记放在正确的块中，因此当我运行本地开发服务器时应该加载文件的内容。为什么没有包含任何 javascript？

它似乎是包含的，因为 card.js 存在。

【问题讨论】：

您可以添加您的设置吗？您在哪里配置静态路径
STATIC_URL = '/static/'STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static_local'), ]STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn', 'static_root')MEDIA_URL = '/media/'MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn', 'media_root')

标签： javascript html django django-templates

【解决方案1】：

同样在你的 base.html 你有 {% block js %}{% endblock %} 但在第二个模板你有 {% block js %}{% endblock js %}。

【讨论】：

src与card.js无关，是一个单独的目录

【解决方案2】：

您正在尝试从static 目录访问静态文件，如下所述：

<script src="{% static 'js/card.js' %}"></script>

而在您的设置中，您已将静态目录命名为 static_local

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static_local'),
]

所以根据这张图：

您的静态目录的名称是static。
因此，在您的 settings.STATICFILES_DIRS 中，将 static_local 替换为 static，如下所示：

STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]

【讨论】：

但如果这是问题所在，css不会也加载不出来吗？因为它在同一个静态目录中，但它确实如此。
你可以看看你的控制台，看看django是否很好地找到了静态文件