构思了一个多月,这个周末在公司加(tōu)班(lǎn)敲了20h+的代码,终于还是把博客从 wordpress 迁移到了去年新出来的 Ghost 博客平台,Ghost其简单、快速、开源的特性,迅速地吸引了国内外不少开发者使用。
简单地介绍一下 Ghost 的特征:
1.Markdown:使用 Markdown,过去一年多,自己已经转成使用 Markdown 写作,还是很方便的。Wordpress 虽然能通过插件的方式支持 MD ,可还是略不方便,每次都是在 Mac 上用 Mou 或者在简书写完后再把 HTML 源码拷过来,方法略 low。
2.Nodejs: 速度超快,作为一个前端兼 JS 渣,还是了解 Nodejs 的性能强大之处,尤其是博客这种简单的需求,如果 Wordpress 是小恶魔的大斧头,又大,又粗,又黑(我说的是事实好么!!你看下面图好么)。
那么Ghost就像是一把 瓦雷利亚钢利刃 。
又轻,又硬,又持久,耍酷还能搞姐姐。
3.开源&&社区:自己研究了下 Ghost的源代码,很适合我们前端进行开发,贡献代码到核心代码也不是不可能的,写个主题、插件神马的需求还是不小的,这次博客改版,有些交互和功能,还是自己用 js 实现的,没办法啊,Ghost 还是太年轻了,API接口神马的还在完善和开发中,用江爷爷的话说就是"Too Young, too Navie",必须接受这个事实。
我的博客「罗磊的独立博客」从前身 willei.com 开始, 已经差不多五岁啦,过去的这些年,一直使用的是 Wordpress ,WP是一个十分强大的CMS平台,历史悠久,社区壮大,拥有大量的主题、插件,很适合普通用户上手和使用。
最新的 Wordpress 3.9设计和交互上已经扁平化,后台做了不小的更新,可谓说更加易用。
自己用着 WP 还算顺手,写过两个主题,其中一个【WP原创主题】愿望盒子V1 采用瀑布流,还被好几个网站用了,有段时间看百度统计有奇怪得的域名来源,点进去一看用的是我的主题,结果大家都不换代码,让我情何以堪,好吧,还是我懒的原因直接把自己网站的主题不改,放在 Github 上了。
但是,作为一个自称"GEEK"的前(qiao)端(dai)工(ma)程(de)师(zha),还用 Wordpress ,总有种逼格不够高的感觉。前段时间WP到3.9后,自己的博客JS代码出现兼容问题(啊多么痛的领悟,不要问我八哥从哪里来),太蛋疼了,遂袖子一卷,撸(qiao)起(dai)来(ma),干脆就破罐子破摔,想着之前的那个 WP 主题也太粗糙了,女儿太丑了,还是赶出去算了,撸个新姑娘出来。
Ghostwill
这个主题叫 Ghostwill ,中文名还没想好,暂时就叫「鬼才晓得」吧,已经放在 Github 开源了,请尽情撸,俗话说大家撸才是真的撸嘛,现在版本还是1.0.0。
几个特性
1.响应式
现在一个网站不是响应式都不好意思拿出手了。Ghostwill 针对移动设备做了优化,暂时是比较简单的处理,下一步将对菜单导航和交互做进一步优化和处理,详情请看 Github Commit log和该文章的更新日志 Update log 。
自定义Cover image
你要说我抄袭 Medium,嗯哼,你要说也没办法,自己过去看了不少国外网站,发现这种大 Banner 、大图片、大字体算是一大趋势。尤其是博客和资讯,大量留白,专注于中部核心内容。Ghostwill 支持用户自定义封面照片。
在 Markdown 编辑时,给img图片标签加上cover-image
的alt值即可。如果没有自定义图片,会默认抓取文章中的第一张图片,如果文章没有图片,则使用默认图片。
下面这个视频是我的一个演示(下面的宽屏图片设置一样操作),蛋疼七牛哦,视频传了上去,老是播不了。放一张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
标签设置 alt 值 wrap
,给视频和其他 iframe
或者 frame
添加class="wrap"
,可以让该[图片、视频、frame]自适应屏幕宽屏显示。对于有些需要重点突出的大图,可以根据需求自定义设置。
文章内 url 体验优化
把文章中一些常用的 url地址自动加上 iconfont,并且对应不同的提示颜色,支持国内外常用社交网站,让读者能快速知道 url 跳转目的地。
这是我自己写的一个插件,过段时间单独提取出来给其他平台的用户也用用。
代码优化
.hello{
postion:absolute;
color:red;
}
采用 Prismjs,对不同的代码高亮和添加颜色主题。
社交icon
博客顶部可以设置自己的社交网站链接,均使用 iconfont ,果断时间分享一下如何自己配置 iconfont 的教程。
其他
这是一个 HTML5 的主题,从一开始我就就没想支持IE8以下的用户,IE的用户就洗洗睡吧。(主要是根据自己博客的统计数据来的,现在我博客每天大概700-800的UV,超过一半的访客用的是 Chrome 和移动端 webkit 浏览器我会随便说么,好歹也是高端访客嘛)。
Sass
开发的时候使用 CSS预处理Sass。
Grunt
必须 Grunt 自动化啊,另外放上自己的另外一篇文章《让前端工作更快、更智能:利用StaticPage自动化工作流》。
前端优化
css 压缩,js 压缩,采用又拍云CDN全站加速。
键盘控制
这个是我随便加的功能,按键盘J
屏幕下滚,K
上翻,嗯哼,是 VIM 的操作习惯。
TO-DO-Task 待解决
2014.4月30日更新:
- 图片延迟加载(这个要改 Ghost core 代码,略危险)
- Menu 响应式处理
- 中文搜索功能
- iconfont 需添加更多的常用网站
- 交互优化:加载动画、页面切换转场动画
- 代码高亮优化:4月30日现在有点问题
- 低版本浏览器和微信内置浏览器的兼容性问题(坑啊!!!)
- 社交分享url分享方法
- 后台编辑直接把图片上传到又拍云or七牛等第三方(需要等 Ghost 官方API开发迭代)。
- 前端优化:进一步语义化 HTML 和 CSS,优化js逻辑,减少重绘,目前优化还粗放,线上版本还比较粗放。
嗯哼,这就是一个「鬼才晓得」的主题。
最后再放一下「鬼才晓得」在 Github 的地址:
https://github.com/foru17/ghostwill
这位靓仔,走过撸过,进来 star 一下呗。
对 Ghost 或者 Ghostwill 主题有什么疑问,请直接在该文章下部留言或者在Github 提 issue。