时间戳

首页 > 解决方案 > 如何使用 Jinja2 删除移动和桌面中重复的模板继承？

html - 如何使用 Jinja2 删除移动和桌面中重复的模板继承？

问题描述

问题

问题

开发环境

有人可以解决我的问题吗？此致，

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 %}

标签： htmlflaskbootstrap-4jinja2

解决方案

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

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

而要为移动和网络添加重复块，您只需为移动和桌面添加一个代码块，并根据屏幕尺寸在其父容器上添加/更新类。

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

推荐阅读