I'm trying to get bootstrap 4 dev tabs working with a for loop in jinja2.
Here's the test code I'm trying:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for e in range(1,3) %}
<li class="nav-item">
<a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ e }}" role="tab"
data-toggle="tab">{{ e }}</a>
</li>
{% endfor %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{% for e in range(1,3) %}
<div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
id="{{ e }}">{{ e }}</div>
{% endfor %}
</div>
The nav tabs function as expected, two tabs are visible, "1" and "2", and the active class is correctly applied.
However the content tabs do not change when clicking between nav tabs. The content tab is static on "1".
Changing the loop.index condition to loop.index == 2 means the tab content is static on "2".
What am I missing here?
Thanks.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for club in clubs %}
<li class="nav-item">
<a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ club }}" role="tab"
data-toggle="tab">{{ club }}</a>
</li>
{% endfor %}
<!-- Tab panes -->
<div class="tab-content">
{% for club in clubs %}
<div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
id="{{ clubs }}">{{ clubs }}</div>
{% endfor %}
Changing the for loop from a range to the actual NDB datastore query worked.
Related
{% for category in categories %}
{% if request.get_full_path == '/?category={{category.0}}' %}
{{ category.0 }}
<li class="nav-item active">
<span class="sr-only">(current)</span>
<a class="nav-link" href="/?category={{ category.0 }}">{{ category.1 }}</a>
</li>
{% else %}
{{request.get_full_path}}
/?category={{category.0}}
<li class="nav-item">
<span class="sr-only">(current)</span>
<a class="nav-link" href="/?category={{ category.0 }}">{{ category.1 }}</a>
</li>
{% endif %}
{% endfor %}
I want to highlight navigation buttons, but {% if %} statement can't see {{category.0}} expression inside.
Can I use {{}} inside {% if %} statement in jinja?
No you can use your return variable in {% if %}
Without {{}}
stack community I'm completely an amateur in HTML, Liquid, Adx, in short programming and applying logic, don't have great understanding.
Im not sure why the <span> Test2 </span> is appearing 2x, as you can see from the image,
I want to achieve the following, Test2 new name? as one text and the left Test2 don't want it to be displayed. Please advise.
{% assign homeurl = website.adx_partialurl %}
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
{% assign primary_nav = weblinks["Primary Navigation"] %}
{% if primary_nav %}
<div class="data-weblinks-maxdepth="">
<ul class="nav navbar-nav weblinks" role="menubar">
{% for link in primary_nav.weblinks %}
<li role="none" class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}">
<a role="menuitem" aria-label="{{ link.name | escape }}" {%- if link.tooltip %} title="{{ link.tooltip | escape }}"
{% endif %}>
<span> Test2 </span>
{%- unless link.display_image_only -%}
{{ link.name | escape }}
{%- endunless -%}
</a>
</li>
{% endfor %}
</ul>
{% editable primary_nav %}
</div>
{% endif %}
</div>
</div>
</div>
To change the name of the link and perhaps add something in front of it all you have to do is add something into the if clause like below:
{% assign homeurl = website.adx_partialurl %}
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
{% assign primary_nav = weblinks["Primary Navigation"] %}
{% if primary_nav %}
<div class="data-weblinks-maxdepth="">
<ul class="nav navbar-nav weblinks" role="menubar">
{% for link in primary_nav.weblinks %}
<li role="none" class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}">
<a role="menuitem" aria-label="{{ link.name | escape }}" {%- if link.tooltip %} title="{{ link.tooltip | escape }}"{% endif %}>
{%- unless link.display_image_only -%}
Text 2 {{ link.name | escape }}
{%- endunless -%}
</a>
</li>
{% endfor %}
</ul>
{% editable primary_nav %}
</div>
{% endif %}
</div>
</div>
</div>
How do I change the for loop to ignore duplicates mealtype == 'Entrees'
I only need it to create 1 <a href>
{% for menu in menus %}
{% if menu.mealtype == 'Entrees' %}
<li role="presentation">
Entrees
</li>
{% endif %}
{% endfor %}
full li
{% for menu in menus %}
{% if menu.show_presentation %}
<li role="presentation">
Entrees
</li>
{% endif %}
{% if menu.show_presentation %}
<li role="presentation">
Sides
</li>
{% endif %}
{% if menu.show_presentation %}
<li role="presentation">
Mains
</li>
{% endif %}
{% if menu.show_presentation %}
<li role="presentation">
Drinks
</li>
{% endif %}
{% if menu.show_presentation %}
<li role="presentation">
Desserts
</li>
{% endif %}
{% if menu.show_presentation %}
<li role="presentation">
Specials
</li>
{% endif %}
{% if menu.show_presentation %}
<li role="presentation">
Others
</li>
{% endif %}
{% endfor %}
Update for view based on comments. Try this:
show_presentation_list = []
menus_presentation = []
for menu in menus:
if menu.mealtype and menu.mealtype not in show_presentation_list:
show_presentation_list.append(menu.mealtype)
menus_presentation.append(menu)
Also your new template, try this:
{% for menu in menus_presentation %}
<li role="presentation">
{{menu.mealtype}}
</li>
{% endfor %}
I'm using a desk drawer for my page when it's in phone. But for some reason when I try out the links inside the desk drawer on mobile, they won't work. I was hoping anyone could give me a hint as to what I'm doing wrong.
Because it works when I try it on the computer on Chrome while simulating a phone browser but not in my phone's browser. The page is www.bebe2go.com and the desk drawer I'm using is this one: http://git.blivesta.com/drawer/fixed-navbar-left.
Here is the code for the navigator:
<div class="row">
<div class="col-lg-12">
<div class="drawer-header">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>
<div class="drawer-main drawer-navbar-default">
<nav class="container drawer-nav" role="navigation">
<div class="drawer-brand hidden-md hidden-lg">Bebe2Go</div>
<ul class="drawer-menu">
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="drawer-menu-item dropdown drawer-dropdown-hover">
{{ link.title | escape }}<span class="caret"></span>
<ul class="drawer-submenu dropdown-menu" role="menu">
<li class="drawer-submenu-item">{{ link.title | escape }}</li>
{% for childlink in linklists[child_list_handle].links %}
<li class="drawer-submenu-item">{{ childlink.title | escape }}</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="drawer-menu-item">{{ link.title | escape }}</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div>
</div>
</div>
Here is the link for the js: https://github.com/blivesta/drawer/blob/master/src/js/jquery.drawer.js
and here the link to the css:
https://github.com/blivesta/drawer/blob/master/dist/css/drawer.css
I try to make my first site with GRAV CMS.
Now in my pages-folder it looks like this:
home/default.md
about
about/seite1/default.md
about/seite2/default.md
Now, if i put the following code into my html-file, only the main points are showed in the navigation.
<nav class="" role="navigation">
<div class="">
<ol class="">
{% for page in pages.children %}
{% if page.visible %}
{% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}"><a href="{{ page.url }}">{{ page.menu }}</a</li>
{% endif %}
{% endfor %}
</ol>
</div>
</nav>
Is there a way to show all the pages, including subpages in the navigation?
thanks for your answer...
This should give you the fist level of children (subpages) in your navigation:
<nav class="" role="navigation">
<div class="">
<ol class="">
{% for page in pages.children %}
{% if page.visible %}
{% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}">{{ page.menu }}</li>
{% if page.children %}
<ol class="">
{% for child in page.children %}
{% if child.visible %}
<li class="{{ current_page }}">{{ child.menu }}</li>
{% endif %}
{% endfor %}
</ol>
{% endif %}
{% endif %}
{% endfor %}
</ol>
</div>
</nav>