Динамические HTML-шаблоны с PureCSS - PullRequest
Новая
       26

Динамические HTML-шаблоны с PureCSS

0 голосов
/ 05 марта 2019

Я создаю веб-приложение, используя колбу.Я обнаружил, что снова и снова повторяю одно и то же с небольшим изменением каждой из моих HTML-страниц, поэтому хочу превратить его в шаблон.Как я могу сделать его динамическим шаблоном?Ниже приведен код, который я использую для моей страницы ABOUTUS , которая на одну строку отличается от моей страницы CONTACT .

О нас Заголовок страницы: 

 <div id="menu">
<div class="pure-menu">
    <a class="pure-menu-heading" href="#">WebAPP</a>

    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item menu-item-divided pure-menu-selected"><a href="/aboutus" class="pure-menu-link">About</a></li>
        <li class="pure-menu-item"><a href="/membership" class="pure-menu-link">Membership</a></li>
        <li class="pure-menu-item"><a href="/contact" class="pure-menu-link">Contact</a></li>
        {% if current_user.is_authenticated %}
            <li class="pure-menu-item"><a href="{{ url_for('logout') }}" class="pure-menu-link">Log out</a></li>
        {% else %}
            <li class="pure-menu-item"><a href="/login" class="pure-menu-link">Log in</a></li>
        {% endif %}
    </ul>
</div>

Заголовок страницы контакта: 

 <div id="menu">
    <div class="pure-menu">
        <a class="pure-menu-heading" href="#">WebAPP</a>

        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="/aboutus" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="/membership" class="pure-menu-link">Membership</a></li>
            <li class="pure-menu-item menu-item-divided pure-menu-selected"><a href="/contact" class="pure-menu-link">Contact</a></li>
            {% if current_user.is_authenticated %}
                <li class="pure-menu-item"><a href="{{ url_for('logout') }}" class="pure-menu-link">Log out</a></li>
            {% else %}
                <li class="pure-menu-item"><a href="/login" class="pure-menu-link">Log in</a></li>
            {% endif %}
        </ul>
    </div>
</div>

Единственное изменение заключается в том, что я перемещаю menu-item-divided pure-menu-selectedлиния от одной строки к другой в зависимости от того, какой шаблон я загружаю.Я не могу придумать способ сделать это динамически, чтобы я мог превратить это в шаблон, который я могу просто расширить для каждого файла.

1 Ответ

0 голосов
/ 05 марта 2019

Вы можете просто использовать стандартное наследование шаблонов jinja, как упомянуто в комментарии выше.

Документы здесь: Наследование шаблонов

Метод 1:

Метод импорта request в файле routes.py,

Используйте условие jinga if, чтобы проверить, указывает ли страница на текущую конечную точку URL. 

<li class="pure-menu-item{% if request.path == '/contact'} menu-item-divided pure-menu-selected{% endif %}"><a href="/contact" class="pure-menu-link">Contact</a</li>

Совет: Вместо жестких кодировок URL можно использовать динамическое изменение URL-адреса колбы {{ url_for('contact') }}.

Метод 2: (рекомендуется)

Это неотносится к фляге jinja, но выполняет работу, как и предполагалось, во внешнем интерфейсе, но использует JavaScript с библиотекой jQuery.

Добавьте этот сценарий в конец шаблона перед закрытием тега body.

jQuery версия 

<script>
let current_path = "{{ request.path }}"
if (current_path === window.location.pathname) {
    $(".pure-menu-item a[href='"+current_path+"']")
    .prop("href", "#").closest('li')
    .addClass("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>

Ванильный JS (обычный js) 

<script>
    let current_path = "{{ request.path }}"
    let current_nav = document.querySelctor("div.pure-menu-item a[href='"+current_path+"']");
    if (current_path === window.location.pathname) {
        current_nav.setAttribute("href", "#");
        current_nav.closest('li').classList.add("pure-menu-item menu-item-divided pure-menu-selected");
    }
</script>

Что он делает?

Если текущийurl соответствует URL, указанному в навигации выше, он добавляет класс menu-item-divided pure-menu-selected к div и отключает текущую маршрутизацию url, заменяяфактический URL-адрес #.

Чисто и элегантно.

Почему?

Если вы используете JavaScript, вы неВам не нужно определять сотни {% if... %} в бэк-энде, те операторы if, которые вы определили в бэк-энде, будут проверяться на каждой странице, загружаемой пользователем, кроме того, вы просто сохранили на if с и else спроверить, является ли загруженная страница страницей навигационной ссылки и отключить маршрутизацию, изменив URL на #.Ух ты только что спас миллионы циклов процессора.: -)

...