dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made updates as requested from latest review

This commit is contained in:
Tom Johnson 2017-01-12 23:03:56 -08:00
parent 5166ead2e0
commit 7efeb3d4af
3 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_docs/datafiles.md
View File

@ -70,6 +70,8 @@ You can now render the list of members in a template:
</ul> </ul>
{% endraw %} {% endraw %}
``` ```
{: .note .info }
If your Jekyll site has a lot of pages, such as with documentation websites, we've got you covered with some detailed examples on [how to build robust navigation for your site](..navigation).
## Example: Organizations ## Example: Organizations

118
docs/_docs/navigation.md
View File

@ -55,15 +55,18 @@ docs:
``` ```
**Result** **Result**
<div class="result"> <div class="highlight result">
<h2>ACME Documentation</h2> <h2>ACME Documentation</h2>
<ul> <ul>
<li><a href="introduction.html" alt="Introduction">Introduction</a></li> <li><a href="#" alt="Introduction">Introduction</a></li>
<li><a href="configuration.html" alt="Configuration">Configuration</a></li> <li><a href="#" alt="Configuration">Configuration</a></li>
<li><a href="deployment.html" alt="Deployment">Deployment</a></li> <li><a href="#" alt="Deployment">Deployment</a></li>
</ul> </ul>
</div> </div>
{: .note .info }
For the results in these samples with fictitious page references, `#` is manually substituted for the actual link value to avoid 404 errors.)
When you use a `for` loop, you choose how you want to refer to the items you're looping through. The variable you choose (in this case, `item`) becomes how you access the properties of each item in the list. Dot notation is used to get a property of the item (for example, `item.url`). When you use a `for` loop, you choose how you want to refer to the items you're looping through. The variable you choose (in this case, `item`) becomes how you access the properties of each item in the list. Dot notation is used to get a property of the item (for example, `item.url`).
The YAML content has two main types of formats that are relevant here: The YAML content has two main types of formats that are relevant here:
@ -94,10 +97,10 @@ Suppose you wanted to sort the list by the `title`. To do this, convert the refe
**Result** **Result**
<div class="result"> <div class="highlight result">
<li><a href="configuration.html" alt="Configuration">Configuration</a></li> <li><a href="#" alt="Configuration">Configuration</a></li>
<li><a href="deployment.html" alt="Deployment">Deployment</a></li> <li><a href="#" alt="Deployment">Deployment</a></li>
<li><a href="introduction.html" alt="Introduction">Introduction</a></li> <li><a href="#" alt="Introduction">Introduction</a></li>
</div> </div>
The items now appear in alphabetical order. The `sort` property in the Liquid filter applies to the `title`, which is an actual property in the list. If `title` weren't a property, we would need to sort by another property. The items now appear in alphabetical order. The `sort` property in the Liquid filter applies to the `title`, which is an actual property in the list. If `title` weren't a property, we would need to sort by another property.
@ -158,26 +161,26 @@ toc:
``` ```
**Result** **Result**
<div class="result"> <div class="highlight result">
<h3>Group 1</h3> <h3>Group 1</h3>
<ul> <ul>
<li><a href="/thing1.html">Thing 1</a></li> <li><a href="#">Thing 1</a></li>
<li><a href="/thing2.html">Thing 2</a></li> <li><a href="#">Thing 2</a></li>
<li><a href="/thing3.html">Thing 3</a></li> <li><a href="#">Thing 3</a></li>
</ul> </ul>
<h3>Group 2</h3> <h3>Group 2</h3>
<ul> <ul>
<li><a href="/piece1.html">Piece 1</a></li> <li><a href="#">Piece 1</a></li>
<li><a href="/piece2.html">Piece 2</a></li> <li><a href="#">Piece 2</a></li>
<li><a href="/piece3.html">Piece 3</a></li> <li><a href="#">Piece 3</a></li>
</ul> </ul>
<h3>Group 3</h3> <h3>Group 3</h3>
<ul> <ul>
<li><a href="/widget1.html">Widget 1</a></li> <li><a href="#">Widget 1</a></li>
<li><a href="/widget2.html">Widget 2</a></li> <li><a href="#">Widget 2</a></li>
<li><a href="/widget3.html">Widget 3</a></li> <li><a href="#">Widget 3</a></li>
</ul> </ul>
</div> </div>
@ -262,37 +265,37 @@ toc2:
**Result** **Result**
<div class="result"> <div class="highlight result">
<div> <div>
<h3>Group 1</h3> <h3>Group 1</h3>
<ul> <ul>
<li><a href="/thing1.html">Thing 1</a></li> <li><a href="#">Thing 1</a></li>
<li><a href="/thing2.html">Thing 2</a></li> <li><a href="#">Thing 2</a></li>
<ul> <ul>
<li><a href="/subthing1.html">Subthing 1</a></li> <li><a href="#">Subthing 1</a></li>
<li><a href="/subthing2.html">Subthing 2</a></li> <li><a href="#">Subthing 2</a></li>
</ul> </ul>
<li><a href="/thing3.html">Thing 3</a></li> <li><a href="#">Thing 3</a></li>
</ul> </ul>
<h3>Group 2</h3> <h3>Group 2</h3>
<ul> <ul>
<li><a href="/piece1.html">Piece 1</a></li> <li><a href="#">Piece 1</a></li>
<li><a href="/piece2.html">Piece 2</a></li> <li><a href="#">Piece 2</a></li>
<li><a href="/piece3.html">Piece 3</a></li> <li><a href="#">Piece 3</a></li>
<ul> <ul>
<li><a href="/subpiece1.html">Subpiece 1</a></li> <li><a href="#">Subpiece 1</a></li>
<li><a href="/subpiece2.html">Subpiece2</a></li> <li><a href="#">Subpiece2</a></li>
</ul> </ul>
</ul> </ul>
<h3>Group 3</h3> <h3>Group 3</h3>
<ul> <ul>
<li><a href="/widget1.html">Widget 1</a></li> <li><a href="#">Widget 1</a></li>
<ul> <ul>
<li><a href="/subwidget1.html">Subwidget 1</a></li> <li><a href="#">Subwidget 1</a></li>
<li><a href="/subwidget2.html">Subwidget 2</a></li> <li><a href="#">Subwidget 2</a></li>
</ul> </ul>
<li><a href="/widget2.html">Widget 2</a></li> <li><a href="#">Widget 2</a></li>
<li><a href="/widget3.html">Widget 3</a></li> <li><a href="#">Widget 3</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -330,11 +333,11 @@ sidebar: toc
``` ```
**Result** **Result**
<div class="result"> <div class="highlight result">
<ul> <ul>
<li><a href="introduction.html">Introduction</a></li> <li><a href="#">Introduction</a></li>
<li><a href="configuration.html">Configuration</a></li> <li><a href="#">Configuration</a></li>
<li><a href="deployment.html">Deployment</a></li> <li><a href="#">Deployment</a></li>
</ul> </ul>
</div> </div>
@ -358,7 +361,8 @@ In addition to inserting items from the YAML data file into your list, you also
```liquid ```liquid
{% raw %}{% for item in site.data.samplelist.docs %} {% raw %}{% for item in site.data.samplelist.docs %}
<li class="{% if item.url == page.url %}active{% endif %}"> <li class="{% if item.url == page.url %}active{% endif %}">
<a href="{{ item.url }}">{{ item.title }}</a></li> <a href="{{ item.url }}">{{ item.title }}</a>
</li>
{% endfor %}{% endraw %} {% endfor %}{% endraw %}
``` ```
@ -371,10 +375,10 @@ In addition to inserting items from the YAML data file into your list, you also
} }
</style> </style>
<div class="result"> <div class="highlight result">
<li class=""><a href="introduction.html">Introduction</a></li> <li class=""><a href="#">Introduction</a></li>
<li class=""><a href="configuration.html">Configuration</a></li> <li class=""><a href="#">Configuration</a></li>
<li class="active"><a href="deployment.html">Deployment</a></li> <li class="active"><a href="#">Deployment</a></li>
</div> </div>
In this case, assume `Deployment` is the current page. In this case, assume `Deployment` is the current page.
@ -417,10 +421,10 @@ docs2:
**Result** **Result**
<div class="result"> <div class="highlight result">
<ul> <ul>
<li><a href="introduction.html">Introduction</a></li> <li><a href="#">Introduction</a></li>
<li><a href="configuration.html">Configuration</a></li> <li><a href="#">Configuration</a></li>
</ul> </ul>
</div> </div>
@ -497,11 +501,11 @@ If you wanted to simply get all docs in the collection for a specific category,
The result would be as follows: The result would be as follows:
<div class="result"> <div class="highlight result">
<h3>Getting Started</h3> <h3>Getting Started</h3>
<ul> <ul>
<li><a href="/docs/sample1">Sample1</a></li> <li><a href="#">Sample1</a></li>
<li><a href="/docs/sample2">Sample2</a></li> <li><a href="#">Sample2</a></li>
</ul> </ul>
</div> </div>
@ -521,7 +525,7 @@ Here's the code for getting lists of pages grouped under their corresponding cat
{% for cat in mydocs %} {% for cat in mydocs %}
<h2>{{ cat.name | capitalize }}</h2> <h2>{{ cat.name | capitalize }}</h2>
<ul> <ul>
{% assign items = cat.items | sort: 'weight' %} {% assign items = cat.items | sort: 'order' %}
{% for item in items %} {% for item in items %}
<li><a href="{{ item.url }}">{{ item.title }}</a></li> <li><a href="{{ item.url }}">{{ item.title }}</a></li>
{% endfor %} {% endfor %}
@ -531,21 +535,21 @@ Here's the code for getting lists of pages grouped under their corresponding cat
**Result** **Result**
<div class="result"> <div class="highlight result">
<h2>Getting-started</h2> <h2>Getting-started</h2>
<ul> <ul>
<li><a href="/docs/sample2">Sample2</a></li> <li><a href="#">Sample2</a></li>
<li><a href="/docs/sample1">Sample1</a></li> <li><a href="#">Sample1</a></li>
</ul> </ul>
<h2>Configuration</h2> <h2>Configuration</h2>
<ul> <ul>
<li><a href="/docs/topic2">Topic2</a></li> <li><a href="#">Topic2</a></li>
<li><a href="/docs/topic1">Topic1</a></li> <li><a href="#">Topic1</a></li>
</ul> </ul>
<h2>Deployment</h2> <h2>Deployment</h2>
<ul> <ul>
<li><a href="/docs/widget2">Widget2</a></li> <li><a href="#">Widget2</a></li>
<li><a href="/docs/widget1">Widget1</a></li> <li><a href="#">Widget1</a></li>
</ul> </ul>
</div> </div>

3
docs/_sass/_style.scss
View File

@ -1035,7 +1035,4 @@ code.output {
.result { .result {
border: 1px solid yellow; border: 1px solid yellow;
padding: 10px; padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-size:14px;
} }