Minimal Mistakes Jekyll Theme 文档

文件结构

minimal-mistakes
├── _data                      # data files for customizing the theme
|  ├── navigation.yml          # main navigation links
|  └── ui-text.yml             # text used throughout the theme's UI
├── _includes
|  ├── analytics-providers     # snippets for analytics (Google and custom)
|  ├── comments-providers      # snippets for comments (Disqus, Facebook, Google+, and custom)
|  ├── footer                  # custom snippets to add to site footer
|  ├── head                    # custom snippets to add to site head
|  ├── base_path               # site.url + site.baseurl shortcut
|  ├── feature_row             # feature row helper
|  ├── gallery                 # image gallery helper
|  ├── group-by-array          # group by array helper for archives
|  ├── nav_list                # navigation list helper
|  ├── toc                     # table of contents helper
|  └── ...
├── _layouts
|  ├── archive-taxonomy.html   # tag/category archive for Jekyll Archives plugin
|  ├── archive.html            # archive base
|  ├── categories.html         # archive listing posts grouped by category
|  ├── category.html           # archive listing posts grouped by specific category
|  ├── collection.html         # archive listing documents in a specific collection
|  ├── compress.html           # compresses HTML in pure Liquid
|  ├── default.html            # base for all other layouts
|  ├── home.html               # home page
|  ├── posts.html              # archive listing posts grouped by year
|  ├── search.html             # search page
|  ├── single.html             # single document (post/page/etc)
|  ├── tag.html                # archive listing posts grouped by specific tag
|  ├── tags.html               # archive listing posts grouped by tags
|  └── splash.html             # splash page
├── _sass                      # SCSS partials
├── assets
|  ├── css
|  |  └── main.scss            # main stylesheet, loads SCSS partials from _sass
|  ├── images                  # image assets for posts/pages/collections/etc.
|  ├── js
|  |  ├── plugins              # jQuery plugins
|  |  ├── vendor               # vendor scripts
|  |  ├── _main.js             # plugin settings and other scripts to load after jQuery
|  |  └── main.min.js          # optimized and concatenated script file loaded before </body>
├── _config.yml                # site configuration
├── Gemfile                    # gem file dependencies
├── index.html                 # paginated home page showing recent posts
└── package.json               # NPM build scripts

Post

YAML

---
title: "文章标题" # 标题
excerpt: "文章摘要" # 摘要
excerpt_separator: "<!--more-->" # 摘要分隔符
comments: true
search: false #
categories:   # 分类
  - document
tags:         # 标签
  - Post Formats
  - notice
last_modified_at: 2018-06-21 # 最后修改时间
toc: true # toc(table of contents) 目录
toc_sticky: true  # 固定
toc_label: "Unique Title" # 自定义title
toc_icon: "heart"  # 对应 Font Awesome icon 名 (没有 fa 前缀)
link: https://github.com # 当前 post 链接到
header:
  image: /assets/images/page-header-image.png
  og_image: /assets/images/page-header-og-image.png
read_time: true # 阅读时间
related: true # 相关推荐
share: true # 分享
author_profile: false # 作者信息栏
---

Notice

Basic usage

**Default Notice:** 默认 Notice 样式
{: .notice}

**Primary Notice:**
{: .notice--primary}

**Info Notice:**
{: .notice--info}

**Warning Notice:**
{: .notice--warning}

**Danger Notice:**
{: .notice--danger}

**Success Notice:**
{: .notice--success}

Default Notice: Default Notice

Primary Notice: Primary Notice

Info Notice: Info Notice

Warning Notice: Warning Notice

Danger Notice: Danger Notice

Success Notice: Success Notice

Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with markdownify is a good way to go.

{% capture notice-2 %}
#### New Site Features

* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}

<div class="notice">{{ notice-2 | markdownify }}</div>

New Site Features

• You can now have cover images on blog pages
• Drafts will now auto-save while writing

Or you could skip the capture and stick with straight HTML.

<div class="notice">
  <h4>Message</h4>
  <p>A basic message.</p>
</div>

Message

A basic message.

Quote

Only one thing is impossible for God: To find any sense in any copyright law on the planet.

Mark Twain

Video

YouTube video embed below.

Header image

This post has a header image with an OpenGraph override.

header:
  image: /assets/images/page-header-image.png
  og_image: /assets/images/page-header-og-image.png

This post has a header image with an OpenGraph override.

header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  og_image: /assets/images/page-header-og-image.png
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  cta_url: "https://unsplash.com"

Image

Standard image with no width modifier classes applied.

HTML:

<img src="{{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg" alt="">

or Kramdown:

![alt]({{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg)

Image that fills page content container by adding the .full class with:

HTML:

<img src="{{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg" alt="" class="full">

or Kramdown:

![alt]({{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg)
{: .full}

This post has a teaser image with an OpenGraph override.

header:
  teaser: /assets/images/page-header-teaser.png
  og_image: /assets/images/page-header-og-image.png

Stairs? Were we’re going we don’t need no stairs.

Photo from Unsplash.

Gallery

gallery:
  - url: /assets/images/unsplash-gallery-image-1.jpg
    image_path: /assets/images/unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Image 1 title caption"

And then drop-in the gallery include — gallery caption is optional.

{% include gallery caption="This is a sample gallery with **Markdown support**." %}

And for giggles one more gallery just to make sure this works. To fill page content container add class="full".

Layout

Markup