構(gòu)思了一個多月，這個周末在公司加(tōu)班(lǎn)敲了20h+的代碼，終于還是把博客從 wordpress 遷移到了去年新出來的 Ghost 博客平臺，Ghost其簡單媒抠、快速、開源的特性咏花，迅速地吸引了國內(nèi)外不少開發(fā)者使用。
簡單地介紹一下 Ghost 的特征:
1.Markdown:使用 Markdown阀趴，過去一年多昏翰，自己已經(jīng)轉(zhuǎn)成使用 Markdown 寫作，還是很方便的刘急。Wordpress 雖然能通過插件的方式支持 MD 棚菊，可還是略不方便，每次都是在 Mac 上用 Mou 或者在簡書寫完后再把 HTML 源碼拷過來叔汁，方法略 low统求。
2.Nodejs: 速度超快检碗，作為一個前端兼 JS 渣，還是了解 Nodejs 的性能強(qiáng)大之處码邻，尤其是博客這種簡單的需求折剃，如果 Wordpress 是小惡魔的大斧頭，又大像屋，又粗怕犁，又黑（我說的是事實好么！己莺！你看下面圖好么）奏甫。
那么Ghost就像是一把 瓦雷利亞鋼利刃 。
又輕凌受，又硬阵子，又持久，耸を龋酷還能搞姐姐挠进。
3.開源&&社區(qū):自己研究了下 Ghost的源代碼，很適合我們前端進(jìn)行開發(fā)腾么，貢獻(xiàn)代碼到核心代碼也不是不可能的奈梳，寫個主題、插件神馬的需求還是不小的解虱，這次博客改版攘须，有些交互和功能，還是自己用 js 實現(xiàn)的殴泰，沒辦法啊于宙，Ghost 還是太年輕了，API接口神馬的還在完善和開發(fā)中悍汛，用江爺爺?shù)脑捳f就是"Too Young, too Navie"捞魁，必須接受這個事實局骤。
我的博客「羅磊的獨(dú)立博客」從前身 willei.com 開始家乘， 已經(jīng)差不多五歲啦菲嘴，過去的這些年笋轨，一直使用的是 Wordpress ,WP是一個十分強(qiáng)大的CMS平臺幌缝，歷史悠久走孽，社區(qū)壯大省容，擁有大量的主題缸夹、插件术陶，很適合普通用戶上手和使用凑懂。
最新的 Wordpress 3.9設(shè)計和交互上已經(jīng)扁平化，后臺做了不小的更新梧宫，可謂說更加易用接谨。
自己用著 WP 還算順手摆碉，寫過兩個主題，其中一個【W(wǎng)P原創(chuàng)主題】愿望盒子V1 采用瀑布流脓豪，還被好幾個網(wǎng)站用了巷帝，有段時間看百度統(tǒng)計有奇怪得的域名來源，點(diǎn)進(jìn)去一看用的是我的主題跑揉，結(jié)果大家都不換代碼锅睛，讓我情何以堪，好吧历谍，還是我懶的原因直接把自己網(wǎng)站的主題不改现拒，放在 Github 上了。
但是望侈，作為一個自稱"GEEK"的前(qiao)端(dai)工(ma)程(de)師(zha)印蔬，還用 Wordpress ，總有種逼格不夠高的感覺脱衙。前段時間WP到3.9后侥猬，自己的博客JS代碼出現(xiàn)兼容問題（啊多么痛的領(lǐng)悟，不要問我八哥從哪里來）捐韩，太蛋疼了退唠，遂袖子一卷，擼(qiao)起(dai)來(ma)荤胁，干脆就破罐子破摔瞧预，想著之前的那個 WP 主題也太粗糙了，女兒太丑了仅政，還是趕出去算了垢油，擼個新姑娘出來。
Ghostwill
這個主題叫 Ghostwill 圆丹，中文名還沒想好滩愁，暫時就叫「鬼才曉得」吧，已經(jīng)放在 Github 開源了辫封，請盡情擼硝枉，俗話說大家擼才是真的擼嘛，現(xiàn)在版本還是1.0.0倦微。
幾個特性
1.響應(yīng)式
現(xiàn)在一個網(wǎng)站不是響應(yīng)式都不好意思拿出手了妻味。Ghostwill 針對移動設(shè)備做了優(yōu)化，暫時是比較簡單的處理璃诀，下一步將對菜單導(dǎo)航和交互做進(jìn)一步優(yōu)化和處理，詳情請看 Github Commit log和該文章的更新日志 Update log 蔑匣。
自定義Cover image
你要說我抄襲 Medium劣欢，嗯哼棕诵，你要說也沒辦法，自己過去看了不少國外網(wǎng)站凿将，發(fā)現(xiàn)這種大 Banner 校套、大圖片、大字體算是一大趨勢牧抵。尤其是博客和資訊笛匙，大量留白，專注于中部核心內(nèi)容犀变。Ghostwill 支持用戶自定義封面照片妹孙。
在 Markdown 編輯時，給img圖片標(biāo)簽加上cover-image的alt值即可获枝。如果沒有自定義圖片蠢正，會默認(rèn)抓取文章中的第一張圖片，如果文章沒有圖片省店，則使用默認(rèn)圖片嚣崭。
下面這個視頻是我的一個演示（下面的寬屏圖片設(shè)置一樣操作），蛋疼七牛哦懦傍，視頻傳了上去雹舀，老是播不了。放一張GIF圖先粗俱。
<video width="640" height="380" class="wrap" controls>
<source src="http://qiniu.is26.com/cover-image-animate.mp4" type="video/mp4">
</video>
PS:封面照片有視覺滾差效果说榆。
自選寬屏圖片、視頻
通過給圖片 img 標(biāo)簽設(shè)置 alt 值 wrap源梭，給視頻和其他 iframe 或者 frame 添加class="wrap"娱俺，可以讓該[圖片、視頻废麻、frame]自適應(yīng)屏幕寬屏顯示荠卷。對于有些需要重點(diǎn)突出的大圖，可以根據(jù)需求自定義設(shè)置烛愧。
文章內(nèi) url 體驗優(yōu)化
把文章中一些常用的 url地址自動加上 iconfont油宜，并且對應(yīng)不同的提示顏色，支持國內(nèi)外常用社交網(wǎng)站怜姿，讓讀者能快速知道 url 跳轉(zhuǎn)目的地慎冤。
這是我自己寫的一個插件，過段時間單獨(dú)提取出來給其他平臺的用戶也用用沧卢。
代碼優(yōu)化
.hello{
postion:absolute;
color:red;
}
采用 Prismjs蚁堤，對不同的代碼高亮和添加顏色主題。
社交icon
博客頂部可以設(shè)置自己的社交網(wǎng)站鏈接但狭，均使用 iconfont 披诗，果斷時間分享一下如何自己配置 iconfont 的教程撬即。
其他
這是一個 HTML5 的主題，從一開始我就就沒想支持IE8以下的用戶呈队，IE的用戶就洗洗睡吧剥槐。（主要是根據(jù)自己博客的統(tǒng)計數(shù)據(jù)來的，現(xiàn)在我博客每天大概700-800的UV宪摧，超過一半的訪客用的是 Chrome 和移動端 webkit 瀏覽器我會隨便說么粒竖，好歹也是高端訪客嘛）。
Sass
開發(fā)的時候使用 CSS預(yù)處理Sass几于。
Grunt
必須 Grunt 自動化啊蕊苗，另外放上自己的另外一篇文章《讓前端工作更快、更智能:利用StaticPage自動化工作流》孩革。
前端優(yōu)化
css 壓縮,js 壓縮岁歉，采用又拍云CDN全站加速。
鍵盤控制
這個是我隨便加的功能膝蜈，按鍵盤J屏幕下滾锅移，K上翻，嗯哼饱搏，是 VIM 的操作習(xí)慣非剃。
TO-DO-Task 待解決
2014.4月30日更新:
- 圖片延遲加載(這個要改 Ghost core 代碼，略危險）
- Menu 響應(yīng)式處理
- 中文搜索功能
- iconfont 需添加更多的常用網(wǎng)站
- 交互優(yōu)化:加載動畫推沸、頁面切換轉(zhuǎn)場動畫
- 代碼高亮優(yōu)化:4月30日現(xiàn)在有點(diǎn)問題
- 低版本瀏覽器和微信內(nèi)置瀏覽器的兼容性問題（坑氨刚馈！ｗ薮摺７嗡亍）
- 社交分享url分享方法
- 后臺編輯直接把圖片上傳到又拍云or七牛等第三方（需要等 Ghost 官方API開發(fā)迭代）。
- 前端優(yōu)化:進(jìn)一步語義化 HTML 和 CSS宇驾，優(yōu)化js邏輯倍靡，減少重繪，目前優(yōu)化還粗放课舍，線上版本還比較粗放塌西。
嗯哼，這就是一個「鬼才曉得」的主題筝尾。
最后再放一下「鬼才曉得」在 Github 的地址:
https://github.com/foru17/ghostwill
這位靚仔捡需，走過擼過，進(jìn)來 star 一下唄筹淫。
對 Ghost 或者 Ghostwill 主題有什么疑問站辉，請直接在該文章下部留言或者在Github 提 issue。
