Jekyll 基本应用:分类、标签、归档、分页

Jekyll 博客基本功能已完成大半,觉得有必要整理一下然后总结在这里,为自己和需要的人提供便利,以后也会陆续总结更多功能。

一、Jekyll 分类:Category

Category 和 Tag 的思路很相似。本博客中使用的分类代码如下:

{{ site.categories | size }}

<hr>

<div style="background: #F7F6F6;">
	
{% for category in site.categories %}

<p style="font-size:24px;margin-left:5%;">
<i class="fa fa-folder"></i>
<a href="#{{ category | first }}" title="view all posts in &lt;{{ category | first }}&gt;">

{{ category | first }}

</a>
<i class="fa fa-angle-left"></i>

{{ category | last | size }}

<i class="fa fa-angle-right"></i></p></ul>

{% endfor %}

</div>
<h2 style="text-align:center;">
<i class="fa fa-bolt"></i>
<i class="fa fa-bolt"></i>
<i class="fa fa-bolt"></i>
<strong>
Details
</strong></h2>

{% for category in site.categories %}

<p style="font-size:24px;margin-left:5%;">

<i class="fa fa-folder-open"></i>

<a href="#{{ category | first }}" name="{{ category | first }}" title="view all posts in &lt;{{ category | first }}&gt;">

{{ category | first }}

</a>
<i class="fa fa-angle-left"></i>

{{ category | last | size }}

<i class="fa fa-angle-right"></i></p>
<ul>

{% for post in category.last %}

<ol>
<i class="fa fa-calendar"></i>

{{ post.date | date:"%Y-%m-%d"}}

<i class="fa fa-terminal"></i>
<a href="{{ post.url }}">

{{ post.title }}

</a></ol>

{% endfor %}

</ul> 

{% endfor %}

二、Jekyll 标签:Tag

说明

tag 的大小应该反映出实际生活在不同领域的时间花费。

Tag 和 Category 的实现思路几乎是一致的,不过在对标签样式的处理上是 Tag 独有的。

我的思路和 Liberize 的大体一致,修改了部分代码。本博客使用到的源代码如下:

{{ site.tags | size }}

<hr>
<div style="margin-bottom:90%;margin-top:10%;">

{% assign first = site.tags.first %}
{% assign max = first[1].size %}
{% assign min = max %}
{% for tag in site.tags offset:1 %}
{% if tag[1].size > max %}
{% assign max = tag[1].size %}
{% elsif tag[1].size < min %}
{% assign min = tag[1].size %}
{% endif %}
{% endfor %}
{% assign diff = max | minus: min %}

{% for tag in site.tags %}
{% assign temp = tag[1].size | minus: min | times: 35 | divided_by: diff %}
{% assign base = temp | divided_by: 3 %}
{% assign remain = temp | modulo: 4 %}
{% if remain == 0 %}
{% assign size = base | plus: 10 %}
{% elsif remain == 1 or remain == 2 %}
{% assign size = base | plus: 9 | append: '.5' %}
{% else %}
{% assign size = base | plus: 10 %}
{% endif %}
{% if remain == 0 or remain == 1 %}
{% assign color = 9 | minus: base %}
{% else %}
{% assign color = 8 | minus: base %}
{% endif %}

<span style="padding:3px; margin:3px; float:left; background:white; background:#BFD9DB; border-radius:100%;">
<a href="#{{ tag[0] }}" style="font-size: {{ size }}pt;color: #{{ color }}{{ color }}{{ color }};">

{{ tag[0] }}

</a>
<span style="color: #{{ color }}{{ color }}{{ color }};">

<sup>
{{ tag | last | size }}
</sup>

</span></span> 

{% endfor %}

</div>
<h2 style="text-align:center;">
<i class="fa fa-bolt"></i>
<i class="fa fa-bolt"></i>
<i class="fa fa-bolt"></i>
<strong>
Details
</strong></h2>

{% for tag in site.tags %}

<p style="font-size:24px;margin-left:5%;">
<i class="fa fa-tag"></i>
<a href="#{{ tag | first }}" name="{{ tag | first }}" title="All posts below are taged by &lt;{{ tag | first }}&gt;">

{{ tag | first }}
	
</a>

<sup>
{{ tag | last | size }}
</sup>

</p>
<ul>

{% for post in tag.last %}

<ol>
<i class="fa fa-calendar"></i>

{{ post.date | date:"%Y-%m-%d"}}

<i class="fa fa-terminal"></i>
<a href="{{ post.url }}">

{{ post.title }}

</a></ol>

{% endfor %}

</ul> 

{% endfor %}

三、Jekyll 归档:Archive

刚开始接触的时候,或许会问:如何自动根据格式化的文件名自动生成 Achive?

我最开始的办法是:

