代码之家 › 专栏 › 技术社区 › Tom Finet

Javascript在django模板中不起作用

django-templates django html javascript

Tom Finet · 技术社区 · 7 年前

我有一个模板,它继承了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>

{% 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被包括进来?

2 回复 | 直到 7 年前

Geoffrey Nyaga 7 年前

在你的基本.html您有{%block js%}{%endblock%},但在第二个模板中,您有{%block js%}{%endblock js%}。

Lemayzeur 7 年前

您正试图从访问静态文件 static

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

而在您的设置中,您命名了静态目录 static_local

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

根据这张图片:

静止的 .
所以在你的 settings.STATICFILES_DIRS ,更换具有如下所示:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

7 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

7 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前