Jekyll使用教程筆記 三

時間  2019-11-16
標籤 jekyll 使用 教程 筆記 简体版
原文   原文鏈接

目錄html

Front Matter

Front Matter是Jekyll開始變得很是酷的地方。任何包含YAML front matter塊的文件都將由Jekyll做爲特殊文件進行處理。Front Matter必須是文件中的第一個事物，而且必須採用在三條虛線之間設置的有效YAML的形式。這是一個基本的例子：web

---
layout: post
title: Blogging Like a Hacker
---
複製代碼

在這些三條虛線之間，你能夠設置預約義的變量（參見下面的參考），甚至能夠建立本身的自定義變量。這些變量隨後可供你使用Liquid標籤進行訪問，不管是在文件中仍是在任何佈局中，或者包括所涉及的頁面或帖子都依賴於這些變量。數據庫

警告：UTF-8字符編碼警告json

若是你使用UTF-8編碼，請確保文件中不存在BOM標題字符，不然Jekyll會發生很是很是糟糕的狀況。若是你在Windows上運行Jekyll，這尤爲重要。瀏覽器

重要提示™：Front Matter變量是可選的ruby

若是你想在Front Matter中使用Liquid標籤和變量，但不須要任何東西，就把它留空！三條虛線之間即便沒有任何內容仍然會讓Jekyll處理你的文件。（這對CSS和RSS提要等頗有用！）bash

預約義的全局變量

有許多預約義的全局變量，你能夠在頁面或文章的Front Matter中設置。markdown

變量 說明
layout 若是設置，則指定要使用的佈局文件。使用不帶文件擴展名的佈局文件名。佈局文件必須放置在_layouts目錄中。
  • 使用null將產生一個不使用佈局文件的文件。可是，若是該文件是文章/文檔而且具備在Front Matter默認值中定義的佈局，則這null將被覆蓋重寫。
  • 從版本3.5.0開始，不管Front Matter設置如何，對文章/文檔中使用none將不會使用佈局文件生成文件。 然而，在頁面中不使用任何內容，都會致使Jekyll嘗試使用名爲「none」的佈局。
permalink 若是你須要將處理後的博客文章網址設置爲網站範圍樣式之外的內容（默認爲/year/month/day/title.html），則能夠設置此變量並將其用做最終網址。
published 若是你不想在網站生成時顯示特定文章，請將這個設置爲false。

重要提示™：展現標記爲未發佈的文章ide

要預覽未發佈的頁面，只需使用--unpublished開關運行jekyll serve或jekyll build。Jekyll還有一個專門爲博客文章量身打造的很是方便的草稿功能。佈局

自定義變量

Front Matter中全部非預約義的變量都會合併到數據中，在轉換期間發送到Liquid模板引擎中。例如，若是你設置了標題，則能夠在佈局中使用該標題來設置頁面標題：

<!DOCTYPE HTML>
<html>
  <head>
    <title>{{ page.title }}</title>
  </head>
  <body>
    …
複製代碼

文章的預約義變量

這些均可以在直接使用。

變量 說明
date 此處的日期會覆蓋文章名稱中的日期。這能夠用來確保文章的正確排序。 日期以YYYY-MM-DD HH:MM:SS +/-TTTT格式指定;小時，分鐘，秒和時區偏移量是可選的。
category
categories		 你能夠指定文章所屬的一個或多個類別，而不是將文章置於文件夾內。當網站生成後，該文章就會按照設置的這些類別分類。類別（categories）能夠被指定爲YAML列表或空格分隔的字符串。
tags 與類別相似，能夠將一個或多個標籤添加到帖子中。與類別同樣，標籤能夠被指定爲YAML列表或空格分隔的字符串。

重要提示™：不要重複本身

若是你不想重複寫常用的Front Matter變量，只需定義它們的默認值，並在必要時（或根本不須要）覆蓋它們。這適用於預約義和自定義變量。

寫文章

