如何为自己的网站添加飞溅页面？我是这么做的。
-
首先到
_data中的navigation.yml里为Splash Page新增一个分栏
splash page.png 到
_pages中新建一篇文章，命名为splash-page.md。接着参考学习一下minimal-mistakes中关于飞溅页面设置的文章 Splash Page Layout
- 在
splash-page.md中添加与其他md文章一样的开头代码
文章开头代码.png
- 接着就是设置飞溅页面的重头戏！！
- 横排样式
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按钮样式
- 竖排样式
以上是横排样式，下面代码可以设置竖排的每篇文章自成一行的样式。
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中添加多个图片文章链接即可。
- 对齐方式
{% 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三种
到这里我们的飞溅页面就基本搭建完成啦！
