Vno Ghost 主题开源项目

我要开发同款
匿名用户2015年05月05日
28阅读
开发技术JavaScriptHTML/CSS
所属分类网页组件、Web应用开发
授权协议未知

作品详情

Vno是一个从DaleAnthony的Uno派生出的Ghost主题。它遵从简洁和响应式的设计风格,拥有一个独立的封面,易于集成的Disqus评论系统,字体图标以及多种颜色。

我在原来的基础上对一些预料外的行为进行了修正,并且改变了一些样式和细节,这样主题在中文(以及日文和韩文)上表现得更好。我的个人博客OneV'sDen正在使用这个主题,您可以看看实际的效果。

特性封面

主题有一个全屏的带有模糊(和半透明)效果的封面页,您可以选择喜欢的颜色,当然也可以添加您自己喜欢的颜色。您可以在封面页上放置头像,博客名字,简介以及社交网络导航等等。

响应式设计和动画

Vno遵循响应式设计,所以应该能在各种设备上都表现良好。很多事件是由动画驱动的,这要感谢Animate.css的帮助。

Disqus评论系统和FontAwesome字体

如果您打算使用Disqus的话,集成评论系统就只是填一个用户名那么简单。您也可以使用FontAwesome的图标字体来获得更好的表现。这些不仅对于个人站点(比如博客)来说是很好的选择,对于一些商用的CMS(内容管理系统)来说也是不错的解决方案。

SASS和No-JS回滚

Vno是基于SASS创建的,但是如果您不再希望继续维护可扩展性,您也可以忽略这个再开发的流程。不过如果您懂一些HTML和CSS的话,对现有主题做出修改是轻而易举的。

虽然JS已经被广泛使用了,但是还是总会有一些奇怪的系统或是浏览器不支持JS。得益于Vno对于没有JS时进行了回滚处理,所以您也不必担心。

代码高亮

使用了highlight.js作为主题的代码高亮引擎。您可以在您的技术博客上以简洁优美的形式呈现您的代码。

使用安装

您应该已经建立了一个可用的ghost博客。如果您还没有准备好,请参考官方的安装页面来配置一个属于您自己的ghost博客。

一旦您准备就绪,只需要将这个repoclone到您博客的主题文件夹下:content/themes/,然后重启ghost,您应该就能在博客的设定面板中看到Vno了。

封面图片和颜色

将您的封面图片放到主题的assets/images/下,替换掉原来的background-cover.jpg文件即可。您也可以改变封面的颜色。找到partials/side-panel.hbs文件,将<divclass="panel-cover--overlaycover-orange"></div>中的cover-orange替换成您需要的颜色即可。默认为您提供了七种选择:

cover-blue-#2568A3

cover-green-#156F78

cover-purple-#493252

cover-red-#E25440

cover-orange-#FB9C50

cover-slate-#3D4260

cover-disabled-透明

头像和简介

头像直接使用了您的博客的logo。在博客的设定页面中可以进行更改。

您还可以在封面页上写一个简短的介绍。只要您瞄一眼partials/side-panel.hbs应该就知道怎么做了:)

导航按钮

也在partials/side-panel.hbs文件中定义。不要忘了把它们换成您自己的链接。您不应该更改或者至少保留/#blog链接,因为这个链接将触发一个转场到您的博客主页面的动画。

社交按钮

可以在partials/social.hbs中按照例子将社交网络的按钮替换成您需要的链接和图标。图标都来自FontAwesome,您可以访问它们的网站来查看您能使用的所有图标。

Disqus

为了使用Disqus的评论系统,您需要从Disqus获取您自己的shortname。将其添加到comments.hbs的disqus_shortname中就可以了。然后您还需要将post.hbs中的{{!--{{>comments}}--}}替换为{{>comments}}来使Disqus生效。

代码高亮主题

Vno使用经典的tomorrow主题作为默认的代码高亮配色。您也可以选择和使用您最喜欢的配色,将配色文件直接放到assets/css文件夹下,然后将default.hbs中的css/tomorrow.css改为您的文件来使配置生效。想要更多的配色方案的话,可以看看这个站点。

开发

为了简单地对主题进行修改和开发,您需要安装sass编译器以及bourbon。如果您在本地有ghost环境的话,这些应该已经安装好了,因为ghost运行是需要这些部件的。

您可以在终端中进行一些检查,来看看是否已经安装完成。如果没有问题的话,您应该可以在命令行后看到对应的工具的版本号。

SASSsass -v> Sass 3.3.6 (Maptastic Maple)

如果SASS没有能正确安装的话,请参见Sass安装页面进行安装。

Bourbonbourbon version> Bourbon 4.0.1

如果Bourbon没有能正确安装的话,请参见Bourbon的网站进行安装。

开始开发

验证安装后就可以开始开发了。首先我们要将bourbon加载到scss文件夹里。

在主题文件夹下执行bourboninstall来加载bourbon:

bourbon install --path assets/scss> bourbon files installed to assets/scss/bourbon///Or "Bourbon files already installed, doing nothing." if you already installed it.

然后就可以使用sass的命令行工具来监视文件夹中的scss文件的改动,并自动重新编译了。

pwd> In the vno theme root folder: {blog_path}/content/themes/vnosass --watch assets/scss/vno.scss:assets/css/vno.css>>>> Sass is watching for changes. Press Ctrl-C to stop.

现在,任何对于scss文件的改动都将自动反映到最终的/css/vno.css文件中了。

OSXMaverick

有些人在运行sass--watch时可能会遇到如下错误:

> LoadError: cannot load such file -- rb-fsevent  Use --trace for backtrace.

这是一个Sass在OSXMaverick下的已知问题,新版本中应该已经修复。请尝试将Sass升级到最新版本,或者安装rb-fsevent这个gem:

gem install rb-fsevent
查看全文
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论