1
2
3
4
5
6
7
8
9
{% for post in site.posts %}

<ul>
<li>
{{ post.archive }}
</li>
</ul>

{% endfor %}

但这样明显不方便,因为每次写文章时都要在文件头中制定 Archive。

同时又浪费了已经按年月日格式化命名过的文章,因为 Archive 也是按年月日格式化输出。

所以不可取。更好的思路见下面。

  • 标准 Archive 输出

这是一个样本,不是本博客采用的,但是为我提供了思路。代码如下:

<ul>

{% assign count = 0 %}
{% for post in site.posts %}
{% capture this_month %}{{ post.date | date: "%Y 年 %m 月" }}{% endcapture %}
{% capture next_month %}{{ post.previous.date | date: "%Y 年 %m 月" }}{% endcapture %}
{% assign count = count | plus: 1 %}
{% if forloop.last or this_month != next_month %}

<li style="list-style:none;padding:5px;">
<i class="fa fa-archive"></i>
<a href="#{{ post.date | date: "%Y-%m" }}">{{ this_month }} &lt;{{ count }}&gt;</a></li>

{% assign count = 0 %}
{% endif %}
{% endfor %}

</ul>
  • 测试代码

在做 Archive 的时候,想要年月分开但又同时输出,即分层输出,发现用同一个循环来遍历年和月十分麻烦,暂且我也没有去找更好的做法。

下面代码是测试将可以分开输出的两个循环集成到一个循环中,并实现 计数 功能的测试代码:

