Question

问题

我的代码仅对移动设备具有导航。
我想删除Mobile（sm）和Desktop（md lg）中重复的模板继承。
下面的{％block main_content％} {％endblock％}代码已重复并且包含许多图形。

问题

如何删除重复的模板继承？

开发环境

Bootstrap4
Jija2（烧瓶或响应者）

有人可以解决我的问题吗？最好的问候，

template_parent.html

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
</head>

<body>

  <ul class="nav nav-tabs d-md-none d-sm-block" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    {% block main_content %}
    {% endblock %}
    </div>
  </div>

  <div class="d-none d-md-block">
    {% block main_content %}
    {% endblock %}
  </div>

</body>

</html>

child.html

{% extends "layout/main.html" %}

{% block main_content %}
a lot of graphs
{% endblock %}

Answer 1

您需要删除代码下方的重复代码

<div class="d-none d-md-block">
    {{Foo}}
</div>

要添加用于移动设备和Web的重复块，您只需添加一个用于移动设备和台式机的代码块，并根据屏幕尺寸在其父容器上添加/更新类。

我们有一个JavaScript对象window.navigator.platform，它为您提供了您正在使用的平台。基于该平台和window.innerWidth，您可以添加/更新图形容器的类。

Answer 2

媒体查询由可选媒体类型（所有，手持式，印刷，电视等）和任意数量的可选表达式组成，这些表达式限制了查询触发的时间，例如宽度，像素密度或方向。媒体查询是CSS3的一部分，使开发人员可以针对其内容的不同表示来自定义其内容。

用于移动应用：

@media only screen 
  and (min-device-width: 320px) {
     your code {
           display: none;
 }
}

与台式机相同，但宽度不同。

如何使用Jinja2在Mobile和Desktop中删除重复的模板继承？

问题

问题

开发环境

2 个答案: