Splash Page-界面布局实践

如何为自己的网站添加飞溅页面？我是这么做的。

1. 首先到_data中的navigation.yml里为Splash Page新增一个分栏
   

   splash page.png

2. 到_pages中新建一篇文章，命名为splash-page.md。接着参考学习一下minimal-mistakes中关于飞溅页面设置的文章 Splash Page Layout

• 在splash-page.md中添加与其他md文章一样的开头代码
  
  文章开头代码.png

3. 接着就是设置飞溅页面的重头戏！！

• 横排样式

feature_row:
  - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 1"
    title: "Placeholder 1"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."
    url: "#test-link"
    btn_label: "Read More"
    btn_class: "btn--inverse"
  - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
    title: "Placeholder 2"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."

以上代码便是设置网页正文图片的代码。
feature_row意为功能行，是用来排列正文图片和内容链接的一种格式。
image_path图片（在自己仓库中的）完整路径
alt图像的替代文字
title文章标题
excerpt文章的精炼描述
url“read more”按钮的链接网址
btn_label按钮文字标签
btn_class按钮样式

4. 竖排样式
   以上是横排样式，下面代码可以设置竖排的每篇文章自成一行的样式。

feature_row2:
  - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Placeholder Image Left Aligned"
    excerpt: 'This is some sample content that goes here with **Markdown** formatting. Left aligned with `type="left"`'
    url: "#test-link"
    btn_label: "Read More"
    btn_class: "btn--primary"
feature_row3:
  - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Placeholder Image Right Aligned"
    excerpt: 'This is some sample content that goes here with **Markdown** formatting. Right aligned with `type="right"`'
    url: "#test-link"
    btn_label: "Read More"
    btn_class: "btn--primary"

每一个feature_row即是一行。因而假如希望一行有四五六个图片文章的话，那么在同一个feature_row中添加多个图片文章链接即可。

5. 对齐方式

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

{% include feature_row %}

{% include feature_row id="feature_row2" type="left" %}

feature_row id功能行名称
type规定功能行内容快对齐样式，基本的有left centure right三种

到这里我们的飞溅页面就基本搭建完成啦！