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>
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 {{}}
I have a category called "tachartasan" which I have excluded from my index page however the posts in this category are still being counted in the pagination which is currently set to 10 posts per page.
7 of my most recent posts have been in the tachartasan category and it has resulted in my front page showing only 3 posts total.
<div class="container">
{% for post in paginator.posts %}
{% unless post.categories contains 'tachartasan' %}
<div class="row">
<div class="col-md-3">
<img src="{{ post.image }}" class="index-image">
</div>
<div class="col-md-9">
<h5 class="post-title">{{ post.title }}</h5>
{% if post.author %}
<p class="text-muted">{{ post.date | date: "%Y-%m-%d" }} le {{ post.author }}</p>
{% else %}
<p class="text-muted">{{ post.date | date: "%Y-%m-%d" }} le Crìstean MacMhìcheil</p>
{% endif %}
{{ post.excerpt }}
</div>
</div>
<hr/>
{% endunless %}
{% endfor %}
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center pagination-lg">
{% if paginator.next_page %}
<li class="page-item">
<a class="page-link" href="{{ site.baseurl }}/duilleag-{{paginator.next_page}}">
<i class="fas fa-arrow-left"></i>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="{{ site.baseurl }}/">
<i class="fas fa-arrow-left"></i>
</a>
</li>
{% endif %}
<li class="page-item disabled">
<a class="page-link" href="{{ site.baseurl }}/">
Duilleag {{ paginator.page }} / {{ paginator.total_pages }}
</a>
</li>
{% if paginator.previous_page %}
{% if paginator.page == 2 %}
<li class="page-item">
<a class="page-link" href="{{ site.baseurl }}/">
<i class="fas fa-arrow-right"></i>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ site.baseurl }}/duilleag-{{paginator.previous_page}}">
<i class="fas fa-arrow-right"></i>
</a>
</li>
{% endif %}
{% else %}
<li class="page-item disabled">
<a class="page-link" href="{{ site.baseurl }}/">
<i class="fas fa-arrow-right"></i>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
I don't want the hidden "tachartasan" posts to be counted as part of the 10 posts per page.
Adding this line to the front matter of my excluded posts solved it. They are hidden on the index page and no longer counted against the pagination limit and are still visible on the specific category page.
hidden: true
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.
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>