这是背景图片

功能:使用 jekyll 的 Collections 功能


2021.04.04 补充:下文中提到的“专题”、“收藏夹”、“集合”都是指 Collections 功能。

参考文档:

  1. 《集合(Collections)》
  2. 《11. Introduction to collections》

第一步:修改配置文件,注册新专题

首先我们要修改配置文件 _config.yml,在文章底部添加以下内容:

collections:
  jekyll: # 这是新专题的名称
    output: true  # 是否允许集合内文档作为单个文件进行输出
    permalink: /docs/jekyll/:title/ # 设置url格式

如此就完成了专题 jekyll 的注册;接下来重启 jekyll 服务,以使更改生效。

第二步:创建专题目录

专题目录必须放在 根目录 下,和文件夹 _post 平级,文件名格式为“下划线+英文字母”,示例:_abc(英文字母之间不推荐使用连字符)。

由于我们注册的专题名为 jekyll,所以我们要创建专题目录的为 _jekyll,创建完成后的网站结构为:

qinyuanchunxue.github.io
    |- _includes
    |- _jekyll  # 创建的专题目录
    |- _layouts
    |- _posts
    ......
    ......
    ......

第三步:创建专题内容页

_layouts 模板目录下创建专题内容页模板 jekyll.html

  • 如果需要修改,可在此模板文件中修改;
  • 如果不需要修改,可直接复制 post.html 文件中的内容放到此处。

第四步:创建专题列表页

  1. 复制根目录下的 index.html,并更名为 jekyll.html;
  2. 将其中的 site_posts 更改为 site_jekyll
  3. 将其中的 paginator.posts 更改为 site_post.posts
  4. 移除 {\%- include page_paginate.html -%}(这里为了防止冲突,多写了一个“\”);

修改前的 jekyll.html 主题内容:

修改后的 jekyll.html 主题内容:

其中 {\ % assign mod3 = forloop.index | modulo: 2 %} ... {\ % if mod3 == 0 %}<div class="w-100"></div>{\% endif %} 的作用是: 每两个 div 后添加一个新的 div。

第五步:文件搬家

  1. _posts 目录中和 jekyll 相关的文章移动到 _jekyll 目录中;
  2. 编辑相应的文章,修改文章布局:layout: post => layout: jekyll
  3. 编辑专题列表页(根目录/jekyll.html),设置固定链接:permalink: /jekyll/
  4. 编辑专题内容页(根目录/_layouts/jekyll.html),删除“标签”和“分类”的超链接;
  5. 访问 http://localhost:4000/jekyll/ 即可浏览到最终效果。

另外,如果不想每次写文章都手动注明“布局的名称”,那就可以在 _config.yml 文件底部添加以下内容:

参考文档:《Front matter defaults》

defaults:   # 默认设置属性
  - scope:
      path: ""
      type: "jekyll"
    values:
      layout: "jekyll"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"

2021.03.29 补充:

这里还可以注册自定义合集的名称,代码为 collections_dir: docs,如果启用该项,则:

  1. 需要在根目录下创建文件夹 “docs”;
  2. 所有专题文件夹(如 _jekyll)和默认文件夹 “_post” 都要移动到 “docs” 文件夹下
  3. 专题文章链接会由 “abc.com/jekyll/abc.html” 变为 “abc.com/docs/jekyll/abc.html”;置于 “_post”文件夹中的文件链接则不变。

第一步中的代码则变为:

#自定义合集目录名称不能以下划线“_”开头。
#当启用时,需要将“_post目录(这也是合集:默认的文章合集)”也移到该目录下。
collections_dir: docs
collections:
    jekyll: # 这是集合名称,在目录中名称为“_jekyll”
        output: true  # 是否允许集合内文档作为单个文件进行输出
        permalink: /docs/jekyll/:title/ #设置url格式

第二步中的文章结构为:

qinyuanchunxue.github.io
    |- _includes
    |- _layouts
    |- docs
        |- _jekyll  # 创建的专题目录
        |- _posts
    ......
    ......
    ......

第三步中的创建文件改为在专题目录中创建 index.html 文件。

|- docs
    |- _jekyll  # 专题目录
        ......
        |— index.html # 创建的文件(用作专题的目录页)
        # 问题1:这里 jekyll 不会使用集合 jekyll 目录下的 index.html,而是生成自己的 index.html。
        # 解决办法:在集合 jekyll 目录下的 index.html 上添加属性 “permalink: /docs/jekyll/”。
        # 问题2:在 index.html 上添加目录代码时,会发现该 index.html 也会同时出现,除了影响阅读之外还会造成SEO抓取的死循环。
        # 解决办法:利用判断语句隐藏该 index.html。
    |- _posts

第四步的代码则为:


正文结束,如有错误或者遗漏请点击屏幕下方右侧的“发现错误”告诉我。