{% assign count_by_year = 0 %}
{% for post in site.posts %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
{% assign count_by_year = count_by_year| plus: 1 %}
{% if forloop.last or this_year != next_year %}

<h2>
<i class="fa fa-flag-checkered"></i>

{{ this_year }} &lt;{{ count_by_year }}&gt;

</h2>

{% assign count_by_year = 0 %}
{% endif %}
{% endfor %}

<hr>

{% assign count_by_month = 0 %}
{% for post in site.posts %}
{% capture this_month %}{{ post.date | date: "%Y 年 %m 月" }}{% endcapture %}
{% capture next_month %}{{ post.previous.date | date: "%Y 年 %m 月" }}{% endcapture %}
{% assign count_by_month = count_by_month| plus: 1 %}
{% if forloop.last or this_month != next_month %}

<ul>
<li style="list-style:none;">
<i class="fa fa-archive"></i>
<a href="#{{ post.date | date: "%Y-%m" }}">

{{ post.date | date: "%Y 年 %m 月" }}

</a>

&lt;{{ count_by_month }}&gt;

</li></ul>

{% assign count_by_month = 0 %}
{% endif %}
{% endfor %}
  • 备份代码

这是本博客目前最终采用的思路。代码如下:

<div style="margin-left:10%;">

{% for post in site.posts  %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}

{% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
{% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}

{% if forloop.first %}

<h2>
<i class="fa fa-flag-checkered"></i>

{{ this_year }}

</h2>
<ul>
<li style="list-style:none;">
<i class="fa fa-archive"></i>
<a href="#{{ post.date | date: "%Y-%m" }}">

{{ post.date | date: "%Y 年 %m 月" }} {{ count_by_month }}


</a></li></ul>

{% endif %}
{% if forloop.last %}


{% else %}
{% if this_year != next_year %}

<h2>
<i class="fa fa-flag-checkered"></i>

{{ next_year }}

</h2>
<ul>
<li style="list-style:none;">
<i class="fa fa-archive"></i>
<a href="#{{ post.previous.date | date: "%Y-%m" }}">

{{ post.previous.date | date: "%Y 年 %m 月" }}

</a></li></ul>

{% else %}
{% if this_month != next_month %}

<ul>
<li style="list-style:none;">
<i class="fa fa-archive"></i>
<a href="#{{ post.previous.date | date: "%Y-%m" }}">

{{ post.previous.date | date: "%Y 年 %m 月" }}

</a></li></ul>

{% endif %}
{% endif %}
{% endif %}
{% endfor %}

</div>

四、Jekyll 分页:Paginate

如果是在首页中要分页,Jekyll 也只能在首页,即 index.html 中分页。

参考我博客中的分页功能,思路和 天镶 的一致,但是我自己增加了跳页功能。

首先在 _config.yml 文件中开启分页功能,我目前的配置是这样的:

paginate: 3
paginate_path: "/home/paginate_:num"

然后再 /home/index.html 文件中配置如下代码:

<section class="main-content" style="font-family:Georgia;">
<div class="home">
<h3 class="page-heading">
<strong>
<i class="fa fa-home" name="top"> Home </i>
<i class="fa fa-terminal" style="color:red;"></i></h3>
<h2 style="text-align:center;padding-bottom:30px;">
<i class="fa fa-bolt"></i>
<i class="fa fa-bolt"></i>
<i class="fa fa-bolt"></i>
Latest 3 by @ckwongloy
</strong></h2>
<ul class="post-list">
{% for post in paginator.posts %}
<hr>
<li style="list-style:none;">
<h3>
<span class="post-meta">
<b>
<a href="#" style="padding:10px;" title="Post">
<i class="fa fa-paper-plane" style="font-size:30px;"></i></a>
<i class="fa fa-calendar"></i>
<a href="/archive.html#{{ post.date | date: "%Y-%m" }}" title="Archive:{{ post.date | date: "%Y-%m" }}">
{% assign d = post.date | date: "%-d" %} 
{{ post.date | date: "%B" }}
{% case d %}
{% when '1' or '21' or '31' %}{{ d }}st
{% when '2' or '22' %}{{ d }}nd
{% when '3' or '23' %}{{ d }}rd
{% else %}{{ d }}th
{% endcase %}, 
{{ post.date | date: "%Y, %A" }}.
</a></b></span></h3>
<h1 style="text-align:center;font-size:26px;"><strong>
<i class="fa fa-angle-double-left" style="color:silver;"></i>
{{ post.title }}
<i class="fa fa-angle-double-right" style="color:silver;"></i>
</strong></h1>
<h4 style="text-align:center;">
<i class="fa fa-heart"></i>
<a href="https://github.com/ckwongloy" target="_blank" title="Author:@ckwongloy">
{% if site.id %}
{{ site.id }}
{% endif %}
</a>
<i class="fa fa-folder"></i>
{% for categories in post.categories %}
<a href="/category.html#{{ post.categories[0] }}" title="Category:{{ post.categories[0] }}">
{{ post.categories[0] }}
</a>
{% endfor %}
<i class="fa fa-tags"></i>
{% for tag in post.tags %}
<a href="/tag.html#{{ tag }}" title="Tag:“{{ tag }}”" style="background:#BFD9DB;margin:2px;radius:50%;">
<i>
{{ tag }}
{{ tag | last }}
</i></a>
{% endfor %}
<i class="fa fa-pencil"></i>
<a title="文章字数:{{ post.content | number_of_words }}">
{{ post.content | number_of_words }}
</a></h4>
{{ post.excerpt }}
</p>
<p style="text-align:right;">
<a href="{{ post.url }}" class="btn" style="background-color:#438F97;" title="Read this full article.">
Read More
<i class="fa fa-angle-double-right"></i></a></p>
{% endfor %}
</li></ul>
<hr>
<h2 style="text-align:center;">
{% if paginator.page == 1 %}
<span style="margin-right:15px;"><i><b>首页</b></i></span>
{% endif %}
{% if  paginator.total_pages >1 %}
{% if paginator.previous_page %}
<a href="/home/" title="首页">首页</a>
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" title="上一页">
<span class="fa fa-backward" style="padding:10px;"></span></a>
{% endif %}
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<select onChange="location.replace(this.options[this.selectedIndex].value)">
<option>
第
{{ paginator.page }}
 /
{{ paginator.total_pages }}
页
</option>
{% assign page_num = 1 %}
<option value="/home/">跳至:首页</option>
{% for page in (1..paginator.total_pages) %}
{% assign page_num = page_num | plus: 1 %}
{% if page_num < paginator.total_pages %}
<option value="/home/paginate_{{ page_num }}/">跳至:第 {{ page_num }} 页</option>
{% endif %}
{% endfor %}
<option value="/home/paginate_{{ paginator.total_pages }}">跳至:尾页</option>
</select>
{% elsif page == 1 %}
{% else %}
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" title="下一页">
<i class="fa fa-forward" style="padding:10px;"></i></a>
<a href="/home/paginate_{{ paginator.total_pages }}/" title="尾页">尾页</a>
{% endif %}
{% if paginator.page == paginator.total_pages %}
<span style="margin-left:15px;"><i><b>已达尾页</b></i></span>
{% endif %}
{% endif %}
</h2></div></section>

最终效果如下:

Jekyll 跳页功能

特别感谢

在折腾 Jekyll 的整个过程中 Google 了不少时间,也参考了不少 Jekyll 博客源码,其中对我帮助最大的是:liberize’s blog

本博客的几项重要功能的实现都和该博客提供的思路有关,这为我省了不少时间,在此非常感谢 liberize 愿意提供博客源码。

参考

本文最后修改时间: 2015年10月09日 19:07:20 (完) CC BY-NC-ND 3.0

若您发现文章中的错误,并愿告知于我,或想与我交流,我的联系方式在: Contacts


上一篇 PHP 个人经验及问题

All The Best

下一篇 从双层 VPN 到多层 VPN 与多层跳板