Github Pages 很帅,Jekyll这个基于MarkDown的博客系统也很帅 :smile: , 不过还是有很多限制的:

所以没有Tag,Category等功能.

一个博客系统没有Tag,Category怎么活?

于是乎开始折腾,翻看Jekyll API,研究Liquid语法,给这个博客搭建了一个Tag,Category界面,记录一下,帮助以后扩展其他页面.

准备事项

走过的坑

  • Github Pages 是一个静态站点,所以不支持任何传参 :broken_heart:
  • 不支持传参数,那就想办法截取url,结果绕不过permalink :broken_heart:
  • 网上各种例子都必须维护一套巨大的Category,Tag库. 写个博客还不够累的. :broken_heart:

好在Jekyll提供了一个site.tags.TAG,site.categories.CATEGORY Link 的方法,

The list of all Posts with tag TAG.

Do it

于是创建了如下这个界面,把所有的帖子按照Tag来进行分组显示

tag.html

---
layout: default
title: Tags
permalink: /blog/tags/
---

<header class="post-header">
	<h1>Tags</h1>
</header>

<section id="archive">
    {% for post_info in site.tags %}
    	{% assign post_tag = post_info[0] %}
    	{% assign tag = site.data.tags[post_tag] %}
    	{% if tag == null %}
    		{% assign tag = post_tag %}
    	{% endif %}
	<h2 class="ahour"><a name="{{post_tag}}">{{ tag }} ({{ post_info[1].size }}):</a></h2>
	<ul>
		{% for post in post_info[1] %}
		<li style="list-style-type:none;"><time>{{ post.date | date: "%m-%d" }}</time><a href="{{ post.url }}">{{ post.title }}</a></li>
		{% endfor %}
	</ul>
    {% endfor %}
</section>

这个中间有一个小技巧后面会用到,那就是给每个标签打一个锚点

<h2 class="ahour"><a name=""> ():</a></h2>

Post.html添加标签

<article class="post-content">
  {{ content }}

  {% assign category = site.data.categories[page.category] %}
  <p id="post-meta">Posted 
  {% if category == null %}
    {% assign category = page.category %}
  {% endif %}
  in <code><a href="/blog/category/#{{ page.category }}">{{ category }}</a></code>
  

  {% assign tag_size = page.tags.size %}
  {% if tag_size > 0 %}
    with tag:<i class="fa fa-tags"></i>
    {% for post_tag in page.tags %}
        <a href="/blog/tags/#{{post_tag}}">{{ post_tag }}</a>{% if forloop.last == false %},{% endif %}
    {% endfor %}
  {% endif %}</p>
</article>

核心就是用上面的锚点来跳转,也算是实现了Tag和Category

<a href="/blog/tags/#{{post_tag}}">{{post_tag}}</a>

预览效果

Posted in Jekyll with tags: Jekyll, Github Pages