I am developing a Django application, i had some problem,
I hope to do the following effects on Django,
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Django Code,
<div id='cssmenu'>
{% for child in children %}
{% cycle 'active' 'last' as cssmenu silent %}
<li class="{{ cssmenu }}">
{{ child.get_menu_title }}
{% if child.children %}
<ul>
{% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
</ul>
{% endif %}
</li>
{% endfor %}
</div>
Could you help me?
That's not what cycle is for: it's for alternating between two or more alternatives. You don't want that at all.
Instead, just use the forloop attributes:
{% for child in children %}
<li class="{% if forloop.first %}active{% elif forloop.last %}last{% endif %}">...</li>
{% endfor %}
Although I suppose you don't want the first one to always be active, but you haven't given any information about how you do want to determine where 'active' goes.
Related
I am working on FAQs page where questions and answers are passed to a template sections based on their categories. I would like to reduce amount of html and use section div as a template
<div id="{{id}}">
<div class="h2">{{category}}</div>
{% for q in faqs %}
{% if q.category == '{{category}}' %}
<ul class="collapsible">
<li>
<div class="collapsible-header">{{q.question}}></div>
<div class="collapsible-body"><span>{{q.answer}}</span></div>
<div class="divider"></div>
</li>
</ul>
{% endif %}
{% endfor %}
</div>
My main html contains following code:
{% with id='m_faq'%}
{% with category='Methodology'%}
{% include 'main/faqs_section.html' %}
{% endwith %}{% endwith %}
I am only able to pass variables id and category.
Is there a way to the for loop as well?
I think the solution would be to create a list for categories in views.py
cat = [ 'Category1', 'Category2', 'Category3','Category4']
pass it to context dictionary and then put additional 'for loop' around section div.
{% for c in cat %}
<div id="">
<div class="h4">{{c}}</div>
{% for q in faqs %}
{% if c == q.category %}
<ul class="collapsible">
<li>
<div class="collapsible-header">{{q.question}}</div>
<div class="collapsible-body"><span>{{q.answer}}</span></div>
<div class="divider"></div>
</li>
</ul>
{% endif %}
{% endfor %}
</div>
{% endfor %}
That will generate a template with list of faqs divided in to sections..
I have following mezzanine tree.html
{% if page_branch_in_menu %}
<ul class="nav nav-list navlist-menu-level-{{ branch_level }}">
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or not page.is_primary %}
<li class="
{% if page.is_current %} active{% endif %}
{% if page.is_current_or_ascendant %} active-branch{% endif %}
" id="tree-menu-{{ page.html_id }}">
{{ page.title }}
{% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
In the base.html I have following block:
<div class="col-md-2 left">
{% block left_panel %}
<div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
{% endblock %}
</div>
The problem is that on some pages where the menu is empty the css styles are applied to the divs with empty menu lists and users can observe empty containers. In html it looks like:
<div class="col-md-2 left">
<div class="panel panel-default tree">
<ul class="nav nav-list navlist-menu-level-0"></ul>
</div>
</div>
I can hide the child ul with something like .nav:empty { display:none;} but the parent will still be visible. Here is the discussion about similar question: :empty selector for parent element
Is it possible to solve this problem with Mezzanine template tags?
{% if page_branch %} doesn't help because it's full of pages which are all not in_menu.
So better filter them before context.
menu_pages = page_branch.filter(in_menu=True)
Also you should put if block on top of div.tree
{% if menu_pages %}
<div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
{% endif %}
Another way is to write custom filter
{% with menu_pages=page_branch|filter_in_menu %}
{% if menu_pages %}
...
{% endif %}
{% endif %}
But there is no way to apply extra filter to queryset with built-in syntax or Mezzanine tags.
You could wrap the code with an if tag.
{% if page_branch %}
<ul>
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or not page.is_primary %}
<li>
{% if not page.is_primary %}
{{ page.title }}
{% endif %}
{% page_menu page %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
i would like to create an index of lists in jekyll of all tags and the corresponding posts.
My first approach, for-loops for every tag:
<h4>FRUITY</h4>
{% for post in site.tags.fruity %}
<ul class="posts">
<li>
{{ post.title }}
</li>
</ul>
{% endfor %}
<h4>SWEET</h4>
{% for post in site.tags.sweet %}
<ul class="posts">
<li>
{{ post.title }}
</li>
</ul>
{% endfor %}
...
This WORKS, but i have to manually create a new for-loop for every new tag.
My second approach, one loop to automatize this step so i dont have to worry about new or removed tags:
{% for tag in site.tags %}
<div class="medium-6 large-3 columns list-view-all">
<h4>{{ tag | first | upcase}}</h4>
{% for post in site.posts contains tag %}
<ul class="posts">
<li>
{{ post.title }}
</li>
</ul>
{% endfor %}
</div>
{% endfor %}
The first part works, every tag becomes a header.
in the inner for-loop ALL posts containing any tag get listed. So the lists for every tag are equal.
The Question:
How can i make a list for every tag with only the posts corresponding to the respective tag?
Thanks for your help!
{% for tag in site.tags %}
<div class="medium-6 large-3 columns list-view-all">
{% assign currentTag = tag | first %}
<h4>{{ currentTag | upcase}}</h4>
{% for post in site.posts %}
{% if post.tags contains currentTag %}
<ul class="posts">
<li>
{{ post.title }}
</li>
</ul>
{% endif %}
{% endfor %}
</div>
{% endfor %}
Hi i've been looking all over and can't find the answer to this. I have only 3 months experience in using python/django so excuse my dummy quesion!
Im using django mptt to display a simple nested set navigation.
<ul class="root">
{% recursetree nodes %}
<li>
{{ node.name }}
{% if not node.is_leaf_node %}
<ul class="children">
{{ children }}
</ul>
{% endif %}
</li>
{% endrecursetree %}
this works fine - however i would like to show only children of the selected category (based on slug) and not all of them.
Any ideas ???
i finally did it like this:
{% recursetree nodes %}
<li>
<a href='/{{ node.get_absolute_url}}'>{{ node.name }}</a>
</li>
{% if not node.is_leaf.node %}
{% for c in child %}
{% if c in node.get_children %}
{% if forloop.first %}
<ul class="children">
{{ children }}
</ul>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endrecursetree %}
in views
category = get_object_or_404(Category, slug=slug)
child = category.get_children()
if not child :
child = category.get_siblings()
but it is a hack. has anyone got better idea?
You need to send down some information about what node you're in, and then it's a simple if statement.
Regarding how to send down the node information universally, there are a couple ways to do this in Django, and none of them are perfect. My preferred method is context processors: http://docs.djangoproject.com/en/1.3/ref/templates/api/#writing-your-own-context-processors
{% recursetree nodes %}
<li>
{{ node.name }}
{% if node.name == category.name %}
<ul>
{{ children }}
</ul>
{% endif %}
<li>
{% endrecursetree %}
You can try this:
{% recursetree nodes %}
#check if the node is a child node
{% if node.is_child_node %}
<a href="{{ node.get_absolute_url }}" >{{ node.name }}</a>
{% endif %}
#check if a root node is the current category
{% if node.is_root_node and node.name == category.name %}
{{ children }}
{% endif %}
{% endrecursetree %}
When there is a dictionary:
menu = {'title': 'Link1',
'children': {'title': 'Child of Link1',
'children': #etc..}
}
How would one iterate over it so that the output becomes:
<ul>
<li>Link1
<ul>
<li>Child of Link 1
<ul>
<li>Grandchild of Link 1
<ul>etc..</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Currently I use this, but it obviously only goes to a depth of one.
<ul id="mainnavigation">
{% for k,v in admin.items %} #ContextProcessor, because this menu needs to know the current path.
<li class="expandable">{{ v.title }}
{% if v.children != None %}
<ul>
{% for id,child in v.children.items %}
<li class="expandable">{{ child.title }}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
One way would be to manually repeat the loop for each level, however such a solution is ugly and I am hoping there is a more DRY one.
You'll have to make custom template tag for this. I would choose inclusion tag.
{% for k,v in var %}
{% my_tag v.children %}
{% endfor %}
If you already know that every part is just going to have title & children for each, why not just do nested tuples? You can then just use the built in filter, unordered_list.
So, it'd be:
menu = (Link 1 (Child of Link 1 (Grandchild of Link 1 (...) )))
and
<ul id="mainnavigation">
{{ menu|unordered_list }}
</ul>