有哪些簡潔明快的 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 (二維碼自動識別)
電腦上的內文頁面: 手機上的主頁、打開右上角菜單、內頁: 模板的改動:- 刪除 web font,設定中文字體。(Web font有 FOUT 問題)
- 加入 MathJax 來渲染數學公式。(GitHub Pages 不容許插件所以只能在客戶端生成)
- 加入 QR Code,方便手機瀏覽和分享。
- 加入國內幾個網站的 icon font。
- 改用 redcarpet markdown 引擎,因為 Kramdown 不支持 fenced code block。
默認模板就不錯啊,簡單的改了下css
Blog · Tanky Woo我對博客主題進行一次大的改版加重構,直接滾動條到最下面吧,我的更新都在下面。
我覺得自己寫比較好。
一開始我也在找一些好看的模板,但是最後還是發現自己寫最好。還可以深入了解liquid語法,鍛煉css, html, JavaScript能力。還非常有成就感。哈哈。我的博客 HyG還在不斷完善中。要是覺得我做的還不錯,給我在github上點個star唄~ update------------------------------------------------------------2015/05/31Jekyll Themes這個網站很久沒有更新了,我也嘗試聯繫網站的維護者也沒有任何消息。因此在GitHub這個倉庫下,有來自世界各地熱心的網友可能會重新建立一個Jekyll主題的網站,最好能掛在jekyll官網的二級域名下。目前正在討論中,希望能實現。詳情見 Please merge themes · Issue #118 · mattvh/jekyllthemes · GitHub我開的一個issue竟然推動了可能很大的一次變革,我真的很激動,互聯網是世界的!開源世界太美好了!-------------------------2015/06/01新的主題網站正在籌建了。-------------------------2015/06/16Jekyll 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 上有哪些適合新手跟進的優質項目?