0

カスタム JavaScript ファイルを含む DjangoCMS アプリに取り組んでいますが、templatetag render_block を使用した後に jQuery を使用すると問題が発生します。

ここに新しいプロジェクトを作成した後、私のプロジェクト構造は次のとおりです。

project/
    apps/
        myapp/
    static/
        js/
            custom.js
    templates/
        base.html
        header.html
        menu.html
    __init__.py
    settings.py
    urls.py

base.html

{% load cms_tags menu_tags sekizai_tags staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}This is my new project home page{% endblock title %}</title>
</head>
<body>
    <div>
        {% include "header.html" %}
        {% show_menu 0 100 100 100 "menu.html" %}
     </div>
    {% block content %}{% endblock content %}
    {% render_block "js" %}
    {% addtoblock 'js' %}
         <script type='text/javascript' src="{% static "js/bootstrap.min.js" %}"></script>
         <script type='text/javascript' src="{% static "js/custom.js" %}"></script>
    {% endaddtoblock 'js' %}
</body>
</html>

project/apps/myapp/templates/myapp/home.html

{% extends CMS_TEMPLATE %}
{% load cms_tags sekizai_tags staticfiles %}

{% block title %}Home{% endblock title %}
{% block content %}{% endblock content %}

home.htmlにはまだコンテンツがありません。ただし、base.html のコンテンツは適切にレンダリングされます。問題は、jQuery を使用するcustom.jsにあります。

custom.js

$(document).ready(function(){
    alert("Hi");
});

警告メッセージが表示されず、「undefined is not a function」というメッセージが表示されます。私を悩ませている主な問題は、jQuery がソース コードに含まれていることですが、使用できません。

ソースコード

<html>
...
<body>
    ....
    <script>
    var _jQuery = window.jQuery || undefined;
    var _$ = window.$ || undefined;
    </script>
    <script src="/static/cms/js/libs/jquery.min.js"></script>
    <script src="/static/cms/js/libs/class.min.js"></script>
    <script src="/static/cms/js/modules/jquery.ui.custom.js"></script>
    <script src="/static/cms/js/modules/jquery.ui.nestedsortable.js"></script>
    <script src="/static/cms/js/modules/cms.base.js"></script>
    <script src="/static/cms/js/modules/cms.modal.js"></script>
    <script src="/static/cms/js/modules/cms.sideframe.js"></script>
    <script src="/static/cms/js/modules/cms.clipboard.js"></script>
    <script src="/static/cms/js/modules/cms.plugins.js"></script>
    <script src="/static/cms/js/modules/cms.structureboard.js"></script>
    <script src="/static/cms/js/modules/cms.toolbar.js"></script>
    ...
    <script type='text/javascript' src="/static/js/custom.js"></script>
</body>
</html>

明らかに {% render_block "js" %} は正常に動作しますが、そのため、CMS.$ が $.$ に渡されることがわかりました。そのため、次のように追加しました。

<script> $ = CMS.$ </script>

私の上にaddtoblock：

{% addtoblock 'js' %}
    <script>$=CMS.$</script>
    <script type='text/javascript' src="{% static "js/bootstrap.min.js" %}"></script>
    <script type='text/javascript' src="{% static "js/custom.js" %}"></script>
{% endaddtoblock 'js' %}

アラートに関する私の問題は解決されましたが、Bootstrap はまだ jQuery がないと報告しています。

Bootstrap の JavaScript には jQuery が必要です

jQuery を追加addtoblockすると問題を解決できますが、ソース コードに同じ jQuery ファイルが 2 つあるため、これは不要です。ここで何が欠けていますか？

4

1 に答える 1