天天看點

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

1)你網站可能會放在域名的某個檔案夾下面,那麼根目錄就要帶着那個檔案夾,有了“baseurl”的配置,就能友善拼接了。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

2)生成的檔案路徑“destination”,預設是在_site檔案夾中,現在放到了我自定義的檔案夾下面。

3)分頁中為了友善示範,每頁僅顯示1條記錄,文章儲存方式是年月日+标題,分頁的目錄會在“article”,分頁比較特殊,下面會詳解。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

5)excerpt_separator與文章摘要相關,後面也會詳解。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章
用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

1)與文章的差別

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章
用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

如果把所有各種類型的文章都放在這個裡面,管理會比較混亂,例如我有随筆、UI庫、工具庫等要放在網站展示。

随筆的話就可以都放在_post檔案夾裡,但是UI庫等其他類型的文章展示的格式與其不一樣、展示的方式也與其不一樣。

下圖是一張UI庫的頁面,左邊放的是分類,右邊放的内容。如果單獨放在檔案夾中,那麼就可以很友善的編輯分類連結。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

2)_data

在上圖的右邊,還有個頁面内容導航,順便說明下:

kramdown會給h1等自動加上ID,上圖中的“h1-h6”就被自動加了ID,裡面有英文就用此英文,如果沒有就自動生成。

原先我是将這些内容放在_include檔案夾下面,_include内放的都是些頁面通用部分,後面發現頁面越來越多,但是内容都差不多,僅僅是資料不一樣,每次都是在複制黏貼。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

在sidenav.html中輸出:

1)分類

現在的文章都會有分類,做了區分後,文章能更有調理,下圖是部落格園的自定義文章分類。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

在上圖中會顯示這個分類的名字,并且會輸出這個分類下面文章的個數,點選這個分類名,能夠跳轉到相應的分類下的文章清單。

要實作這幾個功能,可以通過categories的相關屬性擷取。

2)文章清單

上面的分類文章清單中,會多個判斷:

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

“{{ post.date | date: "(%Y年%m月%d日)" }}”是在做格式化時間,上面的頭資訊中設定了“date: 2016-05-09 08:25:06”。

3)分頁

在上面的_config.yml中設定了兩個關于分頁的屬性,一個是每頁顯示的數量,一個是分頁檔案輸出的方式。

沒有把頁碼1給輸出,我在做分頁的時候,就每次都得多做個判斷。

用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章
用jekyll制作高大上的網站(二)——實際應用一、全局配置二、集合(Collections)三、文章

demo下載下傳:

<a href="http://download.csdn.net/download/loneleaf1/9518315" target="_blank">http://download.csdn.net/download/loneleaf1/9518315</a>

參考資料:

<a href="http://rouge.jayferd.us/demo" target="_blank">Rouge支援的語言</a>

<a href="http://kramdown.gettalong.org/syntax.html" target="_blank">kramdown文法</a>

<a href="http://pikipity.github.io/blog/kramdown-syntax-chinese-1.html" target="_blank">Kramdown 文法文檔翻譯</a>

<a href="https://segmentfault.com/a/1190000000406017" target="_blank">文章分類索引</a>

<a href="http://kingauthur.info/2013/01/20/the-paginator-and-excerpt-in-jekyll/" target="_blank">為Jekyll增加不完美的分頁和文章摘要</a>

    本文轉自 咖啡機(K.F.J)   部落格園部落格,原文連結:http://www.cnblogs.com/strick/p/5484779.html,如需轉載請自行聯系原作者

繼續閱讀