Меню навигации с использованием шаблонов Django - PullRequest
Новая
       9

Меню навигации с использованием шаблонов Django

6 голосов
/ 27 ноября 2009

Пытаясь работать с тривиальным меню навигации с помощью шаблонов django, у меня возникают проблемы при настройке текущего класса для определенного пункта меню. Вот мой базовый шаблон: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
 <title>{% block title %}{% endblock %}</title> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="/media/css/base.css" />
 <link rel="stylesheet" type="text/css" href="/media/css/login.css" />
 <link rel="stylesheet" href="/site_media/css/style.css" type="text/css" />
 <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/css/ie.css" /><![endif]-->
</head>
 <body class="{% block bodyclass %}{% endblock %}">
 {% block content %}{% endblock %} 
 {% block footer %}{% endblock %}
</body> 
</html>

Тогда у меня есть nav.html: 

 <ul id="top">
   <li><a class="{% block home %}{% endblock %}" href="/">Home</a></li>
   <li><a class="{% block myaccount %}{% endblock %}" href="/profile/">My Account</a></li>
   {% if perms.staffing.add_staffrequest %}
    <li><a class="{% block createsr %}{% endblock %}" 
     href="/create/staffrequest/">Staff Request</a></li>
   {% endif %}
  </ul>

А теперь в моем home.html я не могу отобразить текущий класс: 

{% extends "base.html" %}
{% block title %}Home Portal{% endblock %}
{% block content %}

<div id="content">
 {% include "nav.html" %}
    {% block home %}current{% endblock %} 
 <div id="intro">
  <p>Hello, {{ user.first_name }}.</p>
  <p>Please create a Staff Request here by filling out the form
  below.</p>
 </div> <!-- end intro -->
 <div id="logout">
  <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a>
 </div>
</div> <!-- end content -->

{% endblock %}

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

Ответы [ 3 ]

7 голосов
/ 27 ноября 2009

Я не думаю, что вы можете заменить блок из включенного шаблона. Я предлагаю вам переосмыслить логику ваших шаблонов. ИМХО, это должно быть примерно так:

base.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
 <title>{% block title %}{% endblock %}</title> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="/media/css/base.css" />
  <link rel="stylesheet" type="text/css" href="/media/css/login.css" />
  <link rel="stylesheet" href="/site_media/css/style.css" type="text/css" />
  <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/media/css/ie.css" /><![endif]-->
 </head>
  <body class="{% block bodyclass %}{% endblock %}">
  {% block content %}

     <div id="content">

         {% block navigation %}
             <ul id="top">
                <li><a class="{% block home %}{% endblock %}" href="/">Home</a></li>
                <li><a class="{% block myaccount %}{% endblock %}" href="/profile/">My Account</a></li>
                {% if perms.staffing.add_staffrequest %}
                 <li><a class="{% block createsr %}{% endblock %}" 
                  href="/create/staffrequest/">Staff Request</a></li>
                {% endif %}
             </ul>
         {% endblock %}

         {% block real_content %}
         <div id="intro">
             <p>Hello, {{ user.first_name }}.</p>
             <p>Please create a Staff Request here by filling out the form below.</p>
          </div> <!-- end intro -->

          <div id="logout">
           <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a>
          </div>
          {% endblock %}

     </div> <!-- end content -->


  {% endblock %} 
  {% block footer %}{% endblock %}
 </body> 
 </html>

и ваш home.html должен выглядеть как 

{% extends "base.html" %}
{% block title %}Home Portal{% endblock %}

{% block home %}current{% endblock %}


{% block real_content %}

<div id="content">

 <div id="intro">
  <p>Hello, {{ user.first_name }}.</p>
  <p>Please create a Staff Request here by filling out the form
  below.</p>
 </div> <!-- end intro -->
 <div id="logout">
  <a href="/accounts/logout" alt="Sign Off" title="Sign Off">Sign Off</a>
 </div>
</div> <!-- end content -->

{% endblock %}
2 голосов
/ 27 ноября 2009

Другой способ справиться с этим - просто использовать body.class в файле CSS ...

nav.html 

 <ul id="top">
   <li><a class="home" href="/">Home</a></li>
   <li><a class="myaccount" href="/profile/">My Account</a></li>
   {% if perms.staffing.add_staffrequest %}
    <li><a class="createsr" 
     href="/create/staffrequest/">Staff Request</a></li>
   {% endif %}
  </ul>

home.html 

{% block bodyclass %}home{% endblock %}

ваш файл CSS 

body.home li.home { font-weight: bold; color: blue; }
body.myaccount li.myaccount { font-weight: bold; color: blue; }
body.createsr li.createsr { font-weight: bold; color: blue; }

Это ломает DRY, но иногда это проще, чем возиться с некоторыми безумными заблокированными шаблонами.

0 голосов
/ 21 марта 2012

Вы можете решить проблему дублирования, используя тег шаблона меню DRY menu. Это решает проблему активного / неактивного класса меню тоже. Смотрите описание ниже, пожалуйста. Исходный код: http://djangosnippets.org/snippets/2722/

Описание тега шаблона меню СУХОЙ.

Это описание пользовательского тега шаблона для создания СУХОГО меню. Это решает проблему дублирования разметки в шаблонах вашего сайта. В меню всегда есть одна активная опция и одна или несколько неактивных опций.

КАК ИСПОЛЬЗОВАТЬ

Определите структуру вашего меню в родительском шаблоне: 

{% defmenu "menu1" %}

{% active %}<span class='active'>{{text}}</span>{% endactive %}
{% inactive %}<a href='{{url}}'>{{text}}</a>{% endinactive %}

{% opt "opt1" "/opt1/" %}Go to opt1{% endopt %}
{% opt "opt2" "/opt2/" %}Go to opt2{% endopt %}
{% opt "opt3" "/opt3/" %}Go to opt3{% endopt %}

{% enddefmenu %}

У меню есть свое имя (первый параметр тега 'defmenu'.

Первый параметр тега «opt» - это имя пункта меню. « text » внутри «active» / «inactive» будет заменен внутренним текстом тега «opt» (Перейти к opt ...), « url » независимо «активный» / «неактивный» будет заменен вторым параметром тега «opt»

Чтобы создать меню с одной выбранной опцией в дочернем шаблоне, выполните: 

{% menu "menu1" "opt1" %}

Здесь: «menu1» - это название меню, которое было определено тегом «defmenu», опция «opt1» выбрана.

Результат применения меню выглядит следующим образом: 

<span class='active'> Go to opt1</span> <a href='"/opt2/"'>Go to opt2</a> <a href='"/opt3/"'>Go to opt3</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...