~xdavidwu/xdavidwu.link

b52e4a8715bf5dd3caebfa8045f05353c0d3f78b — Michael Rose 8 years ago 2e2e5bf
Update layout docs
4 files changed, 64 insertions(+), 9 deletions(-)

M _data/navigation.yml
M _docs/09-layouts.md
M _includes/nav_list
A images/mm-custom-sidebar-example.jpg
M _data/navigation.yml => _data/navigation.yml +7 -5
@@ 53,8 53,8 @@ docs:
        path: working-with-pages
      - title: "Working with Collections"
        path: working-with-collections
      - title: "Jekyll Include Helpers"
        path: include-helpers
      - title: "Helpers and Shortcodes"
        path: helpers-and-shortcodes
      - title: "Images"
        path: images



@@ 64,9 64,11 @@ docs:
        path: pagination
      - title: "Archives"
        path: archives
      - title: "Development"
        path: development
      - title: "v2 Documentation"
      - title: "Stylesheets"
        path: stylesheets
      - title: "JavaScript"
        path: javascript
      - title: "Old 2.2.1 Docs"
        path: docs-2

  - title: Meta

M _docs/09-layouts.md => _docs/09-layouts.md +56 -3
@@ 5,6 5,11 @@ excerpt:
sidebar:
  title: "v3.0"
  nav: docs
single_layout_gallery:
  - image_path: mm-layout-single-header.png
    alt: "single layout with header example"
  - image_path: mm-layout-single-meta.png
    alt: "single layout with comments and related posts"
---

{% include base_path %}


@@ 35,6 40,8 @@ A Jekyll layout that compresses HTML in pure Liquid.

The layout you'll likely use the most --- thin sidebar on the left, main content on the right.

{% include gallery id="single_layout_gallery" caption="Image header and meta info examples for `single` layout" %}

To enable add `layout: single` or better yet apply as a [Front Matter default]({{ base_path }}/docs/configuration/#front-matter-defaults) in `_config.yml`.

### Header


@@ 105,13 112,59 @@ header:
  overlay_color: "#333"
```

### Custom Sidebar
### Sidebar

The space to the left of a page's main content is blank by default, but has the option to show an author profile (name, short biography, social media links), custom content, or both.

#### Author Profile

Add `author_profile: true` to a post or page's YAML Front Matter.

![single layout example]({{ base_path }}/images/mm-layout-single.png)

![single layout with header example]({{ base_path }}/images/mm-layout-single-header.png)
Better yet, enable it with Front Matter Defaults set in `_config.yml`.

```yaml
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      author_profile: true
```

**Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead.
{: .notice--warning}

#### Custom Sidebar Content

![single layout with comments and related posts]({{ base_path }}/images/mm-layout-single-meta.png)
Blocks of content can be added by using the following under `sidebar`:

* `title` --- title or heading
* `image` --- image path placed in `/images/` folder or an external URL
* `image_alt` --- alt description for image
* `text` --- Markdown supported text

Multiple blocks can also be added by following the example below:

```yaml
sidebar:
  - title: "Title"
    image: http://placehold.it/350x250
    image_alt: "image"
    text: "Some text here."
  - title: "Another Title"
    text: "More text here."
```

<figure>
  <img src="{{ base_path }}/images/mm-custom-sidebar-example.jpg" alt="custom sidebar content example">
  <figcaption>Example of custom sidebar content added as YAML Front Matter.</figcaption>
</figure>

**ProTip:** Custom sidebar content added to a post or page's YAML Front Matter will appear above the author profile if enabled with `author_profile: true`.
{: .notice--info}

## Archive


M _includes/nav_list => _includes/nav_list +1 -1
@@ 2,7 2,7 @@
{% assign navigation = site.data.navigation[page.sidebar.nav] %}

<nav class="nav__list">
  {% if page.sidebar.title %}<header><h4>{{ page.sidebar.title }}</h4></header>{% endif %}
  {% if page.sidebar.title %}<header><h4 class="nav__title" style="padding: 0;">{{ page.sidebar.title }}</h4></header>{% endif %}
  <ul>
    {% for nav in navigation %}
      <li><span class="nav__sub-title">{{ nav.title }}</span>

A images/mm-custom-sidebar-example.jpg => images/mm-custom-sidebar-example.jpg +0 -0