Bootstrap scrollSpy不适用于Django模板

问题描述

我使用wagtail CMS在django博客上工作。最近，我承诺在博客帖子页面上添加bootstrap scrollSpy，以在与读者所在的部分有关的侧边目录中突出显示标题。

我遵循bootstrap tutorial尝试html数据方式和javascript方式，但是我的目录在某些页面上仅高亮显示第一项，有时仅在最后亮点，在某些页面上它有效并且有时从不亮突出。因此，我搜索其他问题的答案，但没有答案可以解决我的问题。

可能是我的问题来自我的django / wagtail模板，看起来像这样：

在base.html中：

    <head>
        <link rel="stylesheet" href="https://bootswatch.com/4/minty/bootstrap.min.css" crossorigin="anonymous">
    </head>
    <body class="{% block body_class %}{% endblock %}">
        <div class="col-md-9">
            {% block content %}
                {# Where blog post content is #}
            {% endblock %}
        </div>
        <div class="col-md-3">
            <div class="position-fixed">
                {% block side_widget %}
                    {# Where table of contents is #}
                {% endblock side_widget%}
            </div>                  
        </div>
        
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        {% block extra_js %}
            {# Override this in templates to add extra javascript #}
        {% endblock %}
    </body>

在包括base.html的blog_page.html中：

{% extends "base.html" %}

{# Blog contents all blocks (heading and paragraph) have a unique  html id #}
{% block content %}
    {% for block in page.body %}
        {% include_block block with id=block.id %}
    {% endfor %}
{% endblock content %}

{# Table of contents shows only blocks that are heading <h1> #}
{% block side_widget %}
    <nav id="blog-contents" class="navbar navbar-light bg-light flex-column">
        <a class="navbar-brand">Table des matières</a>
        <nav class="nav nav-pills flex-column">
            {% for block in page.body %}
                {% if block.block_type == 'heading' %}
                     <a class="nav-link" href="#{{ block.id }}">{{ block.value}}</a>
                {% endif %}    
            {% endfor %}
        </nav>
    </nav>
{% endblock side_widget %}

{# Scrollspy on the entire body with my navbar id as target #}
{% block extra_js %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('body').scrollspy({ 
                target: "#blog-contents",offset: 50 
            });
        });
    </script>
{% endblock %}

我尝试使用不同的浏览器Chrome，firefox，导航中的无序列表，但行为始终相同。

如果有人有答案，我将感激他。

PS：很抱歉我的英语不好

非常感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4 django django django-templates wagtail