Jekyll With Usefule Plugins
88304694 2019-06-25
博客原文：http://huangyanxiang.com/2017/09/20/jekyll-with-useful-plugins.html
Jekyll 有很多有用的插件，比如分页，SEO优化等，另外Jekyll中可以使用一些Liquid没有定义的filter，可以让我们的站点更加好用。
Filters
Jekyll添加了自己的一些方法，如：
{{ "/assets/style.css" | relative_url }}
/my-baseurl/assets/style.css
{{ "/assets/style.css" | absolute_url }}
http://example.com/my-baseurl/assets/style.css
{{ site.members | where:"graduation_year","2014" }}
{{ site.members | where_exp:"item", "item.graduation_year == 2014" }}
{{ "http://foo.com/?q=foo, \bar?" | uri_escape }}
http://foo.com/?q=foo,%20%5Cbar?
{{ page.content | number_of_words }}
1337
{{ site.posts | sort: 'author' }}Tags
Jekyll支持额外的标签。
include
导入其他文件。待导入的文件都需要放置到_includes目录下。
{% include footer.html %}highlight
代码高亮支持。
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}Line numbers
{% highlight ruby linenos %}
def foo
puts 'foo'
end
{% endhighlight %}Pagination
如果文章较多，我们可以引入分页插件。
本地需要安装Pagination插件：
gem install jekyll-paginate
需要在_config.yml中配置一下：
plugins: - jekyll-paginate paginate: 15 paginate_path: "/blog/p:num"
Gemfile中最好也配置一下：
# If you have any plugins, put them here! group :jekyll_plugins do gem "jekyll-paginate" end
分页只能在index.html文件中使用，所以我这创建了/blog/index.html
里面的核心内容如下：
文章列表
{% assign posts = paginator.posts | sort: 'date' %}
{% for post in posts %}
{{ post.title }}
{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
{{ post.date | date: site.minima.date_format }}
{% endfor %}
页码跳转
{% if paginator.total_pages > 1 %}
<nav aria-label="Page navigation">
<ul class="pagination">
{% if paginator.previous_page %}
<li>
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% else %}
<li class="disabled"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
{% endif %}
{% assign curPage = paginator.page %}
{% assign totalPage = paginator.total_pages %}
{% assign leftPage = totalPage | minus: curPage %}
{% if totalPage > 7 %}
{% if curPage < 4 %}
{% assign start = 1 %}
{% assign end = 7 %}
{% else %}
{% if leftPage < 3 %}
{% assign start = totalPage | minus: 6 %}
{% assign end = totalPage %}
{% else %}
{% assign start = curPage | minus: 3 %}
{% assign end = curPage | plus: 3 %}
{% endif %}
{% endif %}
{% assign pageList = (start..end) %}
{% else %}
{% assign pageList = (1..totalPage) %}
{% endif %}
{% for page in pageList %}
{% if page == paginator.page %}
<li class="active"><a href="javascript:;">{{ page }}</a></li>
{% elsif page == 1 %}
<li><a href="{{ "/blog" }}">1</a></li>
{% else %}
<li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<li>
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% else %}
<li class="disabled"><a href="javascript:;" aria-label="Next"><span aria-hidden="true">»</span></a></li>
{% endif %}
</ul>
</nav>
{% endif %}SEO
博客的话，我们当然想被搜索引擎很好的收录，可以引入SEO插件。
本地需要安装：
gem install jekyll-seo-tag
同样配置_config.yml
plugins: - jekyll-seo-tag
配置Gemfile
# If you have any plugins, put them here! group :jekyll_plugins do gem "jekyll-seo-tag", "~> 2.1" end
使用比较简单，在你的html模板的head标签下：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% seo %}Tag Posts
一般的博客文章我们都会给他们打上标签，便于管理和系统查看，我们可以通过Jekyll的标签功能实现博客分类的目的，不过这需要做不少的内容。
标签文章列表需要有一个单独的导航页面，我的都建到/tags/目录下，如：/tags/jekyll.html
里面的核心内容：
{% assign posts = site.tags.jekyll | sort: 'date' %}
{% for post in posts %}
{{ post.title }}
{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
{{ post.date | date: site.minima.date_format }}
{% endfor %}标签和分类功能类似，可以使用相同的导航索引，我之所以没有使用category, categories是因为我不想让文章的url太长。
标签和分类的文章列表都不支持分页，尽量合理控制文章数目，避免列表过长影响体验。
博客原文：http://huangyanxiang.com/2017/09/20/jekyll-with-useful-plugins.html
相关推荐
86354492 0喜欢 / 0评论 2020-05-11
83364896 0喜欢 / 0评论 2020-02-18
aluomaidi 0喜欢 / 0评论 2020-02-03
何志文 0喜欢 / 0评论 2020-01-05
83364492 0喜欢 / 0评论 2019-10-28
DevilGoddy 0喜欢 / 0评论 2019-06-30
icbm 0喜欢 / 0评论 2019-06-30
83364896 0喜欢 / 0评论 2019-06-30
yzhj00 0喜欢 / 0评论 2019-06-28
83364492 0喜欢 / 0评论 2019-06-27
aluomaidi 0喜欢 / 0评论 2019-06-27
倩 0喜欢 / 0评论 2019-06-26
lizhi 0喜欢 / 0评论 2014-04-28
yangxingstar 0喜欢 / 0评论 2019-06-26
gjc 0喜欢 / 0评论 2019-06-26
83364492 0喜欢 / 0评论 2019-06-25
83364492 0喜欢 / 0评论 2019-06-25
87317519 0喜欢 / 0评论 2019-06-25
aluomaidi 0喜欢 / 0评论 2019-06-25
83364896 0喜欢 / 0评论 2019-06-21
83364492 0喜欢 / 0评论 2019-06-21
83374591 0喜欢 / 0评论 2019-06-20
icbm 0喜欢 / 0评论 2019-06-20
aluomaidi 0喜欢 / 0评论 2018-09-18
直到现在又开始鼓捣Jekyll静态网站后台引擎，下面就讲讲Jekyll的学习，以及在用Jekyll创建网站的时候遇到的问题。不需要数据库，不需要后台知识，用Jekyll搭建个人中小型网站就是这么简单。
huangzihao00 0喜欢 / 0评论 2019-04-03