1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        VnoGhost 主題

        聯(lián)合創(chuàng)作 · 2023-09-23 08:50

        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.hbsdisqus_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
        瀏覽 22
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        編輯 分享
        舉報
        評論
        圖片
        表情
        推薦
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        編輯 分享
        舉報
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            台湾无码一区二区三区 | 人人人人干 | 特级西西西西4444级酉西88wwww特 | 下载香港一级片 | 免费一级大毛片免费收看 | 大插香蕉| 日日人人| 日本少妇激情舌吻 | 大炕上的性事短篇 | 国产一级18 片视频 |