Jekyll With Usefule Plugins

時間 2019-11-08

標籤 jekyll usefule plugins 简体版

原文原文鏈接

博客原文：http://huangyanxiang.com/2017/09/20/jekyll-with-useful-plugins.htmljavascript

Jekyll 有不少有用的插件，好比分頁，SEO優化等，另外Jekyll中可使用一些Liquid沒有定義的filter，可讓咱們的站點更加好用。css

Filters

Jekyll添加了本身的一些方法，如：html

{{ "/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' }}

Pagination

若是文章較多，咱們能夠引入分頁插件。ui

本地須要安裝Pagination插件：搜索引擎

gem install jekyll-paginate

須要在_config.yml中配置一下：url

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">&laquo;</span>
        </a>
      </li>
    {% else %}
      <li class="disabled"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&raquo;</span>
        </a>
      </li>
    {% else %}
      <li class="disabled"><a href="javascript:;" aria-label="Next"><span aria-hidden="true">&raquo;</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