標籤:

有哪些簡潔明快的 Jekyll 模板?

雖然 Github 列出了一大堆(Sites · jekyll/jekyll Wiki · GitHub ),但我挑來揀去總覺得沒有合適的。另外,國外的博客字體排版不符合國情,國內的例子比較少。希望推薦一些設計簡單、清爽的模板。


煥然大悟…原來這是秀 Blog 的時刻啊!

Hux Blog ,倉庫在此:Huxpro/huxpro.github.io · GitHub

基於 IronSummitMedia/startbootstrap-clean-blog-jekyll · GitHub 大量修改:

  • 添加了對標籤的全套支持(原主題不支持 Tags )
  • 去掉引起掛起的 Web Font,添加適合中文世界的 font-family
  • 大量 CSS 優化:包括適合中文閱讀的字型大小字重改進,移動端交互優化。
  • Font-awesome (iconfont) 使用國內的七牛 CDN
  • 使用 Github Flavored Markdown
  • 使用 騰訊統計、百度統計
  • 加入「多說」 評論支持

Update V1.1:

  • 加入了側邊欄/友鏈功能,可配置,用於展示更多信息

貼圖:

最後裝個逼:

歡迎 fork,有問題可以給我提 issues,最近懶得寫 README ……

Update: 在越來越多的 fork 和 issue 下,文檔已趨於完善,更多的功能被重構為配置項,使用起來更加簡單~

以上~。


拿去吧,這是你自己寫的了GitHub - EZLippi/EZLippi.github.io

網址:首頁:Home - Lippi-浮生志


jekyll主題集合網址:Jekyll Themes Templates

可以根據自己的喜好選擇不同的風格模板,先選定一個基本模板(Jacman),像這樣:

發現Jacman支持的功能還不少:

  • menu
  • widget
  • Image
  • index
  • author

  • toc
  • comments
  • jiathis
  • Analytiscs
  • Search
  • totop
  • rss
  • fancybox
  • custom theme color
  • others You can configure sidebar not show in post pages.

接著,去github上找也選了這個模板的小夥伴,像這樣(在github上搜Jacman):

哇(*@ο@*) 哇,兩眼放光有木有!原來有這麼多小夥伴跟咱趣味相投哇咔咔~~~github上有很多對基本主題進行改造的例子,然後題主可以再選一個自己喜歡 的clone下來,修改css和全局風格,就像這樣:

biubiubiu,炫耀博客的機會終於來了~~~

看到這裡了還不戳你好意思嗎:http://sunxiaobiu.github.io/


曬一下自己的,喜歡它的簡潔有力:Mukosame"s blog(空模板 Mukosame/mukosame.github.io at gh-pages · GitHub)

fork自beiyuu的blog(beiyuu/Github-Pages-Example · GitHub),很慚愧,做了一些微小的調整。效果如下:

電腦:

手機:


客官 這個模板如何 setImpl


Zespia

這個如何。。哈哈,實在是有騙到HEXO的嫌疑。。


先上鏈接:碼志

源碼地址:mzlogin/mzlogin.github.io · GitHub 歡迎 Fork,在 README 文檔里有詳細的 Fork 指南。

效果圖:

以上是我現在正在使用的基於網友的模板做了一些修改之後的模板。

如果仍嫌其不夠「簡潔明快」,可以看看我以前做的一個超級超級簡單的模板——最開始使用 Octopress,後來發現老在折騰樣式之類的,不利於專註於內容,所以自己用線框做了一個最簡單的 Jekyll 模板(最初基於 當然我在扯淡 使用的 CSS),在本地也並不使用 Jekyll 程序,只管寫好 Markdown 往 GitHub 提交。

源碼地址:GitHub - mzlogin/jekyll-theme-solid: A simple and clean jekyll theme without javascript

我覺得算「簡潔明快流」,效果圖如下:

  • 首頁樣式

  • 文章頁樣式


我來做個回答,和Jekyll 模板沒有直接關係,但使用Jekyll不就是為了搭博客嘛,所以還是有點兒關聯的。

搭博客時最好給博客一個圖標(favicon: /img/favicon.ico),讓它顯示在瀏覽器標籤頁中,像這樣一個數字 2:

可以用圖片,但如果想用文本怎麼辦呢?

