VnoGhost 主題
Vno 是一個從 Dale Anthony 的 Uno 派生出的 Ghost 主題。它遵從簡潔和響應式的設計風格,擁有一個獨立的封面,易于集成的 Disqus 評論系統(tǒng),字體圖標以及多種顏色。
我在原來的基礎上對一些預料外的行為進行了修正,并且改變了一些樣式和細節(jié),這樣主題在中文 (以及日文和韓文) 上表現(xiàn)得更好。我的個人博客 OneV's Den 正在使用這個主題,您可以看看實際的效果。
特性
封面
主題有一個全屏的帶有模糊(和半透明)效果的封面頁,您可以選擇喜歡的顏色,當然也可以添加您自己喜歡的顏色。您可以在封面頁上放置頭像,博客名字,簡介以及社交網絡導航等等。
響應式設計和動畫
Vno 遵循響應式設計,所以應該能在各種設備上都表現(xiàn)良好。很多事件是由動畫驅動的,這要感謝 Animate.css 的幫助。
Disqus 評論系統(tǒng)和 Font Awesome 字體
如果您打算使用 Disqus 的話,集成評論系統(tǒng)就只是填一個用戶名那么簡單。您也可以使用 Font Awesome 的圖標字體來獲得更好的表現(xiàn)。這些不僅對于個人站點 (比如博客) 來說是很好的選擇,對于一些商用的 CMS (內容管理系統(tǒng)) 來說也是不錯的解決方案。
SASS 和 No-JS 回滾
Vno 是基于 SASS 創(chuàng)建的,但是如果您不再希望繼續(xù)維護可擴展性,您也可以忽略這個再開發(fā)的流程。不過如果您懂一些 HTML 和 CSS 的話,對現(xiàn)有主題做出修改是輕而易舉的。
雖然 JS 已經被廣泛使用了,但是還是總會有一些奇怪的系統(tǒng)或是瀏覽器不支持 JS。得益于 Vno 對于沒有 JS 時進行了回滾處理,所以您也不必擔心。
代碼高亮
使用了 highlight.js 作為主題的代碼高亮引擎。您可以在您的技術博客上以簡潔優(yōu)美的形式呈現(xiàn)您的代碼。
使用
安裝
您應該已經建立了一個可用的 ghost 博客。如果您還沒有準備好,請參考官方的安裝頁面來配置一個屬于您自己的 ghost 博客。
一旦您準備就緒,只需要將這個 repo clone 到您博客的主題文件夾下:content/themes/,然后重啟 ghost,您應該就能在博客的設定面板中看到 Vno 了。
封面
圖片和顏色
將您的封面圖片放到主題的 assets/images/ 下,替換掉原來的 background-cover.jpg 文件即可。您也可以改變封面的顏色。找到 partials/side-panel.hbs 文件,將 <div class="panel-cover--overlay cover-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 鏈接,因為這個鏈接將觸發(fā)一個轉場到您的博客主頁面的動畫。
社交按鈕
可以在 partials/social.hbs 中按照例子將社交網絡的按鈕替換成您需要的鏈接和圖標。圖標都來自 Font Awesome,您可以訪問它們的網站來查看您能使用的所有圖標。
Disqus
為了使用 Disqus 的評論系統(tǒng),您需要從 Disqus 獲取您自己的 short name。將其添加到 comments.hbs 的 disqus_shortname 中就可以了。然后您還需要將 post.hbs 中的 {{!-- {{> comments}} --}} 替換為 {{> comments}} 來使 Disqus 生效。
代碼高亮主題
Vno 使用經典的 tomorrow 主題作為默認的代碼高亮配色。您也可以選擇和使用您最喜歡的配色,將配色文件直接放到 assets/css 文件夾下, 然后將 default.hbs 中的 css/tomorrow.css 改為您的文件來使配置生效。想要更多的配色方案的話,可以看看這個站點。
開發(fā)
為了簡單地對主題進行修改和開發(fā),您需要安裝 sass 編譯器以及 bourbon。如果您在本地有 ghost 環(huán)境的話,這些應該已經安裝好了,因為 ghost 運行是需要這些部件的。
您可以在終端中進行一些檢查,來看看是否已經安裝完成。如果沒有問題的話,您應該可以在命令行后看到對應的工具的版本號。
SASS
sass -v> Sass 3.3.6 (Maptastic Maple)
如果 SASS 沒有能正確安裝的話,請參見 Sass 安裝頁面進行安裝。
Bourbon
bourbon version> Bourbon 4.0.1
如果 Bourbon 沒有能正確安裝的話,請參見 Bourbon 的網站進行安裝。
開始開發(fā)
驗證安裝后就可以開始開發(fā)了。首先我們要將 bourbon 加載到 scss 文件夾里。
在主題文件夾下執(zhí)行 bourbon install 來加載 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 的命令行工具來監(jiān)視文件夾中的 scss 文件的改動,并自動重新編譯了。
pwd> In the vno theme root folder: {blog_path}/content/themes/vno
sass --watch assets/scss/vno.scss:assets/css/vno.css>>>> Sass is watching for changes. Press Ctrl-C to stop.
現(xiàn)在,任何對于 scss 文件的改動都將自動反映到最終的 /css/vno.css 文件中了。
OSX Maverick
有些人在運行 sass --watch 時可能會遇到如下錯誤:
> LoadError: cannot load such file -- rb-fsevent Use --trace for backtrace.
這是一個 Sass 在 OSX Maverick 下的已知問題,新版本中應該已經修復。請嘗試將 Sass 升級到最新版本,或者安裝 rb-fsevent 這個gem:
gem install rb-fsevent
