7.9 KiB
title | permalink | excerpt | sidebar | single_layout_gallery | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Layouts | /docs/layouts/ |
|
|
{% include base_path %} {% include toc icon="columns" title="Included Layouts" %}
The bread and butter of any theme. Below you'll find the layouts included with Minimal Mistakes, what they look like and the type of content they've been built for.
Default Layout
The base layout all other layouts inherit from. There's not much to this layout apart from pulling in several _includes
:
<head>
elements- masthead navigation links
- {% raw %}
{{ content }}
{% endraw %} - page footer
- scripts
Note: You won't ever assign this layout directly to a post or page. Instead all other layouts will build off of it by setting layout: default
in their YAML Front Matter.
{: .notice--warning}
Compress Layout
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.
{% include gallery id="single_layout_gallery" caption="Image header and meta info examples for single
layout" %}
Assign with layout: single
, or better yet apply as a [Front Matter default]({{ base_path }}/docs/configuration/#front-matter-defaults) in _config.yml
.
Archive Layout
Essentially the same as single
with markup adjustments and some modules removed.
![archive layout example]({{ base_path }}/images/mm-layout-archive.png)
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]
[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
Taxonomy Archive
If you have the luxury of using Jekyll plugins the creation of category and tag archives is greatly simplified. Enable support for the jekyll-archives
plugin with a few _config.yml
settings as noted in the [Configuration]({{ base_path }}/docs/configuration/#archive-settings) section.
![archive taxonomy layout example]({{ base_path }}/images/mm-layout-archive-taxonomy.png)
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:
{% raw %}<!-- start index.html body -->
{% include base_path %}
<h3 class="archive__subtitle">Recent Posts</h3>
{% for post in paginator.posts %}
{% include archive-single.html %}
{% endfor %}
{% include paginator.html %}
<!-- end index.html body -->{% endraw %}
![home page post pagination example](/N-archive/hacks-guide-minimal-mistakes-theme/media/commit/29a47da3f28e9d270ad8d7746374991394eaf058/_docs/%7B%7B%20base_path%20%7D%7D/images/mm-home-post-pagination-example.jpg)
Note: For more pagination relation settings check the [Configuration]({{ base_path }}/docs/configuration/#paginate) section. {: .notice--info}
Splash Page Layout
![splash page layout example]({{ base_path }}/images/mm-layout-splash.png)
Headers
To add some visual punch to a post or page, a large full-width header image can be included.
Note: Be sure to resize your header images. ~1280px
is a good medium if you aren't responsively serving up images. Through the magic of CSS they will scale up or down to fill the container. If you go with something too small it will look like garbage when upscaled, and something too large will hurt performance.
{: .notice--warning}
![single layout header image example]({{ base_path }}/images/mm-single-header-example.jpg)
Place your images in the /images/
folder and add the following YAML Front Matter:
header:
image: image-filename.jpg
For externally hosted images include the full image path instead of just the filename:
header:
image: http://some-site.com/image.jpg
To include a caption or attribution for the image:
header:
image: unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
ProTip: Captions written in Markdown are supported, so feel free to add links, or style text. Just be sure to wrap it in quotes. {: .notice--info}
Header Overlay
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 asheader.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 ismore_label
in UI Text data file)cta_url
--- call to action button URL
With this YAML Front Matter:
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
header:
overlay_image: unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
You should get an header image overlaid with text and a call to action button.
![single layout header overlay example]({{ base_path }}/images/mm-single-header-overlay-example.jpg)
You also have the option of specifying a solid background-color to use instead of an image.
![single layout header overlay with background fill]({{ base_path }}/images/mm-single-header-overlay-fill-example.jpg)
excerpt: "This post should display a **header with a solid background color**, if the theme supports it."
header:
overlay_color: "#333"
Sidebars
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)
Better yet, enable it with Front Matter Defaults set in _config.yml
.
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
Blocks of content can be added by using the following under sidebar
:
title
--- title or headingimage
--- image path placed in/images/
folder or an external URLimage_alt
--- alt description for imagetext
--- Markdown supported text
Multiple blocks can also be added by following the example below:
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](/N-archive/hacks-guide-minimal-mistakes-theme/media/commit/29a47da3f28e9d270ad8d7746374991394eaf058/_docs/%7B%7B%20base_path%20%7D%7D/images/mm-custom-sidebar-example.jpg)
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}