Jekyll的一個最好的方面是它是「博客意識」。這到底意味着什麼？好吧，簡而言之，這意味着博客已經滲透到Jekyll的功能中。若是你撰寫文章並在線發佈，你能夠簡單地經過管理計算機上的文本文件夾來發布和維護博客。與配置和維護數據庫以及基於Web的CMS系統的麻煩相比，這將是一個值得歡迎的改變！

文章文件夾

正如在目錄結構頁面上所解釋的那樣，_posts文件夾是你的博客文章存儲的位置。 這些文件一般是Markdown或HTML，但也可使用安裝了對應轉換器的其餘格式。全部文章都必須包含YAML Front Matter，它們將被從源格式轉換爲靜態網站一部分的HTML頁面。

建立文章文件

要建立新文章，你只需在_posts目錄中建立一個文件便可。如何命名文件夾中的文件很是重要。Jekyll須要根據如下格式命名博客文章文件：

YEAR-MONTH-DAY-title.MARKUP
複製代碼

YEAR是四位數字，MONTH和DAY都是兩位數字，MARKUP是表示文件中使用的格式的文件擴展名。例如，下面是有效的文件名的例子：

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.md
複製代碼

重要提示™：連接到其餘文章

使用post_url標記連接到其餘文章，就沒必要擔憂網站固定連接樣式發生更改時網址會404。

內容格式

全部博客文章必須以YAML Front Matter開始。以後，這只是決定你喜歡哪一種格式的問題。Jekyll支持直接使用Markdown，而且還有其餘格式的無數擴展，包括流行的Textile格式。這些格式都有本身的方式來標記文章中的不一樣類型的內容，所以你應該熟悉這些格式並肯定哪種最適合你的需求。

注意：瞭解字符集

內容處理器能夠修改某些字符，使其看起來更好。例如，Redcarpet中的smart擴展可將標準ASCII引號字符轉換爲Unicode字符。爲了讓瀏覽器正確顯示這些字符，經過在佈局的中包含來定義字符集元值。

引用圖像和資源

在某些狀況下，你可能但願將圖片，下載或其餘數字資源與文字內容一塊兒包含在內。雖然Markdown和Textile連接到這些資源的語法各不相同，但如何將這些文件存儲在網站中是每一個人都將面臨的問題。

在Jekyll中有不少方法能夠包含數字資源。一種常見的解決方案是在項目目錄的根目錄中建立一個名子相似assets的文件夾，其中放置全部圖像，文件或其餘資源。而後，從任何文章內，它們能夠連接到使用該網站的根做爲資源引用的路徑。一樣，這將取決於你的網站（子）域和路徑的配置方式，但如下是Markdown中關於如何使用文章中的absolute_url過濾器執行此操做的示例。

在文章中包含圖片資源：

... which is shown in the screenshot below:
![My helpful screenshot]({{ "/assets/screenshot.jpg" | absolute_url }})
複製代碼

鏈接到一個PDF供讀者下載：

... you can [get the PDF]({{ "/assets/mydoc.pdf" | absolute_url }}) directly.
複製代碼

一個典型的文章

Jekyll能夠處理你可能與「文章」關聯的想法的許多不一樣迭代，但標準博客樣式文章（包括標題，佈局，發佈日期和類別）可能以下所示：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2015-11-17 16:16:01 -0600
categories: jekyll update
---

You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
複製代碼

第一個---和第二個---之間的全部內容都是YAML Front Matter的一部分，第二個---以後的全部內容都將使用Markdown進行渲染並顯示爲「內容」。

顯示文章的索引

在一個文件夾中有文章很正常，可是對於一個博客來講是不夠的，你還少一個文章列表。經過使用Liquid模板語言及其標籤，在另外一個頁面（或模板中）建立文章索引很容易。如下是如何建立博客文章連接列表的基本示例：

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>
複製代碼

固然，你能夠徹底控制你顯示文章的方式（以及位置），以及如何組織你的網站。 若是你想了解更多信息，你應該閱讀更多關於模板如何與Jekyll合做的內容。

請注意，post變量只存在於上面的for循環中。若是你想訪問當前呈現的頁面/文章的變量（包含for循環的文章/頁面的變量），請改用page變量。

顯示文章類別或標籤

