From b52e4a8715bf5dd3caebfa8045f05353c0d3f78b Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 12 Apr 2016 12:04:16 -0400 Subject: [PATCH] Update layout docs --- _data/navigation.yml | 12 +++--- _docs/09-layouts.md | 59 +++++++++++++++++++++++++-- _includes/nav_list | 2 +- images/mm-custom-sidebar-example.jpg | Bin 0 -> 54015 bytes 4 files changed, 64 insertions(+), 9 deletions(-) create mode 100644 images/mm-custom-sidebar-example.jpg diff --git a/_data/navigation.yml b/_data/navigation.yml index e6900f6..14283a7 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -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 diff --git a/_docs/09-layouts.md b/_docs/09-layouts.md index 72d0e84..8ce52a3 100644 --- a/_docs/09-layouts.md +++ b/_docs/09-layouts.md @@ -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." +``` + +
+ custom sidebar content example +
Example of custom sidebar content added as YAML Front Matter.
+
+ +**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 diff --git a/_includes/nav_list b/_includes/nav_list index b089b63..352856f 100644 --- a/_includes/nav_list +++ b/_includes/nav_list @@ -2,7 +2,7 @@ {% assign navigation = site.data.navigation[page.sidebar.nav] %}