我在折騰著搭博客時發現了 一個非常酷的網站 text logo design,它有很多logo樣式可以選擇,然後輸入文本,文本的顏色大小可以設置,就可以製作一個背景透明的圖片logo,像這樣:

挺酷的吧 ; )


可以去這裡看看:Jekyll Themes

發現一個很有才的女生(更正:性別未知)做的,很贊!Jekyll主題 ?JekyllPure

另外補充:如果想簡單清爽不折騰,不妨直接使用Jekyll官方自動生成的模板,簡單配置下就可用了。


我了解的,分享一下,也有現在使用的;

Start Bootstrap

  • 結合Bootstrap,使用Jekyll Theme,好多模板;

Jekyll Themes

  • 專門匯總Jekyll Theme 的網站;

mmistakes (Michael Rose) · GitHub

  • 他在他的Github 分享有很多不錯的主題;

Search · jekyll theme · GitHub

  • 在Github 搜索,排名靠前的都不錯;

IronSummitMedia/startbootstrap-clean-blog-jekyll · GitHub

  • 我目前使用的就是這個,下面截圖;Tikitoo


首頁 | 林安亞的博客 改自閆肅的博客

這是最初自己修改完的樣子(2014.8.26)

重新做了顏色搭配,同時進行了一些優化,現在博客的樣子如下:(2014.9.12)

重新分割頁面布局,添加「寫代碼工作照」一張:(2014.9.30)


推薦一個網站上的主題,都非常不錯

Jekyll Themes

我選擇了其中hsptr這個主題

詳見我的博客文章:

Blog Renovation Complete

現在我的主頁轉到了Hugo: A Fast and Flexible Website Generator

這是一個基於Go語言編寫的靜態網頁生成框架

不過需要手動部署到github上,沒有jekyll這種原生的框架使用簡便

其優點是生成快, 而且有一個特別適合學術圈子的主題:

gcushen/hugo-academic

我的主頁上放了如何使用Wercker Home

自動部署hugo的頁面到GitHub上的教程, 歡迎閱讀:

Move to Hugo | Jinlai Xu#x27;s Homepage


我也來湊個數:飄過的小牛


上個周末也使用 Jekyll 做了個網站 Milo的ex-Hippocampus,使用了 Feeling Responsive 模板。這個模板使用了 Foundation | The Most Advanced Responsive Front-end Framework from ZURB,較好的支持電腦及移動平台的瀏覽。

電腦上的主頁:

http://localhost:4000/index.html (二維碼自動識別)

電腦上的內文頁面:

手機上的主頁、打開右上角菜單、內頁:

模板的改動:

  1. 刪除 web font,設定中文字體。(Web font有 FOUT 問題)
  2. 加入 MathJax 來渲染數學公式。(GitHub Pages 不容許插件所以只能在客戶端生成)
  3. 加入 QR Code,方便手機瀏覽和分享。
  4. 加入國內幾個網站的 icon font。
  5. 改用 redcarpet markdown 引擎,因為 Kramdown 不支持 fenced code block。

源代碼:miloyip/exhippocampus · GitHub


默認模板就不錯啊,簡單的改了下css

Blog · Tanky Woo


我對博客主題進行一次大的改版加重構,直接滾動條到最下面吧,我的更新都在下面。

我覺得自己寫比較好。

一開始我也在找一些好看的模板,但是最後還是發現自己寫最好。還可以深入了解liquid語法,鍛煉css, html, JavaScript能力。還非常有成就感。哈哈。

我的博客 HyG

還在不斷完善中。

要是覺得我做的還不錯,給我在github上點個star唄~

update

------------------------------------------------------------

2015/05/31

Jekyll Themes這個網站很久沒有更新了,我也嘗試聯繫網站的維護者也沒有任何消息。

因此在GitHub這個倉庫下,有來自世界各地熱心的網友可能會重新建立一個Jekyll主題的網站,最好能掛在jekyll官網的二級域名下。

目前正在討論中,希望能實現。詳情見 Please merge themes · Issue #118 · mattvh/jekyllthemes · GitHub

我開的一個issue竟然推動了可能很大的一次變革,我真的很激動,互聯網是世界的!開源世界太美好了!

-------------------------

2015/06/01