嘿，這很整潔，可是如何顯示你的一些相互關聯的文章？爲此，你可使用Front Matter中定義的任何變量。在「一個典型的文章」部分中，你能夠看到如何定義類別。只需將類別以yaml列表的形式添加到你的Front Matter中。

既然你的文章有一個或多個類別，你可讓頁面或模板顯示你指定的類別中的文章。 如下是如何根據特定類別建立文章列表的基本示例。

首先，在_layouts目錄中建立一個名爲category.html的新文件——在該文件中至少放置如下內容：

---
layout: page
---

{% for post in site.categories[page.category] %}
    <a href="{{ post.url | absolute_url }}">
      {{ post.title }}
    </a>
{% endfor %}
複製代碼

接下來，在Jekyll安裝的根目錄中，建立一個名爲category的新文件夾，而後爲要列出的每一個類別建立一個文件。例如，若是你有一個blog類別，則至少在新文件夾中建立一個名爲blog.html的文件。

---
layout: category
title: Blog
category: blog
---
複製代碼

在文章頭部如上的狀況下，列表頁面能夠經過{baseurl}/category/blog.html來訪問。

儘管類別和標籤很是類似，它們都用於對文章進行分組，但它們之間存在一些差別。類別和子類別會建立層次結構，默認狀況下會反映在你網站的目錄結構中。 具備如下頭部的文章

---
layout: post
title: A Trip
category: [ blog, travel ]
---
複製代碼

將能夠經過{baseurl}/blog/travel/year/month/day/A-Trip.html訪問。而另外一方面，一個有標籤的文章：

---
layout: post
title: A Trip
tags: [ blog, travel ]
---
複製代碼

將保存爲{baseurl}/year/month/day/A-Trip.html。你能夠按照上述與類別的相同方式建立{baseurl}/tag/blog.html和{baseurl}/tag/travel.html。

雖然此示例是使用標記和類別完成的，但你也能夠輕鬆地將你的列表擴展爲使用擴展建立的任何其餘變量進行過濾。

文章摘錄

每篇文章都會自動將第一個文本塊從內容的開始處移至excerpt_separator的第一處，並將其設置在文章的數據散列中。以上面的文章索引爲例。也許你想經過添加每篇文章的第一段來引入關於文章內容的一點提示：

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>
複製代碼

由於Jekyll抓取了文章第一段，而且將抓取的內容放在了p標籤中，因此你不須要在p標籤中包含摘錄。若是你不想將抓取的摘錄內容放在p標籤中，還可使用下面方式刪除這些標籤：

{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
複製代碼

若是你不喜歡自動抓取的文章摘錄，能夠經過向文章的YAML Front Matter中的excerpt賦值來顯式的覆蓋它。或者，你能夠選擇在文章的YAML Front Matter容中定義一個自定義的excerpt_separator：

---
excerpt_separator: <!--more-->
---

Excerpt
<!--more-->
Out-of-excerpt
複製代碼

你也能夠在你的_config.yml配置文件中全局設置excerpt_separator。

將excerpt_separator設置爲""，表示徹底禁用摘錄。

此外，與Liquid標籤生成的任何輸出同樣，你能夠經過傳遞| strip_html過濾器來刪除輸出中的全部html標籤。若是你但願在文章頭部中輸出文章摘要做爲meta="description"標籤，或者在其餘任何有html標籤而且內容不符合要求的地方，這將特別有用。

高亮代碼語法

Jekyll還內置了對使用Pygments或Rouge代碼片斷的語法突出顯示的支持，因此在任何文章中都包含代碼片斷很容易。只需使用專用Liquid標籤，以下所示：

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}
複製代碼

輸出結果以下所示：

def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
複製代碼

重要提示™：顯式行號

你能夠經過在開頭高亮標記的末尾添加單詞linenos來使代碼片斷包含行號，例如：{% highlight ruby linenos %}。

這些基本知識應該足以讓你開始寫你的第一篇文章。當你準備好深刻了解其餘可能的狀況時，你可能會對自定義文章的永久連接或在本身的文章和你網站上的其餘位置使用自定義變量感興趣。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程