Test Working with Collections of Jekyll Theme Minimal Mistakes

Aug. 21, 2022

(1)在 _config.yml文件 中配置名为portfolio的collection

1
2
3
4
collections:
  portfolio:
    output: true
    permalink: /:collection/:path/

并设置 pages 和 posts 默认的 Front Matter:

1
2
3
4
5
6
7
8
defaults:
  # _portfolio
  - scope:
      path: ""
      type: portfolio
    values:
      layout: single
      author_profile: true

(2)在 _pages 文件夹中写入 portfolio.md 文件

1
2
3
4
5
6
7
8
9
10
---
title: Portfolio
permalink: /portfolio/
layout: collection
collection: portfolio
entries_layout: grid
classes: wide
sort_by: date
sort_order: reverse
---

该文件设置了portfolio的显示页面格式。

其中,页面的布局为collection,是由/_layouts/collection.html定义的。

(3)在 /_data/navigation.yml 文件中添加如下代码

1
2
3
4
main:
  # ......
  - title: "Portfolio"
    url: /portfolio/

上述代码的功能是使 Portfolio 出现在导航栏中。

(4)在网站的根目录下创建 _portfolio 文件夹

image-20220821124622493

之后,在该文件夹中创建几个测试文件:portfolio1.mdportfolio2.mdportfolio3.md

1
2
3
---
title: Portfolio1
---
1
2
3
---
title: Portfolio2
---
1
2
3
---
title: Portfolio3
---

最后,在本地 bundle exec jekyll serve ,查看效果:

image-20220821125002104

image-20220821132729171


References

[1] Working with Collections - Minimal Mistakes.

[2] Portfolio - Minimal Mistakes.

[3] mmistakes/jekyll-sample-content: Sample Jekyll content (posts, pages, collections, and images) to test your theme against.