• I have have nav.
  • Each elements in nav has these.
    • children return another nav contains its children.
    • url return URL of the current element from nav.
    • title return title of the current element from nav.
  • I do not need title to process things. I only need title when I want to have something visible in my screen.
  • So this left me to tweak around children and url.
  • So the keys are these.
    • If an element in nav has children, show its title in <li>.
      • Then do the loop again.
      • So then I need a lood that show from <ul> into <li>.
    • If an element in nav has no children, show its url in <li>.
  • As when I am writting this post, here is my codes for my own template fo MkDocs.
  • These codes below are for the main.html.
<!DOCTYPE html>
<html>
  <head>
    <title>{% if page_title %}{{page_title}} - {% endif %}{{site_name}}</title>
  </head>
  <body>
    <ul>
      {% for nav_child in nav %}
        {% if nav_child.children %}
          <li>{{ nav_child.title }}</li>
          {% include "nav_sub.html" %}
        {% else %}
          <li>{{ nav_child.url }}</li>
        {% endif %}
      {% endfor %}
    </ul>
  </body>
</html>
  • These codes below are for the nav_sub.html. I prefer to move the codes in this file into the same main.html. However, I do not know how to do that just yet.
<ul>
  {% for nav_child in nav_child.children %}
    {% if nav_child.children %}
      <li>{{ nav_child.title }}</li>
      {% include "nav_sub.html" %}
    {% else %}
      <li>{{ nav_child.url }}</li>
    {% endif %}
  {% endfor %}
</ul>
  • Here are some sample codes I made during this code session.
{% if nav|length>1 %}
  <ul>
    {% for i in nav %}
      {% if i.children %}
        <li>
          <ul>
            {% for j in i.children %}
              <strong>{{ j.url }}</strong>
            {% endfor %}
          </ul>
        </li>
      {% else %}
        {{ i.url }}
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}

<ul>
  {% for i in nav %}
    {% if i.children %}
      <li>
        <ul>
          {% for j in i.children %}
            <strong>{{ j.url }}</strong>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      {{ i.url }}
    {% endif %}
  {% endfor %}
</ul>

<ul>
  {% for i in nav %}
    {% if i.url %}
      <li>
        <a href="{{ i.url }}">{{ i.url }}</a>
      </li>
    {% else %}
      <li>
        {{ i.title }}
      </li>
    {% endif %}
  {% endfor %}
</ul>

<ul>
  {% for nav_child in nav %}
    {% if nav_child.children %}
      <li>{{ nav_child.title }}</li>
    {% else %}
      <li>{{ nav_child.url }}</li>
    {% endif %}
  {% endfor %}
</ul>
  • Here is the basic source codes provided from the Jinja2 web page in here, .
{% if nav|length>1 %}
  <ul>
    {% for nav_child in nav %}
      {% if %}
        <li>
          <ul>
            {% for nav_child in nav_child.children %}
              <li
                class="{% if nav_child.active %}current{% endif %}"
              >
                <a
                  href="{{ nav_child.url }}"
                >{{ nav_child.title }}</a>
              </li>
            {% endfor %}
          </ul>
        </li>
      {% else %}
        <li
          class="{% if nav_child.active %}current{% endif %}"
        >
          <a
            href="{{ nav_child.url }}"
          >{{ nav_child.title }}</a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}