添加功能
Jekyll 默认生成的网站比较简陋,这篇博客为 Jekyll 生成的博客网站增加摘要、分页和归档的功能。
摘要
在默认的首页中,Jekyll 仅列出所有博客的标题。读者对博客的内容很难有一个直观的认识,我们可以通过添加摘要来解决这个问题。
使用摘要分隔符
在_config.yml
中设置摘要分隔符:
excerpt_separator: <!--more-->
Jekyll 会提取博客中摘要分隔符之前的内容作为摘要。
直接编写摘要
在博客的 front matter 中直接编写摘要:
---
layout: post
excerpt: 给 Jekyll 博客添加摘要、分页和归档功能
---
在首页使用 Liquid 表达式显示摘要:
---
layout: default
---
{% for post in paginator.posts %}
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<div class="excerpt">
{{ post.excerpt }}
</div>
{% endfor %}
分页
当博客达到一定数量时,我们可以使用 jekyll-paginate 插件进行分页。
在 Gemfile 中添加 jekyll-paginate :
group :jekyll_plugins do
gem "jekyll-paginate"
end
在_config.yml
中添加 jekyll-paginate :
plugins:
- jekyll-paginate
在_config.yml
中指定每一页的博客数量:
paginate: 5
在首页中添加分页链接:
---
layout: default
---
{% for post in paginator.posts %}
<h6>{{ post.date | date: '%b %d, %Y' }}</h6>
<h3><a href="{{ post.url }}">{{ post.category }} {{ post.title}}</a></h3>
<div class="excerpt">
{{ post.excerpt }}
</div>
<br/>
{% endfor %}
{% if paginator.total_pages > 1 %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}">« Prev</a>
{% else %}
<span>« Prev</span>
{% endif %}
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
{{ page }}
{% elsif page == 1 %}
<a href="{{ '/' | relative_url }}">{{ page }}</a>
{% else %}
<a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}">Next »</a>
{% else %}
<span>Next »</span>
{% endif %}
</div>
{% endif %}
注意,分页功能只适用于HTML文件,所以你的首页应该使用index.html
定义而不是index.md
。
归档
直接添加归档
在博客的 front matter 中添加 category:
---
category: Jekyll
---
使用 Liquid 表达式编写一个根据 category 生成归档的页面:
---
layout: page
title: 归档
permalink: /archive/
---
{% assign ordered_categories = site.categories | sort %}
{% for category in ordered_categories %}
<h4>{{ category[0] }}</h4>
<ul>
{% assign ordered_posts = category[1] | sort:"date" %}
{% for post in ordered_posts %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
{% endfor %}
这里先对所有的 category 排序,其中category[0]
是 category 的名称,category[1]
是 category 下的博客,然后对同一个 category 下的博客按照date
排序,最后依次生成每个博客的标题和链接。
使用归档插件
jekyll-archives 是一个 Jekyll 归档插件,也可以使用这个插件来生成归档。