Made updates with indentation

This commit is contained in:
Tom Johnson 2017-01-04 10:14:41 -08:00
parent 75c40edff8
commit 5166ead2e0
2 changed files with 104 additions and 94 deletions

View File

@ -1,19 +1,8 @@
--- ---
layout: docs layout: docs
title: Navigation
permalink: /docs/navigation permalink: /docs/navigation
--- ---
<style>
.result {
border: 1px solid yellow;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-size:14px;
}
</style>
If your Jekyll site has a lot of pages, you might want to create navigation for the pages. Instead of hard-coding navigation links, you can programmatically retrieve a list of pages to build the navigation for your site. If your Jekyll site has a lot of pages, you might want to create navigation for the pages. Instead of hard-coding navigation links, you can programmatically retrieve a list of pages to build the navigation for your site.
There are two primary ways of retrieving pages on a Jekyll site: There are two primary ways of retrieving pages on a Jekyll site:
@ -277,19 +266,34 @@ toc2:
<div> <div>
<h3>Group 1</h3> <h3>Group 1</h3>
<ul> <ul>
<li><a href="/thing1.html">Thing 1</a></li> <li><a href="/thing2.html">Thing 2</a></li> <ul> <li><a href="/thing1.html">Thing 1</a></li>
<li><a href="/subthing1.html">Subthing 1</a></li> <li><a href="/subthing2.html">Subthing 2</a></li> </ul> <li><a href="/thing2.html">Thing 2</a></li>
<li><a href="/thing3.html">Thing 3</a></li> </ul> <ul>
<li><a href="/subthing1.html">Subthing 1</a></li>
<li><a href="/subthing2.html">Subthing 2</a></li>
</ul>
<li><a href="/thing3.html">Thing 3</a></li>
</ul>
<h3>Group 2</h3> <h3>Group 2</h3>
<ul> <ul>
<li><a href="/piece1.html">Piece 1</a></li> <li><a href="/piece2.html">Piece 2</a></li> <li><a href="/piece3.html">Piece 3</a></li> <ul> <li><a href="/piece1.html">Piece 1</a></li>
<li><a href="/subpiece1.html">Subpiece 1</a></li> <li><a href="/subpiece2.html">Subpiece2</a></li> </ul> <li><a href="/piece2.html">Piece 2</a></li>
<li><a href="/piece3.html">Piece 3</a></li>
<ul>
<li><a href="/subpiece1.html">Subpiece 1</a></li>
<li><a href="/subpiece2.html">Subpiece2</a></li>
</ul>
</ul> </ul>
<h3>Group 3</h3> <h3>Group 3</h3>
<ul> <ul>
<li><a href="/widget1.html">Widget 1</a></li> <ul> <li><a href="/widget1.html">Widget 1</a></li>
<li><a href="/subwidget1.html">Subwidget 1</a></li> <li><a href="/subwidget2.html">Subwidget 2</a></li> </ul> <ul>
<li><a href="/widget2.html">Widget 2</a></li> <li><a href="/widget3.html">Widget 3</a></li> </ul> <li><a href="/subwidget1.html">Subwidget 1</a></li>
<li><a href="/subwidget2.html">Subwidget 2</a></li>
</ul>
<li><a href="/widget2.html">Widget 2</a></li>
<li><a href="/widget3.html">Widget 3</a></li>
</ul>
</div> </div>
</div> </div>
@ -533,13 +537,11 @@ Here's the code for getting lists of pages grouped under their corresponding cat
<li><a href="/docs/sample2">Sample2</a></li> <li><a href="/docs/sample2">Sample2</a></li>
<li><a href="/docs/sample1">Sample1</a></li> <li><a href="/docs/sample1">Sample1</a></li>
</ul> </ul>
<h2>Configuration</h2> <h2>Configuration</h2>
<ul> <ul>
<li><a href="/docs/topic2">Topic2</a></li> <li><a href="/docs/topic2">Topic2</a></li>
<li><a href="/docs/topic1">Topic1</a></li> <li><a href="/docs/topic1">Topic1</a></li>
</ul> </ul>
<h2>Deployment</h2> <h2>Deployment</h2>
<ul> <ul>
<li><a href="/docs/widget2">Widget2</a></li> <li><a href="/docs/widget2">Widget2</a></li>

View File

@ -1031,3 +1031,11 @@ code.output {
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
border: 0; border: 0;
} }
.result {
border: 1px solid yellow;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-size:14px;
}