如何使用jekyll插件

jekyll admin

可以管理文檔
官方文檔：https://jekyll.github.io/jekyll-admin/
github文檔：https://github.com/jekyll/jekyll-admin

安裝

Genfile添加

gem 'jekyll-admin', group: :jekyll_plugins

運行

bundle install

測試

bundle exec jekyll serve

訪問http://127.0.0.1:4000/admin

配置隱藏專欄

在_config.yml配置

jekyll_admin:
  hidden_links:
    - posts
    - pages
    - staticfiles
    - datafiles
    - configuration

重新執行：

bundle exec jekyll serve

訪問http://127.0.0.1:4000/admin

在線編寫博客

標題

#  一級標題
##  二級標題
###  三級標題
####  四級標題

無序分行

- 第一行
- 第二行

有序分行

 1. 第一行
 2. 第二行

特殊字符顯色

`hello world`

代碼插入

#！/bin/bash
......

`

代碼高亮

{% highlight ruby %}
#!/bin/bash
.........
{% endhighlight %}

添加 New metadata field

添加layout 分列布局

效果顯示；否則，會以網頁的形式直接顯示文章內容。

添加時間軸，可以自定義發行日期。

jekyll-paginate

官網文檔：https://jekyllcn.com/docs/pagination/
github：https://github.com/jekyll/jekyll-paginate

Genfile添加

gem 'jekyll-paginate'

_config.yml添加

plugins:
  - jekyll-paginate

# Pagination
paginate                     : 5    #在生成的站點中每頁展示博客數目的最大值
paginate_path                : '/page-:num/'    #定分頁頁面的目標路徑

安裝

 gem install jekyll-paginate

注意：
分頁功能只支持 HTML 文件
Jekyll 的分頁功能不支持 Jekyll site 中的 Markdown 或 Textile 文件。分頁功能從名爲 index.html 的 HTML 文件中被調用時，才能工作。分頁功能是可選的，可能通過 paginate_path 配置的值，駐留和生成在子目錄中。

創建index.html,並添加如下內容：

---

layout: default
title: My Blog
---

<!-- 遍歷分頁後的文章 -->
{% for post in paginator.posts %}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="author">
    <span class="date">{{ post.date }}</span>
  </p>
  <div class="content">
    {{ post.content }}
  </div>
{% endfor %}

<!-- 分頁鏈接 -->
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="/page{{ paginator.previous_page }}" class="previous">Previous</a>
  {% else %}
    <span class="previous">Previous</span>
  {% endif %}
  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
  {% if paginator.next_page %}
    <a href="/page{{ paginator.next_page }}" class="next">Next</a>
  {% else %}
    <span class="next ">Next</span>
  {% endif %}
</div>

界面暫時並沒什麼變化。