html 模板模板使用技巧

Posted 2021-05-10

{% extends "base.html" %}

{% block content %}
    <div class='container'>
        <div class='row'>

    {% for obj in object_list %}
    <div class='col'>
        <!-- 这个 card.html 就是从bootstrap上复制下来的片段 -->
        {% include 'products/snippets/card.html' with instance=obj %}      
        </div>  
    {% endfor %}
</div>
</div>
{% endblock %}

{% url 'home' as home_url %}
{% url 'contact' as contact_url %}
{% url 'products:list' as product_list_url %}
{% url 'login' as login_url %}
{% url 'register' as register_url %}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ home_url }}">{% if brand_name %} {{brand_name }} {% else %}CFE eCommerce {% endif %}</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item {% if request.path == home_url %}active{% endif %}">
            <a class="nav-link" href="{{ home_url }}">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <!-- 这里通过url路径来判断相关导航栏是否要高亮 -->
            <li class="nav-item {% if request.path == contact_url %}active{% endif %}">
                <a class="nav-link" href="{{ contact_url }}">Contact</a>
            </li>
            <li class="nav-item {% if request.path == product_list_url %}active{% endif %}">
                <a class="nav-link" href="{{ product_list_url }}">Products</a>
            </li>
            {% if request.user.is_authenticated %}
            <li class="nav-item {% if request.path == login_url %}active{% endif %}">
                <a class="nav-link" href="{{ login_url }}">Logout</a>
            </li>
            {% else %}
            <li class="nav-item {% if request.path == register_url %}active{% endif %}">
                <a class="nav-link" href="{{ register_url }}">Register</a>
            </li>
            <li class="nav-item {% if request.path == login_url %}active{% endif %}">
                <a class="nav-link" href="{{ login_url }}">Login</a>
            </li>
            {% endif %}
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>