新的主題網站正在籌建了。

-------------------------

2015/06/16

Jekyll Themes 網站的維護者 Matt Harzewski 出現了……

他在 Issue #118 中說:

Sorry I"ve been so out of contact lately. I was busy, then sick for three weeks. I"ll try to get things merged back up soon.

而另一邊,準備重新建立一個新網站的 ariestiyansyah (Rizky Ariestiyansyah) ,感覺有點蛋疼,他在4天前說:

I am on travel now, I"ll buy new domain by Monday (next week)

也就是昨天。不知道買了域名了沒……感覺好像是還沒買,因為域名 http://jekyll-themes.org 暫時還不能訪問。

mattvh (Matt Harzewski) 也是夠蛋疼的,建立了一個這麼好的網站,去分享 jekyll 主題,但是維護周期這麼長……3-6個月更新一次。看來他真的很忙啊……否則,jekyll 主題一定會發展的非常好的。Jekyll 也會發展的非常快的。

嗯,他已經合併了很多主題了。包括我的,詳情見這裡:Cool Concise High-end

-------------------------

2015/06/29

新的 jekyll 主題網站感覺不了了之了……唉

-------------------------

2015/07/28

看著自己在GitHub基於Jekyll寫的博客主題被越來越多的人使用,真的是很歡喜,目前這個倉庫star數已經84,fork數24,還有我不知道的非常多的clone。前端之路越來越有趣。有人使用你的東西,你的責任感也越來越大!這就是程序員的社會責任感吧。

-------------------------

2016/04/27

時隔一年,我對博客進行了一次大重構加改版!!!

詳情見倉庫的README,GitHub - Gaohaoyang/gaohaoyang.github.io: blog和這篇文章:對這個 jekyll 博客主題的改版和重構

Concise Jekyll Theme v2.0.0

  • [^] 基於 jekyll 3.1.2 重構了所有代碼,去除了 jQuery 和 BootStrap,是的載入速度更快

  • [+] 主頁添加了摘要,在正文中使用4個換行符來分割,可在`_config.yml`中修改

  • [+] 主頁添加了近期文章、分類列表和標籤雲

  • [+] 主頁導航區做了視覺優化,陰影效果

  • [+] 增加了歸檔、標籤和分類頁面

  • [+] 增加了收藏頁面

  • [+] 評論插件可以選擇 disqus 或 多說,直接在`_config.yml`中修改

  • [+] 適配移動端

  • [+] 頁面滾動時,文章目錄固定在右側

  • [+] 頁面內容較少時,固定 footer 在頁面底部

  • [^] 使用 GitHub 風格的代碼高亮寫法,即```的寫法

  • [^] 使用 Masonry 重寫了 Demo 頁中的瀑布流布局,響應式交互體驗更好

重新上兩張圖:


噠噠噠 突然發現這是個宣傳博客的好地方~

? 【Nice Shot】http://www.chen9.info

主題是在Jekyll Theme下的Strange Case基礎上改的

原主題特別簡潔 倒是我改的多了一些隱蔽的小部分 ╮(╯▽╰)╭ 目前還在持續修改中~

期待你的來訪~(? ??_??)?


http://enml.github.io/site

花了5天才完成的。卡片式風格,響應式布局。


用了3年的主題,期間經過自己不少的優化,成為了現在這個樣子:袁勇的個人主頁,與其說是個人博客,倒不如說是個人的homepage,主題涵蓋了個人頁面介紹、項目、簡歷、博客、個人時間線、豆瓣書籍,不該有的都有了。如果喜歡此主題的話,可以在這裡獲取它:willard-yuan/willard-yuan.github.io,安裝說明也有了比較細緻的介紹。

為了更直觀的感受效果,貼圖

關於:

項目:

博客:

移動端:

歡迎fork和star~


我現在用的Jekyll作者的模板

有點過分簡潔

San"s world

已改為Jekyll的默認模板,還是相當簡潔的,改進中。


推薦閱讀:

Vue 在github上的issues和contributors為什麼比React,Angular少?
新手該如何使用GitHub?
github issue是做什麼的?
把公司代碼上傳到了github上,被leader發現了怎麼辦?
GitHub 上有哪些適合新手跟進的優質項目?

TAG:GitHub | Jekyll |