Как удалить дублированное наследование шаблонов в Mobile и Desktop с Jinja2? - PullRequest
Новая
       15

Как удалить дублированное наследование шаблонов в Mobile и Desktop с Jinja2?

0 голосов
/ 29 января 2019

Проблема

  • Мой код имеет навигацию только для мобильных устройств.
  • Я хочу удалить дублирующееся наследование шаблонов в Mobile (sm) и Desktop (md lg).
  • Следующий код {% block main_content%} {% endblock%} дублирован и содержит множество графиков.

Вопрос

  • Как удалить дубликатынаследование шаблона?

Среда разработки

  • Bootstrap4
  • Jija2 (Flask или responseer)

Есть ли у кого-нибудь решениедля моей проблемы?С уважением,

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

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Медиа-запрос состоит из необязательного типа мультимедиа (all, handheld, print, TV и т. Д.) И любого количества необязательных выражений, которые ограничивают время запуска запроса, таких как ширина, плотность пикселей или ориентация.Медиа-запросы являются частью CSS3 и позволяют разработчикам настраивать свой контент для различных представлений своего контента.

Для мобильного использования: 

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

То же для настольного компьютера, но разной ширины.

0 голосов
/ 29 января 2019

Вам нужно удалить дублирующийся код ниже кода 

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

И вместо того, чтобы перейти к добавлению дублирующих блоков для мобильных устройств и в Интернете, вам просто нужно добавить один блок кода для мобильных и настольных компьютеров и добавить / обновитьклассы в его родительском контейнере на основе размеров экрана.

у нас есть объект javascript window.navigator.platform, который дает вам платформу, которую вы используете.На основе этой платформы и window.innerWidth вы можете добавлять / обновлять классы вашего графического контейнера.

...