Refactor readthedocs navigation template.

* Fix a nested `<li>` bug. * More closely replicate nesting of the Sphinx theme nav (related to #588). * If sections headers ever get urls, this will support them (related to #73).
mkdocs · Mar 11, 2017 · a877aae · a877aae
1 parent f8ad209
commit a877aae
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/mkdocs/themes/readthedocs/base.html b/mkdocs/themes/readthedocs/base.html
@@ -76,8 +76,11 @@
       <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
         {%- block site_nav %}
 	<ul class="current">
+	  {% set navlevel = 1 %}
           {% for nav_item in nav %}
-            <li>{% include "toc.html" %}<li>
+            <li class="toctree-l{{ navlevel }}{% if nav_item.active and not nav_item.children %} current{%endif%}">
+		{% include 'nav.html' %}
+	    </li>
           {% endfor %}
         </ul>
 	{%- endblock %}

diff --git a/mkdocs/themes/readthedocs/nav.html b/mkdocs/themes/readthedocs/nav.html
@@ -0,0 +1,22 @@
+{%- if nav_item.url %}
+    <a class="{% if nav_item.active%}current{%endif%}" href="{{ nav_item.url }}">{{ nav_item.title }}</a>
+{%- else %}
+    <span class="caption-text">{{ nav_item.title }}</span>
+{%- endif %}
+
+{%- if nav_item == page or nav_item.children %}
+    <ul class="subnav">
+        {%- if nav_item == page %}
+            {% include 'toc.html' %}
+        {%- endif %}
+        {%- if nav_item.children %}
+            {%- set navlevel = navlevel + 1%}
+            {%- for nav_item in nav_item.children %}
+                <li class="{% if navlevel > 2 %}toctree-l{{ navlevel }}{% endif %}{% if nav_item.active%} current{%endif%}">
+                    {% include 'nav.html' %}
+                </li>
+            {%- endfor %}
+            {%- set navlevel = navlevel - 1%}
+        {%- endif %}
+    </ul>
+{%- endif %}
diff --git a/mkdocs/themes/readthedocs/toc.html b/mkdocs/themes/readthedocs/toc.html
@@ -1,23 +1,10 @@
-{% if nav_item.children %}
-    <ul class="subnav">
-    <li><span>{{ nav_item.title }}</span></li>
-
-        {% for nav_item in nav_item.children %}
-            {% include 'toc.html' %}
+{% for toc_item in page.toc %}
+    <li class="toctree-l{{ navlevel + 1 }}"><a href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
+    {% if toc_item.children %}
+        <ul>
+        {% for toc_item in toc_item.children %}
+            <li><a class="toctree-l{{ navlevel + 2 }}" href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
         {% endfor %}
-    </ul>
-{% else %}
-    <li class="toctree-l1 {% if nav_item.active%}current{%endif%}">
-        <a class="{% if nav_item.active%}current{%endif%}" href="{{ nav_item.url }}">{{ nav_item.title }}</a>
-        {% if nav_item == page %}
-            <ul>
-            {% for toc_item in page.toc %}
-                <li class="toctree-l3"><a href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
-                {% for toc_item in toc_item.children %}
-                    <li><a class="toctree-l4" href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
-                {% endfor %}
-            {% endfor %}
-            </ul>
-        {% endif %}
-    </li>
-{% endif %}
+        </ul>
+    {% endif %}
+{% endfor %}