toc logic
John Mulhausen
parent
7b55b0b243
commit
a53cd45d08
|
|
@ -4,7 +4,7 @@ kramdown:
|
|||
input: GFM
|
||||
html_to_native: true
|
||||
hard_wrap: false
|
||||
use_coderay: true
|
||||
enable_coderay: true
|
||||
baseurl: /
|
||||
|
||||
safe: false
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,45 +1,68 @@
|
|||
<!--
|
||||
|
||||
<ul {% if subsection %}style="display: none; opacity: 0; margin-left: 15px;"{% endif %}>
|
||||
{% for item in tree %}
|
||||
|
||||
{% if item.status %}
|
||||
{% capture statusHTML %} <sup style="color: red">{{item.status}}</sup>{% endcapture %}
|
||||
Here's your API ref for this accordion element:
|
||||
|
||||
Each line is class "item". Use the data-title attribute for the text label.
|
||||
Use a.item for direct links; use div.item to wrap containers.
|
||||
|
||||
A div.container inside a div.item is a nested accordion. The clickable text which toggles the
|
||||
container open/closed is the data-title attribute of the parent div.item.
|
||||
|
||||
|
||||
|
||||
<a class="item" data-title="Overview" href="path-to-page"></a>
|
||||
|
||||
<div class="item" data-title="Quickstarts">
|
||||
<div class="container">
|
||||
<a class="item" data-title="Setting Up Your Local Environment" href="path-to-page"></a>
|
||||
<a class="item" data-title="5-minute Quickstart" href="path-to-page"></a>
|
||||
<a class="item" data-title="Kubernetes 101" href="path-to-page"></a>
|
||||
<a class="item" data-title="Kubernetes 201" href="path-to-page"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" data-title="Running Kubernetes">
|
||||
<div class="container">
|
||||
<a class="item" data-title="Running Kubernetes on Your Local Machine" href="path-to-page"></a>
|
||||
<a class="item" data-title="Running Kubernetes on Google Container Engine" href="path-to-page"></a>
|
||||
<div class="item" data-title="Third-level Schtuff">
|
||||
<div class="container">
|
||||
<a class="item" data-title="Third Level One" href="path-to-page"></a>
|
||||
<a class="item" data-title="Third Level Two" href="path-to-page"></a>
|
||||
<a class="item" data-title="Third Level Three" href="path-to-page"></a>
|
||||
<a class="item" data-title="Third Level Four" href="path-to-page"></a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="item" data-title="Running Kubernetes on Turn-Key Cloud Solutions" href="path-to-page"></a>
|
||||
<a class="item" data-title="Running Kubernetes on Custom Solutions" href="path-to-page"></a>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
{% for item in tree %}
|
||||
{% if item.section %}
|
||||
<div class="item" data-title="{{ item.title }}">
|
||||
<div class="container">
|
||||
{% assign tree = item.section %}
|
||||
{% assign subsection=true %}
|
||||
{% include tree.html %}
|
||||
</div>
|
||||
<div>
|
||||
{% else %}
|
||||
{% assign statusHTML = "" %}
|
||||
{% endif %}
|
||||
|
||||
{% if item.section %}
|
||||
{% capture sectionHTML %}<a class="tlw-control tlw-collapsed">▸</a>{% endcapture %}
|
||||
{% else %}
|
||||
{% assign sectionHTML = "" %}
|
||||
{% if item.status %}
|
||||
{% capture statusHTML %} <sup style="color: red">{{item.status}}</sup>{% endcapture %}
|
||||
{% else %}
|
||||
{% assign statusHTML = "" %}
|
||||
{% endif %}
|
||||
|
||||
{% if item.path %}
|
||||
{% if page.url | remove: ".html" | remove "index" == item.path %}
|
||||
{% capture tocItemColor %}style="color:red;"{% endcapture %}
|
||||
{% else %}
|
||||
{% assign tocItemColor = "" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<a class="item" {{ tocItemColor }} href="{{ item.path }}" title="{{ item.title }}" data-title="{{ item.title }} - {{ item.path }}">{{ item.title }}{{ statusHTML }}</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if item.path %}
|
||||
{% if page.url | remove: ".html" | remove "index" == item.path %}
|
||||
{% capture tocItemColor %}style="color:red;"{% endcapture %}
|
||||
{% else %}
|
||||
{% capture tocItemColor %}{% endcapture %}
|
||||
{% endif %}
|
||||
<li {{ tocItemColor }}>{{ sectionHTML }}<a href="{{ item.path }}" title="{{ item.title }}" data-title="{{ item.title }} - {{ item.path }}"><span>{{ item.title }} {{ statusHTML }}</span></a></li>
|
||||
{% else %}
|
||||
{% if item.include %}
|
||||
{% assign tree = site.data[item.include].toc %}
|
||||
{% assign subsection=false %}
|
||||
{% include tree.html %}
|
||||
{% else %}
|
||||
<li>{{ sectionHTML }}<span class="tlw-title tlw-control-title" data-title="{{ item.title }}">{{ item.title }}{{ statusHTML }}</span></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if item.break %}
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
||||
{% if item.section %}
|
||||
{% assign tree = item.section %}
|
||||
{% assign subsection=true %}
|
||||
{% include tree.html %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
|
|
@ -17,50 +17,11 @@ layout: headerfooter
|
|||
|
||||
<section id="encyclopedia">
|
||||
<div id="docsToc">
|
||||
{% comment %} assign tree = site.data[page.toc].toc
|
||||
{% assign tree = site.data[page.versionfilesafe][page.section].toc %}
|
||||
{% include tree.html %}{% endcomment %}
|
||||
<!--
|
||||
|
||||
Here's your API ref for this accordion element:
|
||||
|
||||
Each line is class "item". Use the data-title attribute for the text label.
|
||||
Use a.item for direct links; use div.item to wrap containers.
|
||||
|
||||
A div.container inside a div.item is a nested accordion. The clickable text which toggles the
|
||||
container open/closed is the data-title attribute of the parent div.item.
|
||||
|
||||
-->
|
||||
|
||||
<div class="pi-accordion">
|
||||
<a class="item" data-title="Overview" href="path-to-page"></a>
|
||||
|
||||
<div class="item" data-title="Quickstarts">
|
||||
<div class="container">
|
||||
<a class="item" data-title="Setting Up Your Local Environment" href="path-to-page"></a>
|
||||
<a class="item" data-title="5-minute Quickstart" href="path-to-page"></a>
|
||||
<a class="item" data-title="Kubernetes 101" href="path-to-page"></a>
|
||||
<a class="item" data-title="Kubernetes 201" href="path-to-page"></a>
|
||||
</div>
|
||||
</div> <!-- /quickstarts -->
|
||||
|
||||
<div class="item" data-title="Running Kubernetes">
|
||||
<div class="container">
|
||||
<a class="item" data-title="Running Kubernetes on Your Local Machine" href="path-to-page"></a>
|
||||
<a class="item" data-title="Running Kubernetes on Google Container Engine" href="path-to-page"></a>
|
||||
<div class="item" data-title="Third-level Schtuff">
|
||||
<div class="container">
|
||||
<a class="item" data-title="Third Level One" href="path-to-page"></a>
|
||||
<a class="item" data-title="Third Level Two" href="path-to-page"></a>
|
||||
<a class="item" data-title="Third Level Three" href="path-to-page"></a>
|
||||
<a class="item" data-title="Third Level Four" href="path-to-page"></a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="item" data-title="Running Kubernetes on Turn-Key Cloud Solutions" href="path-to-page"></a>
|
||||
<a class="item" data-title="Running Kubernetes on Custom Solutions" href="path-to-page"></a>
|
||||
</div>
|
||||
</div> <!-- /running kubernetes -->
|
||||
</div> <!-- /pi-accordion -->
|
||||
<div class="pi-accordion">
|
||||
{% comment %} assign tree = site.data[page.toc].toc
|
||||
{% assign tree = site.data[page.versionfilesafe][page.section].toc %}
|
||||
{% include tree.html %}{% endcomment %}
|
||||
</div> <!-- /pi-accordion -->
|
||||
</div> <!-- /docsToc -->
|
||||
<div id="docsContent">
|
||||
{{ content }}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -74,19 +74,16 @@
|
|||
|
||||
<section id="encyclopedia">
|
||||
<div id="docsToc">
|
||||
|
||||
|
||||
|
||||
<ul >
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="pi-accordion">
|
||||
|
||||
</div> <!-- /pi-accordion -->
|
||||
</div> <!-- /docsToc -->
|
||||
<div id="docsContent">
|
||||
Yep.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<main class="light-text">
|
||||
<nav>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue