Jekyll使用教程筆記 四


目錄css


草稿

草稿是文件名中沒有日期的文章。它們是你仍在編輯中的、不想發佈的文章。要啓動並運行草稿,請在站點根目錄中建立一個_drafts文件夾(如站點結構部分中所述)並建立第一個草稿:html

|-- _drafts/
|   |-- a-draft-post.md
複製代碼

要在你的網站中預覽草稿,只需使用--drafts開關運行jekyll servejekyll build。每一個草稿將被自動設置修改時間,所以你看到的是按照最近編輯時間的順序顯示的草稿。git

建立頁面

除了撰寫文章外,你還可能但願將靜態頁面(不是基於日期的內容)添加到Jekyll站點。經過利用Jekyll複製文件和目錄的方式,這將很容易實現。github

首頁

幾乎全部你遇到的Web服務器配置都會在網站的根目錄中查找名爲index.html的HTML文件(按慣例),並將其顯示爲主頁。除你使用的Web服務器被配置爲查找某個不一樣的文件名做爲默認文件名,不然該文件將是你的Jekyll生成站點的主頁。瀏覽器

重要提示™:對你的首頁使用佈局bash

你網站上的全部HTML文件均可以使用佈局和/或引用,包括主頁。常見的內容,如頁眉和頁腳,最好是抽取到佈局中。服務器

其餘網頁的位置

你爲網頁添加HTML或Markdown文件的方式取決於你但願網頁的工做方式。主要有兩種建立頁面的方法:markdown

  • 在網站的根目錄中放置每一個頁面,並給HTML或Markdown文件命名。
  • 將頁面放在文件夾和子文件夾中,並將其命名爲任何你但願的。

兩種方法均可以正常工做(而且能夠相互結合使用),惟一的區別就是生成的URL。默認狀況下,頁面在_site中保留與源目錄中相同的文件夾結構。佈局

爲HTML文件命名

添加頁面的最簡單方法就是在根目錄中添加一個HTML文件,其中包含要建立的頁面的合適名稱。對於包含主頁,關於頁面和聯繫頁面的網站,如下是根目錄和關聯網址的結構:post

.
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- about.html    # => http://example.com/about.html
|-- index.html    # => http://example.com/
|-- other.md      # => http://example.com/other.html
└── contact.html  # => http://example.com/contact.html
複製代碼

若是你有不少頁面,則能夠將這些頁面放到子文件夾中。當你的網站創建時,用於在咱們項目的源代碼中對你的網頁進行分組的相同子文件夾將存在於_site文件夾中。

將子文件夾中的頁面構建展現到根目錄中

若是你的頁面被放到你的源文件夾中的子文件夾中,而且想要將它們構建展現在根目錄中,則必須直接在頁面的Front Matter中添加永久屬性,以下所示:

---
title: My page
permalink: mypageurl.html
---
複製代碼

命名文件夾包含索引HTML文件

若是你不但願文件擴展名(.html)出如今你的頁面網址中(文件擴展名是默認存在的),你能夠選擇具備尾部斜線而不是文件擴展名的永久連接樣式。

請注意,若是你但願在沒有Jekyll預覽服務器的狀況下離線查看你的網站,你的瀏覽器將須要文件擴展名來顯示頁面,而且全部資源都須要是相對連接,這樣這些連接才能夠在沒有服務器基礎的狀況下運行。

靜態文件

除了可渲染和可轉換內容以外,咱們還有靜態文件

靜態文件是一個不包含任何YAML Front Matter的文件,包括了圖像,PDF和其餘不被渲染的內容。

它們能夠經過site.static_files在Liquid中訪問,幷包含如下元數據:

變量 說明
file.path 文件的相對路徑,例如:/assets/img/image.jpg
file.modified_time 該文件最後修改的時間, 例如:2016-04-01 16:35:26 +0200
file.name 文件的字符串名稱, 例如:image.jpg for image.jpg
file.basename 文件的字符串基本名稱, 例如:image.jpgimage
file.extname 文件的擴展名, 例如:image.jpg.jpg

請注意,在上表中,file能夠是任何東西。它只是一個在你本身的邏輯中使用的任意設置的變量(例如在for循環中)。它不是網站或頁面的全局變量。

給靜態文件添加Front Matter

儘管沒法直接將Front Matter添加到靜態文件,但能夠經過配置文件中的默認屬性設置Front Matter。當Jekyll構建網站時,它將使用你設置的Front Matter。

這是一個例子:

在你的_config.yml文件中,將下列值添加到defaults屬性中:

defaults:
  - scope:
      path: "assets/img"
    values:
      image: true
複製代碼

這假定你的Jekyll站點的文件夾路徑爲assets/img,你能夠在其中存儲圖像(靜態文件)。當Jekyll構建網站時,它會將每一個圖像視爲含有Front Matter的值:image: true

假設你想要列出assets/img中包含的全部圖像資源。你能夠使用這個for循環來查看static_files對象並得到全部具備這個Front Matter屬性的靜態文件:

{% assign image_files = site.static_files | where: "image", true %}
{% for myimage in image_files %}
  {{ myimage.path }}
{% endfor %}
複製代碼

當你構建你的站點時,輸出將列出符合此前提條件的每一個文件的路徑。

變量

Jekyll遍歷你的網站尋找要處理的文件。任何帶有YAML Front Matter的文件都將受處處理。對於這些文件中的每個,Jekyll都會經過Liquid模板系統提供各類數據。如下是可用數據的參考。

全局變量

變量 說明
site 來自_config.yml的全站信息+配置設置。詳情請參閱下文。
page 頁面特有信息+YAML Front Matter。經過YAML Front Matter設置的自定義變量也會在此處提供。詳情請參閱下文。
layout 佈局特有信息+YAML Front Matter。經過YAML Front Matter設置的自定義變量也會在此處提供。詳情請參閱下文。
content 在佈局文件中,包裝好的文章或頁面的渲染內容。 文章或頁面文件中沒有這個變量的定義。
paginator paginate配置選項被設置時,這個變量才能夠使用。有關詳細信息,請參閱分頁

site變量

變量 說明
site.time 當前時間(當你運行jekyll命令時的時間)。
site.pages 全部頁面的列表。
site.posts 全部文章的按時間順序的倒序列表。
site.related_posts 若是正在處理的是文章,則其中最多包含10個相關文章的列表。默認狀況下,這些是最近發佈的十個文章。對於高質量但計算結果較慢的狀況,請使用--lsi(潛在語義索引)選項運行jekyll命令。另外請注意,GitHub Pages在生成網站時不支持lsi選項。
site.static_files 全部靜態文件的列表(即未由Jekyll轉換器或Liquid渲染器處理的文件)。每一個文件都有五個屬性:pathmodified_timenamebasenameextname
site.html_pages site.pages的一個子集,列出以.html結尾的內容。
site.html_files site.static_files的一個子集,列出以.html結尾的內容。
site.collections 一個全部合集的列表
site.data 包含從位於_data目錄中的YAML文件加載的數據的列表。
site.documents 每一個合集中的全部文檔的列表。
site.categories.CATEGORY CATEGORY類別中的全部文章的列表。
site.tags.TAG 標籤是TAG的全部文章的列表
site.url _config.yml中配置的網站的網址。例如,若是你的配置文件中包含url: http://mysite.com,則能夠在Liquid中以site.url的形式訪問它。對於開發環境,有一個例外,若是你運行jekyll serve,在開發環境中site.url將被設置爲與hostportSSL相關選項的值。 默認爲url: http://localhost:4000
site.[CONFIGURATION_DATA] 全部經過命令行設置的變量和你的_config.yml均可以經過site變量得到。例如,若是你在你的配置文件中有foo: bar,那麼它能夠在Liquid中經過site.foo訪問。Jekyll不會在watch模式下解析對_config.yml的更改,你必須從新啓動Jekyll以查看對變量的更改。

頁面變量

變量 說明
page.content 頁面的內容,渲染或不渲染取決於Liquid正在處理什麼以及頁面是什麼。
page.title 頁面的標題
page.excerpt 未渲染的文檔摘錄
page.url 只有前導斜槓,但不含域名的文章地址,例如:/2008/12/14/my-post.html
page.date 文章指定的日期。這能夠經過指定YYYY-MM-DD HH:MM:SS(假設UTC)或YYYY-MM-DD HH:MM:SS +/-TTTT( 使用與UTC的偏移來指定時區,例如2008-12-14 10:30:00 +0900)。
page.id Collection或Post中文檔的惟一標識符(在RSS提要中有用)。例如 /2008/12/14/my-post /my-collection/my-document
page.categories 此文章所屬類別的列表。類別來自_posts目錄上方的目錄結構。例如,/work/code/_posts/2008-12-24-closures.md中的文章可能會將此字段設置爲['work','code']。 這些也能夠在YAML Front Matter中指定。
page.tags 此文章所屬的標籤列表。這些能夠在YAML Front Matter中指定。
page.path 原始文章或頁面的路徑。用法示例:連接回GitHub上的頁面或文章的源代碼。這能夠在YAML Front Matter中重寫。
page.next 下一篇文章相對於site.posts中當前文章的位置。最後一個文章會返回nil
page.previous 上一篇文章相對於site.posts中當前文章的位置。最後一個文章會返回nil

重要提示™:使用自定義的Front Matter

你指定的任何自定義Front Matter將在page下提供。例如,若是你在頁面的Front Matter中指定了custom_css: true,則該值將做爲page.custom_css提供。

若是你在佈局中指定Front Matter,請經過layout訪問。例如,若是在佈局的Front Matter中指定class: full_page,則該值將在佈局及其父項中做爲layout.class提供。

分頁

變量 說明
paginator.per_page 每頁文章數。
paginator.posts 該頁面可用的文章。
paginator.total_posts 文章總數。
paginator.total_pages 總頁數。
paginator.page 當前頁面的編號。
paginator.previous_page 上一頁的編號。
paginator.previous_page_path 上一頁的路徑。
paginator.next_page 下一頁的編號。
paginator.next_page_path 下一頁的路徑。

注意:分頁變量可用性

這些僅在索引文件中可用,但它們能夠位於子目錄中,例如/blog/index.html

相關文章
相關標籤/搜索