From 5166ead2e03b42ae80589e56a25b379d53fea709 Mon Sep 17 00:00:00 2001 From: Tom Johnson Date: Wed, 4 Jan 2017 10:14:41 -0800 Subject: [PATCH] Made updates with indentation --- docs/_docs/navigation.md | 190 ++++++++++++++++++++------------------- docs/_sass/_style.scss | 8 ++ 2 files changed, 104 insertions(+), 94 deletions(-) diff --git a/docs/_docs/navigation.md b/docs/_docs/navigation.md index 1dc79dfa..bbb009c7 100644 --- a/docs/_docs/navigation.md +++ b/docs/_docs/navigation.md @@ -1,19 +1,8 @@ --- layout: docs -title: Navigation permalink: /docs/navigation --- - - 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: @@ -67,12 +56,12 @@ docs: **Result**
-

ACME Documentation

- +

ACME Documentation

+
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`). @@ -99,16 +88,16 @@ Suppose you wanted to sort the list by the `title`. To do this, convert the refe ```liquid {% raw %}{% assign doclist = site.data.samplelist.docs | sort: 'title' %} {% for item in doclist %} -
  • {{ item.title }}
    • +
  • {{ item.title }}
    • {% endfor %}{% endraw %} ``` **Result**
    -
  • Configuration
    • -
  • Deployment
    • -
  • Introduction
    • +
  • Configuration
    • +
  • Deployment
    • +
  • Introduction
    • 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. @@ -274,24 +263,39 @@ toc2: **Result**
    -
    -

    Group 1

    - -

    Group 2

    - -

    Group 3

    - -
    -
    +
    +

    Group 1

    + +

    Group 2

    + +

    Group 3

    + +
    + In this example, `if site.data.samplelist.toc2[0]` is used to ensure that the YAML level actually contains items. If there isn't anything at the `[0]` position, we can skip looking in this level. @@ -319,19 +323,19 @@ sidebar: toc ```liquid {% raw %}{% endraw %} ``` **Result**
    - +
    In this scenario, we want to pass values from the page's front matter into a `for` loop that contains a variable. When the assigned variable isn't a string but rather a data reference, you must use brackets (instead of curly braces) to refer to the front matter's value. @@ -353,8 +357,8 @@ In addition to inserting items from the YAML data file into your list, you also ```liquid {% raw %}{% for item in site.data.samplelist.docs %} -
  • -{{ item.title }}
    • +
  • + {{ item.title }}
    • {% endfor %}{% endraw %} ``` @@ -368,9 +372,9 @@ In addition to inserting items from the YAML data file into your list, you also
    -
  • Introduction
    • -
  • Configuration
    • -
  • Deployment
    • +
  • Introduction
    • +
  • Configuration
    • +
  • Deployment
    • In this case, assume `Deployment` is the current page. @@ -403,21 +407,21 @@ docs2: ```liquid {% raw %}{% endraw %} ``` **Result**
    - +
    The `Deployment` page is excluded because its `version` is `2`. @@ -483,22 +487,22 @@ If you wanted to simply get all docs in the collection for a specific category, ```liquid {% raw %}

    Getting Started

    {% endraw %} ``` The result would be as follows:
    -

    Getting Started

    - +

    Getting Started

    +
    This might be useful if you're setting up a knowledge base and have dozens of topics in each category, with each category displaying on its own page. @@ -516,35 +520,33 @@ Here's the code for getting lists of pages grouped under their corresponding cat {% raw %}{% assign mydocs = site.docs | group_by: 'category' %} {% for cat in mydocs %}

    {{ cat.name | capitalize }}

    - + {% endfor %}{% endraw %} ``` **Result**
    -

    Getting-started

    - - -

    Configuration

    - - -

    Deployment

    - +

    Getting-started

    + +

    Configuration

    + +

    Deployment

    +
    Let's walk through the code. First, we assign a variable (`mydocs`) to the collection content (`site.docs`). diff --git a/docs/_sass/_style.scss b/docs/_sass/_style.scss index f1e3de5f..20264408 100644 --- a/docs/_sass/_style.scss +++ b/docs/_sass/_style.scss @@ -1031,3 +1031,11 @@ code.output { clip: rect(0, 0, 0, 0); border: 0; } + +.result { + border: 1px solid yellow; + padding: 10px; + margin-top: 10px; + margin-bottom: 10px; + font-size:14px; +}