jekyll.jpg
先在 images 文件夹里添加照片，推荐一个图片来源：https://unsplash.com/
然后在 master 分支里面的 index.html 中添加页头图片代码。
注意作者在【layouts-Home page layouts】中提到首页不显示最新文章的方法，可尝试
一共有三种方法，做法与"如何为文章页眉添加全宽标题图像"有异曲同工之妙，可以进行对比和参考，下面我只列出代码和直接实现效果。
要想显示作者信息，必须要在 index.yml里把author前面的# 去掉，#是隐藏不显示的意思
删除#显示作者信息.jpg
第一种：添加所有元素，除了不透明没有加上去之外
代码：
在
---
layout: home
author_profile: true
添加如下代码
permalink: /
header:
overlay_color: "#5e616c"
overlay_image: /images/rain.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "<i class='fa fa-download'></i> Install Now"
cta_url: "/docs/quick-start-guide/"
excerpt: '艺术本来就是为弥补人生与自然的缺陷'
feature_row:
- image_path: /images/unsplash-gallery-image-4.jpg
alt: "customizable"
title: "Super Customizable"
excerpt: "Everything from the menus, sidebars, comments, and more can be
configured or set with YAML Front Matter."
url: "/docs/configuration/"
btn_label: "Learn More"
- image_path: mm-responsive-feature.png
alt: "fully responsive"
title: "Responsive Layouts"
excerpt: "Built on HTML5 + CSS3. All layouts are fully responsive with helpers
to augment your content."
url: "/docs/layouts/"
btn_label: "Learn More"
- image_path: mm-free-feature.png
alt: "100% free"
title: "100% Free"
excerpt: "Free to use however you want under the MIT License. Clone it, fork it,
customize it, whatever!"
url: "/docs/license/"
btn_label: "Learn More"
github:
- excerpt: '{::nomarkdown}<iframe style="display: inline-block;"
src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-
mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0"
width="160px" height="30px"></iframe> <iframe style="display: inline-block;"
src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-
mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0"
width="158px" height="30px"></iframe>{:/nomarkdown}'
intro:
- excerpt: 'Get notified when I add new stuff [<i class="fa fa-twitter"></i>
@mmistakes](https://twitter.com/mmistakes){: .btn .btn--twitter}'
---
{% include feature_row id="intro" type="center" %}
{% include feature_row %}
效果：
颜色背景文本.jpg
第二种：用纯色作为背景
代码：
在overlay_image前加上 " # " 隐藏背景图片，用overlay_color在色轮上选择相应的颜色代码
添加#在背景图片前隐藏.jpg
效果：
纯色背景文本.jpg
第三种：用图片作为背景，文本不透明化
代码：
可以在指定黑色叠加层的不透明度（在0和之间1）
overlay_filter: 0.5 "#" same as adding an opacity of 0.5 to a black background
效果：失败，显示为无法加载图片并且只是纯色背景没有显示不透明，当去掉颜色后会出现背景变白只有文本
第三种：用图片作为背景，没有文本，视觉极具震撼
代码：删掉header中部分代码，去掉overlay_只留image
image: /images/rain.jpg
效果：
只留大图.jpg
接着出现了问题，首页页面内容超过五篇会只显示最后一页且无法实现跳转，只能停留在最后一页。
具体描述：是修正pagnate多页无法跳转的问题，posts超于5篇时（模板默认一页显示5篇），多页状态下无法跳转至前页。
所以只需要删除以下代码就能改正，页面便能实现跳转
代码：
permalink: /
feature_row:
- image_path: /images/unsplash-gallery-image-4.jpg
alt: "customizable"
title: "Super Customizable"
excerpt: "Everything from the menus, sidebars, comments, and more can be
configured or set with YAML Front Matter."
url: "/docs/configuration/"
btn_label: "Learn More"
- image_path: mm-responsive-feature.png
alt: "fully responsive"
title: "Responsive Layouts"
excerpt: "Built on HTML5 + CSS3. All layouts are fully responsive with helpers
to augment your content."
url: "/docs/layouts/"
btn_label: "Learn More"
- image_path: mm-free-feature.png
alt: "100% free"
title: "100% Free"
excerpt: "Free to use however you want under the MIT License. Clone it, fork it,
customize it, whatever!"
url: "/docs/license/"
btn_label: "Learn More"
github:
- excerpt: '{::nomarkdown}<iframe style="display: inline-block;"
src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-
mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0"
width="160px" height="30px"></iframe> <iframe style="display: inline-block;"
src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-
mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0"
width="158px" height="30px"></iframe>{:/nomarkdown}'
intro:
- excerpt: 'Get notified when I add new stuff [<i class="fa fa-twitter">
</i>
@mmistakes](https://twitter.com/mmistakes){: .btn .btn--twitter}'
效果成功.jpg
{% include feature_row id="intro" type="center" %}
{% include feature_row %}
只剩下：
删除代码实现正确跳转.jpg
效果：
效果成功.jpg
