为首页添加页头图片

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: " 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} {:/nomarkdown}'
 intro:
 - excerpt: 'Get notified when I add new stuff   [ 
 @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} {:/nomarkdown}'
 intro:
  - excerpt: 'Get notified when I add new stuff   [ 
  
 @mmistakes](https://twitter.com/mmistakes){: .btn .btn--twitter}'

效果成功.jpg

 {% include feature_row id="intro" type="center" %}

 {% include feature_row %}

只剩下：

删除代码实现正确跳转.jpg

效果：

效果成功.jpg