steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Update docs

Browse Source
This commit is contained in:
Michael Rose
2016-04-12 16:48:27 -04:00
parent 29a47da3f2
commit c1a9f8d9cb
11 changed files with 260 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
_docs/09-layouts.md
View File

@@ -38,7 +38,15 @@ A Jekyll layout that compresses HTML in pure Liquid.
## Single Layout
The layout you'll likely use the most --- sidebar and main content combo with the following optional modules: **social sharing links**, **comments**, and **related posts**.
The layout you'll likely use the most --- sidebar and main content combo.
**Includes:**
* Optional header image with caption
* Optional header overlay (solid color/image) + text and optional "call to action" button
* Optional social sharing links module
* Optional comments module
* Optional related posts module
{% include gallery id="single_layout_gallery" caption="Image header and meta info examples for `single` layout" %}
@@ -48,19 +56,73 @@ Assign with `layout: single`, or better yet apply as a [Front Matter default]({{
Essentially the same as `single` with markup adjustments and some modules removed.
![archive layout example]({{ base_path }}/images/mm-layout-archive.png)
**Includes:**
* Optional header image with caption
* Optional header overlay (solid color/image) + text and optional "call to action" button
* List and grid views
<figure>
<img src="{{ base_path }}/images/mm-layout-archive.png" alt="archive layout example">
<figcaption>List view example.</figcaption>
</figure>
Below are sample archive pages you can easily drop into your project, taking care to rename `permalink`, `title`, or the filename to fit your site. Each is 100% compatible with GitHub Pages.
* [All Posts Grouped by Category][posts-categories]
* [All Posts Grouped by Tags][posts-tags]
* [All Posts Grouped by Year][posts-year]
* [All Posts Grouped by Collection][posts-collection]
* [All Posts Grouped by Category -- List View][posts-categories]
* [All Posts Grouped by Tags -- List View][posts-tags]
* [All Posts Grouped by Year -- List View][posts-year]
* [All Posts Grouped by Collection -- List View][posts-collection]
* [Portfolio Collection -- Grid View][portfolio-collection]
[posts-categories]: {{ site.gh_repo }}/blob/gh-pages/_pages/category-archive.html
[posts-tags]: {{ site.gh_repo }}/blob/gh-pages/_pages/tag-archive.html
[posts-year]: {{ site.gh_repo }}/blob/gh-pages/_pages/year-archive.html
[posts-collection]: {{ site.gh_repo }}/blob/gh-pages/_pages/collection-archive.html
[posts-categories]: {{ site.gh_repo }}/gh-pages/_pages/category-archive.html
[posts-tags]: {{ site.gh_repo }}/gh-pages/_pages/tag-archive.html
[posts-year]: {{ site.gh_repo }}/gh-pages/_pages/year-archive.html
[posts-collection]: {{ site.gh_repo }}/gh-pages/_pages/collection-archive.html
[portfolio-collection]: {{ site.gh_repo }}/gh-pages/_pages/portfolio-archive.html
Post and page excerpts are auto-generated by Jekyll which grabs the first paragraph of text. To override this text with something more specific use the following YAML Front Matter:
```yaml
excerpt: "A unique line of text to describe this post that will display in an archive listing and meta description with SEO benefits."
```
### Grid View
Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection:
**Step 1:** Create a portfolio archive page (eg. `_pages/portfolio-archive.html`) with the following YAML Front Matter:
```yaml
---
layout: archive
title: "Portfolio"
permalink: /portfolio/
author_profile: false
---
```
**Step 2:** Loop over all documents in the portfolio collection and output in a grid:
```html
{% raw %}{% include base_path %}
<div class="grid__wrapper">
{% for post in site.portfolio %}
{% include archive-single.html type="grid" %}
{% endfor %}{% endraw %}
</div>
```
To produce something like this:
<figure>
<img src="{{ base_path }}/images/mm-archive-grid-view-example.jpg" alt="archive grid view example">
<figcaption>Grid view example.</figcaption>
</figure>
**Note:** More information on using this `_include` can be found under [**Helpers and Shortcodes**]({{ base_path }}/docs/helpers-and-shortcodes/).
{: .notice--info}
### Taxonomy Archive
@@ -70,7 +132,15 @@ If you have the luxury of using Jekyll plugins the creation of category and tag
### Home Page
Minimal Mistakes ships with an [`index.html`]({{ site.gh_repo }}/blob/master/index.html) in the root of the project for displaying the 5 most recent posts --- with pagination. It does this by assigning `layout: archive` in the YAML Front Matter and including the following Liquid in the body:
Minimal Mistakes ships with an [`index.html`]({{ site.gh_repo }}/blob/master/index.html) in the root of the project for displaying recent posts.
**Includes:**
* Optional header image with caption
* Optional header overlay (solid color/image) + text and optional "call to action" button
* Paginated posts
Post pagination is achieved by assigning `layout: archive` in the YAML Front Matter and including the following Liquid in the body:
```html
{% raw %}<!-- start index.html body -->
@@ -91,13 +161,24 @@ Minimal Mistakes ships with an [`index.html`]({{ site.gh_repo }}/blob/master/ind
<figcaption>Home page post pagination example.</figcaption>
</figure>
**Note:** For more pagination relation settings check the [**Configuration**]({{ base_path }}/docs/configuration/#paginate) section.
**Note:** For more pagination related settings check the [**Configuration**]({{ base_path }}/docs/configuration/#paginate) section.
{: .notice--info}
## Splash Page Layout
For full-width landing pages that need a little something extra add `layout: splash` to the YAML Front Matter.
**Includes:**
* Optional header image with caption
* Optional header overlay (solid color/image) + text and optional "call to action" button
* Feature blocks (`left`, `center`, and `right` alignment options)
![splash page layout example]({{ base_path }}/images/mm-layout-splash.png)
Feature blocks can be assigned and aligned to the `left`, `right`, or `center` with a sprinkling of YAML. For full details on how to use the `feature_row` helper check the [**Content**]({{ base_path }}/docs/helpers-and-shortcodes/) section or review a [sample splash page]({{ site.gh_repo }}/gh-pages/_pages/splash-page.md).
---
## Headers
@@ -138,10 +219,12 @@ header:
To overlay text on top of a header image you have a few more options:
* `overlay_image` --- header image you'd like to overlay. Same rules as `header.image` from above.
* `excerpt` --- auto-generated page excerpt is added to the overlay text or can be overridden.
* `cta_label` --- call to action button text label (default is `more_label` in UI Text data file)
* `cta_url` --- call to action button URL
| Front Matter variable | Description |
| --------------------- | ----------- |
| `overlay_image` | Header image you'd like to overlay. Same rules as `header.image` from above. |
| `excerpt` | Auto-generated page excerpt is added to the overlay text or can be overridden. |
| `cta_label` | Call to action button text label (default is `more_label` in UI Text data file). |
| `cta_url` | Call to action button URL. |
With this YAML Front Matter:
@@ -199,10 +282,12 @@ defaults:
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
| Front Matter variable | Description |
| --------------------- | ----------- |
| `title` | Title or heading. |
| `image` | Image path placed in `/images/` folder or an external URL. |
| `image_alt` | Alternate description for image. |
| `text` | Markdown supported text. |
Multiple blocks can also be added by following the example below: