Question

我开发了一个带有固定顶部导航栏的Django应用程序，但在单击菜单项时有时会闪烁/刷新。我是否在扩展模板时犯了错误，或者是导致这种情况的其他原因？

以下是部署的应用，您可以看到它：http://azeribocorp.pythonanywhere.com/index/

__ base.html文件：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>
        {% block stylesheets %}         {% endblock stylesheets %}  
        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB" >
            {% include 'aztracker/_topnavbar.html' %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}
    </body>
</html>

search_form.html：

{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}

{% block stylesheets %}                 
    <link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <section class="search_section">
            <form  method="POST" action="/search/">         
                {% csrf_token %}
                <input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
                <button id="search_btn" class="flat_button">Search</button>
            </form>
        </section>

        <!-- view all country codes link -->
        <div class="wrapper">
            <a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
        </div>
    {% endblock main_col %} 
{% endblock content %}

_topnavbar.html：

{% load static %}
{% load staticfiles %}


{% block stylesheets %} 
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
{% endblock %}


<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
    <ul class="nav-items">
        <li class="{% if request.resolver_match.url_name == 'index' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'index' %} class='nav-link'><span>Home</span></a>
        </li>
        <!--<li class="nav-item">
            <a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
        </li>-->
        <li class="{% if 'track_containers' in  request.resolver_match.url_name  %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
        </li>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                </ul>
            </nav>
        </li> 
        <li class="{% if request.resolver_match.url_name == 'search' %}
                nav-item active
            {% else %}
                nav-item 
            {% endif %}"> 
            <a href={% url 'search' %} class='nav-link'><span>Search</span></a>
        </li>
        <li class="{% if request.resolver_match.url_name == 'report' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'report' %} class='nav-link'><span>Report</span></a>
        </li>

        <li class="nav-item dropdown">
            <a href="#" class="nav-link" id="dd-more"><span>More</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="{% url 'about' %}" class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href={% url 'contact_us' %} class="submenu-link">Contact us</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li> 

        <!--
        <li class="{% if 'more' in request.resolver_match.url_name  %}
                nav-item dropdown active
            {% else %}
                nav-item dropdown
            {% endif %}"> 
            <a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href={% url 'about'%} class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href={% url 'contact_us'%} class="submenu-link">Contact</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href={% url 'support'%} class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href={% url 'faqs'%} class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li> -->
    </ul>
</nav>

{% block js %}
    <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock js %}

__ base.html [编辑1]：

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>

        <!-- styles and js required for topnavbar -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>

        {% block stylesheets %}     {% endblock stylesheets %}  

        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB">
            {% block topnavbar %}
                {% include 'aztracker/_topnavbar.html' %}
            {% endblock topnavbar %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}
    </body>
</html>

search_form.html [编辑1]：

{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}

{% block stylesheets %}                 
    <link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <section class="search_section">
            <form  method="POST" action="/search/">         
                {% csrf_token %}
                <input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
                <button id="search_btn" class="flat_button">Search</button>
            </form>
        </section>

        <!-- view all country codes link -->
        <div class="wrapper">
            <a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
        </div>
    {% endblock main_col %} 
{% endblock content %}

_topnavbar.html [编辑1]：

{% load static %}
{% load staticfiles %}

{% block topnavbar %}
    <!--Top Navigation-->
    <nav role="navigation" class="nav" id="topnav">
        <ul class="nav-items">
            <li class="{% if request.resolver_match.url_name == 'index' %}
                    nav-item active
                {% else %}
                    nav-item
                {% endif %}"> 
                <a href={% url 'index' %} class='nav-link'><span>Home</span></a>
            </li>
            <!--<li class="nav-item">
                <a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
            </li>-->
            <li class="{% if 'track_containers' in  request.resolver_match.url_name  %}
                    nav-item active
                {% else %}
                    nav-item
                {% endif %}"> 
                <a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
            </li>
                <nav class="submenu">
                    <ul class="submenu-items">
                        <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                    </ul>
                </nav>
            </li> 
            <li class="{% if request.resolver_match.url_name == 'search' %}
                    nav-item active
                {% else %}
                    nav-item 
                {% endif %}"> 
                <a href={% url 'search' %} class='nav-link'><span>Search</span></a>
            </li>
            <li class="{% if request.resolver_match.url_name == 'report' %}
                    nav-item active
                {% else %}
                    nav-item
                {% endif %}"> 
                <a href={% url 'report' %} class='nav-link'><span>Report</span></a>
            </li>

            <li class="nav-item dropdown">
                <a href="#" class="nav-link" id="dd-more"><span>More</span></a>
                <nav class="submenu">
                    <ul class="submenu-items">
                        <li class="submenu-item"><a href="{% url 'about' %}" class="submenu-link">About</a></li>
                        <li class="submenu-item"><a href={% url 'contact_us' %} class="submenu-link">Contact us</a></li>
                        <li class="submenu-item"><hr class="submenu-seperator" /></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                    </ul>
                </nav>
            </li> 

            <!--
            <li class="{% if 'more' in request.resolver_match.url_name  %}
                    nav-item dropdown active
                {% else %}
                    nav-item dropdown
                {% endif %}"> 
                <a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
                <nav class="submenu">
                    <ul class="submenu-items">
                        <li class="submenu-item"><a href={% url 'about'%} class="submenu-link">About</a></li>
                        <li class="submenu-item"><a href={% url 'contact_us'%} class="submenu-link">Contact</a></li>
                        <li class="submenu-item"><hr class="submenu-seperator" /></li>
                        <li class="submenu-item"><a href={% url 'support'%} class="submenu-link">Support</a></li>
                        <li class="submenu-item"><a href={% url 'faqs'%} class="submenu-link">FAQs</a></li>
                    </ul>
                </nav>
            </li> -->
        </ul>
    </nav>
{% endblock topnavbar %}



{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>

        <!-- styles and js required for topnavbar -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        {% block stylesheets %}     {% endblock stylesheets %}  

        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB">
            {% block topnavbar %}
                {% include 'aztracker/_topnavbar.html' %}
            {% endblock topnavbar %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}

        {% block extra-js %}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        {% endblock extra-js %} 

    </body>
</html>

__ base.html [编辑2]：

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>

        <!-- styles and js required for topnavbar -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        {% block stylesheets %}     {% endblock stylesheets %}  

        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB">
            {% block topnavbar %}
                {% include 'aztracker/_topnavbar.html' %}
            {% endblock topnavbar %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}

        {% block extra-js %}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        {% endblock extra-js %} 

    </body>
</html>

Answer 1

如果您将使用WebDeveloperTools / Inspector或类似工具，那么您会注意到在_tophavbar.html中重写样式表块不起作用。 Js和css包含在体内。

这是因为你包括 _topnavbar.html到_base.html（没有扩展名）。这意味着_topnavbar.html现在没有关于_base.html模板中 stylesheets 块的任何内容。

您可以将菜单js和css移动到顶部模板。第二种解决方案是实现不同的模板继承__base.html - ＆gt; __base_with_menu.html - ＆gt; search_form.html

P.S。您还定义了 js 块，因此您可能希望在其中包含js文件而不是样式表。

Django：单击菜单项

1 个答案: