Jekyll使用教程筆記 六

---

目錄

• 《Jekyll使用教程筆記 一：簡介、快速開始、基本用法、目錄結構》
• 《Jekyll使用教程筆記 二：配置》
• 《Jekyll使用教程筆記 三：Front Matter、寫文章》
• 《Jekyll使用教程筆記 四：建立頁面、靜態文件、變量》
• 《Jekyll使用教程筆記 五：合集、數據文件》
• 《Jekyll使用教程筆記 六：資源、博客遷移、模版》

---

資源（Assets）

Jekyll內置了對Sass的支持，而且能夠經過一個Ruby gem使用CoffeeScript。爲了使用它們，你必須首先使用適當的擴展名（.sass，.scss或.coffee之一）建立一個文件，而後在文件頭部使用兩行三個連着的短橫線，以下所示：

---
---

// start content
.my-definition
  font-size: 1.2em
複製代碼

Jekyll將這些文件視爲常規頁面，由於輸出的文件將放置在與其源文件相同的目錄中。例如，若是你的站點的源文件夾中有一個名爲css/styles.scss的文件，Jekyll會對其進行處理並將其放入站點的css/styles.scss。

注意：Jekyll處理資源文件中的全部Liquid過濾器和標籤

若是你正在使用與Liquid模板語法衝突的Mustache或其餘JavaScript模板語言，則須要在代碼外圍放置{% raw %}和{% endraw %}標籤。

Sass/SCSS

Jekyll容許你以某種方式自定義你的Sass轉換。

將全部分支放在sass_dir中，默認爲<source>/_sass。將主SCSS或Sass文件放在但願它們位於輸出文件中的位置，如<source>/css。例如，在Jekyll中使用Sass支持來查看這個示例站點。

若是你使用的是Sass @import語句，則須要確保將sass_dir設置爲包含Sass文件的基礎目錄。你能夠這樣作：

sass:
    sass_dir: _sass
複製代碼

Sass轉換器會將sass_dir配置選項默認爲_sass。

注意：sass_dir只被Sass使用

請注意，sass_dir成爲Sass導入的加載路徑，僅此而已。這意味着Jekyll不直接瞭解這些文件，所以這裏的任何文件都不該該包含上述的YAML Front Matter，也不會像上面描述的那樣進行轉換。該文件夾應該只包含導入。

你也能夠在_config.yml文件中使用style選項指定輸出樣式：

sass:
 style: compressed
複製代碼

這些傳遞給Sass，因此Sass支持的任何輸出樣式選項在這裏也是有效的。

Coffeescript

要在Jekyll 3.0及更高版本中啓用Coffeescript，你必須這樣作

• 安裝jekyll-coffeescript gem

• 確保你的_config.yml是最新的幷包含如下內容：

  plugins:
   - jekyll-coffeescript
  複製代碼

博客遷移

若是你從另外一個博客系統切換到Jekyll，Jekyll的importers能夠幫助你遷移。 要了解有關將你的網站導入Jekyll的更多信息，請訪問咱們的jekyll-import文檔網站。

模版（Templates）

Jekyll使用Liquid模板語言來處理模板。支持全部標準Liquid標籤和過濾器。爲了簡化常見任務，Jekyll甚至還增長了一些方便的過濾器和標籤，你能夠在此頁面上找到全部這些過濾器和標籤。Jekyll甚至容許你經過插件提出本身的標籤。

過濾器（Filters）

說明	過濾器	輸出結果
相對URL 將baseurl值添加到輸入中。若是你的站點託管在子路徑而不是域的根目錄，則很是有用。	{{ "/assets/style.css" | relative_url }}	/my-baseurl/assets/style.css
絕對URL 將url和baseurl值添加到輸入中。	{{ "/assets/style.css" | absolute_url }}	http://example.com/my-baseurl/assets/style.css
日期轉XML架構 將日期格式化爲XML架構（ISO 8601）格式。	{{ site.time | date_to_xmlschema }}	2008-11-07T13:07:54-08:00
日期轉RFC-822格式 將日期格式化爲用於RSS源的RFC-822格式。	{{ site.time | date_to_rfc822 }}	Mon, 07 Nov 2008 13:07:54 -0800
日期轉字符串 將日期格式化爲短格式。	{{ site.time | date_to_string }}	07 Nov 2008
日期轉爲ordinal US風格的字符串 將日期格式化爲ordinal，US，短格式。	{{ site.time | date_to_string: "ordinal", "US" }}	Nov 7th, 2008
日期轉長字符串 將日期格式化爲長格式。	{{ site.time | date_to_long_string }}	07 November 2008
日期轉爲ordinal UK風格的長字符串 將日期格式化爲ordinal，UK，長格式。	{{ site.time | date_to_long_string: "ordinal" }}	7th November 2008
Where 選擇數組中指定key對應的對象。	{{ site.members | where:"graduation_year","2014" }}
Where Expression 選擇數組中表達式爲true的全部對象。[3.2.0]	{{ site.members | where_exp:"item", "item.graduation_year == 2014" }} {{ site.members | where_exp:"item", "item.graduation_year < 2014" }} {{ site.members | where_exp:"item","item.projects contains 'foo'" }}
分組 按給定屬性對數組的項進行分組。	{{ site.members | group_by:"graduation_year" }}	[{"name"=>"2013", "items"=>[...]}, {"name"=>"2014", "items"=>[...]}]
按表達分組 使用Liquid表達式對數組的項進行分組。[3.4.0]	{{ site.members | group_by_exp:"item", "item.graduation_year | truncate: 3, \"\"" }}	[{"name"=>"201...", "items"=>[...]},{"name"=>"200...", "items"=>[...]}]
XML轉義 轉義一些文本以便在XML中使用。	{{ page.content | xml_escape }}	``
CGI轉義 CGI轉義字符串以便在URL中使用。用適當的%XX替換替換任何特殊字符。CGI轉義一般用加號+替換空格。	{{ "foo, bar; baz?" | cgi_escape }}	foo%2C+bar%3B+baz%3F
URI轉義 使用百分比對URI中的任何特殊字符進行編碼。URI轉義一般用%20替換空格。保留字符不會被轉義。	{{ "http://foo.com/?q=foo, \bar?" | uri_escape }}	http://foo.com/?q=foo,%20%5Cbar?
字數 計算某些文本中的單詞數。	{{ page.content | number_of_words }}	1337
數組轉句子 將數組轉換爲句子。用於列出標籤。 鏈接器有可選參數。	{{ page.tags | array_to_sentence_string }} 或 {{ page.tags | array_to_sentence_string: 'or' }}	foo, bar, and baz 或 foo, bar, or baz
Markdownify 將Markdown格式的字符串轉換爲HTML。	{{ page.excerpt | markdownify }}
Smartify 將「引號」轉換爲「智能引號」。	{{ page.title | smartify }}
轉換Sass/SCSS 將Sass或SCSS格式的字符串轉換爲CSS。	{{ some_scss | scssify }} {{ some_sass | sassify }}
Slugify 將字符串轉換爲小寫URL「slug」。請參閱下面的選項。	{{ "The _config.yml file" | slugify }} 或 {{ "The _config.yml file" | slugify: 'pretty' }} 或 {{ "The _cönfig.yml file" | slugify: 'ascii' }} 或 {{ "The cönfig.yml file" | slugify: 'latin' }}	the-config-yml-file 或 the-_config.yml-file 或 the-c-nfig-yml-file 或 the-config-yml-file
數據轉JSON 將哈希或數組轉換爲JSON。	{{ site.data.projects | jsonify }}
規範化空格 用單個空格替換任何出現的多個連續空格。	{{ "a \n b" | normalize_whitespace }}
排序 對數組進行排序。 哈希的可選參數： 1.屬性名稱 2.nils順序（first或last）。	{{ page.tags | sort }} 或 {{ site.posts | sort: 'author' }} 或 {{ site.pages | sort: 'title', 'last' }}
**** 從數組中選擇一個隨機值。 可選：選擇多個值。	{{ site.pages | sample }} 或 {{ site.pages | sample:2 }}
轉爲整數 將字符串或布爾值轉換爲整數。	{{ some_var | to_integer }}
過濾器數組 從數組中push、pop、shift和unshift元素。 這些都是非破壞性的，即它們不會改變源數組，而是複製一個再改變這個新的數組。	{{ page.tags | push: 'Spokane' }} 或 {{ page.tags | pop }} 或 {{ page.tags | shift }} 或 {{ page.tags | unshift: "Olympia" }}	['Seattle', 'Tacoma', 'Spokane'] 或 ['Seattle'] 或 ['Tacoma'] 或 ['Olympia', 'Seattle', 'Tacoma']
檢查 將對象轉換爲String表示以進行調試。	{{ some_var | inspect }}

slugify過濾器的選項

slugify過濾器接受一個選項，每一個選項指定要過濾的內容。默認值爲default。 它們以下（用它們過濾的內容）：

• none：沒有字符
• raw：空格
• default：空格和非字母數字字符
• pretty：除._~!$&'()+,;=@以外的空格和非字母數字字符
• ascii：空格，非字母數字和非ASCII字符
• latin：和default同樣，除了拉丁字符首先被音譯（例如àèïòü轉爲aeiou）[3.7.0]

標籤（Tags）

• 引用
• 代碼塊高亮顯示
• 連接到頁面，合集和文章（新的和改進的方式）
• 連接到文章（舊方式）

引用（Includes）

若是你但願在網站的多個位置引用小的網頁摘要，請將摘要保存爲引用文件，並使用include標記將其插入到須要的位置：

{% include footer.html %}
複製代碼

Jekyll但願全部引用文件都放在源目錄根目錄的_includes目錄中。在上面的示例中，這會將_includes/footer.html的內容嵌入到調用文件中。

有關使用引用的更多高級信息，請參閱引用。

代碼塊高亮顯示

因爲Rouge，Jekyll已經支持超過60種語言的語法高亮顯示。Rouge是Jekyll 3及以上版本的默認語法高亮引擎。要在Jekyll 2中使用它，請將highlighter設置爲rouge，並確保正確安裝了rouge gem。

或者，你可使用Pygments高亮顯示你的代碼塊。要使用Pygments，必須在系統上安裝Python，安裝pygments.rb gem並將highlighter設置爲站點配置文件中的pygments。Pygments支持超過100多種語言

要使用語法高亮顯示渲染代碼塊，請按以下方式包裹代碼：

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}
複製代碼

highlight標記的參數（上例中的ruby）是語言標識符。要查找要用於要高亮顯示的語言的相應標識符，請在Rouge wiki或Pygments的Lexers頁面上查找「短名稱」。

注意：Jekyll處理代碼塊中的全部Liquid過濾器

若是你使用的語言包含大括號，則可能須要在代碼周圍放置{% raw %}和{% endraw %}標記。

行號

highlight的第二個參數是名爲linenos的可選項。有linenos參數則將在高亮顯示的代碼塊中強制顯示行號。例如，如下代碼塊將有每行旁邊的行號：

{% highlight ruby linenos %}
def foo
  puts 'foo'
end
{% endhighlight %}
複製代碼

語法高亮的樣式

爲了顯示高亮，你須要包含高亮顯示樣式表。有關示例樣式表，你能夠查看syntax.css。這些與GitHub使用的樣式相同，你能夠自由地將它們用於你本身的站點。若是使用linenos，你可能但願在syntax.css中爲.lineno class添加一個額外的CSS class定義，以區分行號和高亮顯示的代碼。

連接（Links）

連接到頁面

要連接到文章，頁面，合集項或文件，link標記將爲你指定的路徑生成正確的永久連接URL。例如，如你您使用link標記連接到mypage.html，即便你更改固定連接樣式以包含文件擴展名或省略它，link標記造成的URL也始終有效。

使用link標記時，你必須包含文件的原始擴展名。這裏有些例子：

{{ site.baseurl }}{% link _collection/name-of-document.md %}
{{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %}
{{ site.baseurl }}{% link news/index.html %}
{{ site.baseurl }}{% link /assets/files/doc.pdf %}
複製代碼

您還可使用link標記在Markdown中建立連接，以下所示：

[Link to a document]({{ site.baseurl }}{% link _collection/name-of-document.md %})
[Link to a post]({{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %})
[Link to a page]({{ site.baseurl }}{% link news/index.html %})
[Link to a file]({{ site.baseurl }}{% link /assets/files/doc.pdf %})
複製代碼

（包含{{ site.baseurl }}是可選的——這取決於你是否要在頁面URL前加上baseurl值。）

到文章，頁面或合集的路徑是定義爲相對於根目錄（配置文件所在的位置）到文件的路徑，而不是從現有頁面到另外一頁面的路徑。

例如，假設你在page_a.md（存儲在pages/folder1/folder2中）中建立了一個連接到page_b.md（存儲在pages/folder1中）。你在連接中的路徑不會是../page_b.html，而是/pages/folder1/page_b.md。

若是你不肯定路徑，請將{{ page.path }}添加到頁面，它將顯示路徑。

使用link或post_url標記的一個主要好處是連接驗證。若是該連接不存在，Jekyll將不會構建你的網站。這是一件好事，由於它會提醒你一個錯誤的連接，以便你能夠修復它（而不是容許你構建和部署具備錯誤連接的站點）。

請注意，你沒法向link標記添加過濾器。例如，你不能使用Liquid過濾器追加字符串，例如{% link mypage.html | append: "#section1" %}。要連接到頁面上的部分，你須要使用常規HTML或Markdown連接技術。

連接到文章

若是你想在網站上添加指向文章的連接，則post_url標記會爲你指定的文章生成正確的永久連接網址。

{{ site.baseurl }}{% post_url 2010-07-21-name-of-post %}
複製代碼

若是你在子目錄中放置文章，則須要包含文章的子目錄路徑：

{{ site.baseurl }}{% post_url /subdir/2010-07-21-name-of-post %}
複製代碼

使用post_url標記時無需包含文件擴展名。

你還可使用此標記在Markdown中建立指向文章的連接，以下所示：

[Name of Link]({{ site.baseurl }}{% post_url 2010-07-21-name-of-post %})
複製代碼