個(gè)性化我們的Octopress博客

上一篇講了如何通過Github + Octopress搭建屬于自己的博客，這篇主要記錄一下如何個(gè)性化我們的博客，包括主題，布局排版等。

一、更換主題：

在上一篇文章中，我們安裝了默認(rèn)主題classic，我覺得不是很好看，所以去找了幾個(gè)主題，先是選擇了Slash，它是是專為 Octopress 設(shè)計(jì)的簡單布景主題，清新簡潔，排版完美，支持classic 主題的所有功能，并內(nèi)建 Fancybox。

打開終端，輸入以下指令即可完成Slash主題的安裝：

$ cd octopress
$ git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate

更多關(guān)于slash的請(qǐng)?jiān)L問http://tommy351.github.io/Octopress-Theme-Slash/index_tw.html#overview

Slash主題效果圖.jpg

后來我又換成了solarized主題，它有兩種模式light和dark,安裝方法差不多，在octopress目錄下，終端鍵入：

git clone http://github.com/erikzaadi/solarized-octopress-theme .themes/solarized
rake install["solarized"]

想要改變模式,編輯 sass/custom/_colors.scss 然后改變 $sol 和 $solarized:

$sol : light; // light or dark - Recommended: set $solarized  to the opposite of this
$solarized : dark; // (code syntax highlighting theme)
Solarized-light主題效果圖.jpg

對(duì)于這些第三方主題，如果有自己不滿意的地方，我們都是可以自己修改設(shè)計(jì)的，具體做法就是去octopress目錄下修改配置文件，比如字體，配色，布局排版等等。

更多關(guān)于第三方主題請(qǐng)?jiān)L問https://github.com/imathis/octopress/wiki/3rd-Party-Octopress-Themes

二、修改基本信息

初次打開自己的博客時(shí)，我的第一想法是修改一下博客空間名等基礎(chǔ)的設(shè)置。想要修改，可以進(jìn)入 octopress打開_config.yml文件，它分為三部分，修改其第一部分即可修改基本信息。

Main Configs

url: http://yoursite.com  # blog地址
title: My Octopress Blog  # blog名稱，會(huì)出現(xiàn)在左上角
subtitle: A blogging framework # title下面的副標(biāo)題，可以用來放你的喜歡的名人名言，或者簡單介紹下自己
author: Your Name # 會(huì)出現(xiàn)在每篇文章下面的Posted by 
simple_search: http://google.com/search  # 右邊搜索框使用的搜索引擎
description: # head.html中meta name="description"的默認(rèn)content，但一般都被會(huì)截?cái)嗟奈恼聝?nèi)容替換掉

Jekyll & Plugins

root: / # 網(wǎng)站的根目錄，如果你網(wǎng)站是http://site.com/project這樣的形式，就要寫成 root: /project
# 生成文章的url形式，比如不喜歡url中帶時(shí)間，習(xí)慣后綴加html，可以寫成 /blog/:title.html
permalink: /blog/:year/:month/:day/:title/
paginate: 10          # 每頁展現(xiàn)blog的數(shù)量，如果blog數(shù)量大于這個(gè)，會(huì)產(chǎn)生翻頁
recent_posts: 5       # 右側(cè)最近發(fā)表模塊里blog的數(shù)量
# 在某篇blog中使用<!-- more -->，列表頁就不會(huì)展現(xiàn)該blog全文，就會(huì)顯示這個(gè)read on鏈接，指向blog全文
excerpt_link: "Read on →"
# 右側(cè)邊欄的展現(xiàn)，有些要下面的設(shè)置配合，比如你沒有配置github_user，則這兒也不會(huì)展現(xiàn)github.html
# 也可以增加一些自己的頁面，比如在/source/_includes/custom/asides/下增加about.html
# 然后在列表中增加custom/asides/about.html即可，這兒前后的順序，就代表了頁面上下的次序 
default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html]
# 可以給不同的頁面配置不同的側(cè)邊欄  
blog_index_asides:
post_asides:
page_asides:

三、添加navigation頁面

octopress默認(rèn)有Blog、Archives、Tags三個(gè)導(dǎo)航欄，但比如我們想要添加一個(gè)About導(dǎo)航欄，在終端執(zhí)行以下代碼新建頁面

$ rake new_page[about]

這會(huì)生成 source/about/index.markdown 文件。編輯該文件的內(nèi)容。然后在頭部導(dǎo)航菜單中添加頁面的超鏈接，具體做法是編輯 /source/_includes/custom/navigation.html 文件，設(shè)置超鏈接，我的設(shè)置是：

    <ul class="main-navigation">
        <li><a href="{{ root_url }}/">Blog</a></li>
        <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
        <li><a href="{{ root_url }}/tags">Tags</a></li>
        <li><a href="{{ root_url }}/about">About</a></li>
    </ul>

效果為

新增About導(dǎo)航欄

四、側(cè)邊欄添加分類目錄Categories

我們可使用第三方插件實(shí)現(xiàn) octopress-tagcloud

將文件包下載，拷貝文件只同樣的目錄下，然后在_config.yml的default_asides中添加category_list.html目錄，我的為 custom/asides/category_list.html

對(duì)于文章怎么分類呢？在文章markdown文件開頭設(shè)置categories屬性即可，比如：

categories: Octopress

五、添加第三方評(píng)論

配置Disqus插件

disqus 是octopress內(nèi)置的comments功能，注冊disqus并和你的博客網(wǎng)址關(guān)聯(lián)后，編輯config.yml文件可以打開該功能，找到以下內(nèi)容并修改

#Disqus comments
disqus_short_name: 
disqus_show_comment_count: false

填入注冊 disqus 賬號(hào)的名稱，并將false修改為true。

另外需要注意：

  • disqus必須要和自己的博客地址username.github.io關(guān)聯(lián)上，通過添加Website關(guān)聯(lián)
  • 在disqus的setting的edit profile中設(shè)置開啟Moderation

六、側(cè)邊欄添加微博秀

通過在側(cè)邊欄添加微博模塊可以多一種互動(dòng)方式。

首先要從新浪微博秀獲取到自定義的微博秀代碼，設(shè)定好微博秀樣式后將代碼復(fù)制下來。

然后在source/_includes/custom/asides目錄下新建weibo.html文件，按照如下格式編輯該文件：

<section>
    <h1>新浪微博</h1>
    <ul id="weibo">
    <li>

   -- 在此插入獲得的微博秀代碼 --

      </li>
    </ul>
</section>

將剛才賦值下來的自定義微博秀代碼粘貼到上述指定位置。

最后，和自定義category側(cè)邊欄一樣，我們需要在default_asides中加入custom/asides/weibo.html。

重新部署后，微博秀就能正常展示啦！

七、新標(biāo)簽頁打開網(wǎng)站中第三方鏈接

Octopress博客中，默認(rèn)是在當(dāng)前界面中打開第三方鏈接，這導(dǎo)致網(wǎng)站瀏覽者跳到第三方鏈接后很難回來，為了用戶體驗(yàn)，我們可設(shè)置在新標(biāo)簽頁中打開鏈接

將以下代碼加入source/_includes/custom/head.html文件中：

> <script type="text/javascript">
> function addBlankTargetForLinks () {
>   $('a[href^="http"]').each(function(){
>       $(this).attr('target', '_blank');
>   });
> }
> 
> $(document).bind('DOMNodeInserted', function(event) {
>  addBlankTargetForLinks();
> });
> </script>

記得把左側(cè)的 > 符號(hào)都去掉。

不過本站的鏈接還是會(huì)在當(dāng)前界面中打開。

八、快速返回頂部按鈕

文章較長時(shí)，返回頂部按鈕還是很有用的。下面介紹如何添加一個(gè)返回頂部按鈕：

  • 實(shí)現(xiàn)返回按鈕功能

首先創(chuàng)建source/javascripts/top.js，添加如下代碼實(shí)現(xiàn)滑動(dòng)返回頂部效果:

function goTop(acceleration, time)
{
        acceleration = acceleration || 0.1;
        time = time || 16;

        var x1 = 0;
        var y1 = 0;
        var x2 = 0;
        var y2 = 0;
        var x3 = 0;
        var y3 = 0;

        if (document.documentElement)
        {
                x1 = document.documentElement.scrollLeft || 0;
                y1 = document.documentElement.scrollTop || 0;
        }
        if (document.body)
        {
                x2 = document.body.scrollLeft || 0;
                y2 = document.body.scrollTop || 0;
        }
        var x3 = window.scrollX || 0;
        var y3 = window.scrollY || 0;

        var x = Math.max(x1, Math.max(x2, x3));
        var y = Math.max(y1, Math.max(y2, y3));

        var speed = 1 + acceleration;
        window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

        if(x > 0 || y > 0)
        {
                var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
                window.setTimeout(invokeFunction, time);
        }
}
  • 自定義返回按鈕格式

創(chuàng)建source/_includes/custom/totop.html，設(shè)置返回頂部按鈕樣式和位置，
其中的width、height、right、bottom為圖片在網(wǎng)頁中的位置，可根據(jù)圖片大小自行設(shè)定，示例代碼如下：

    <!--返回頂部開始-->
    <div id="full" style="width:50px; height:50px; position:fixed; right:80px; bottom:100px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
    <a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="返回頂部"></a>
    </div>
    <script src="/javascripts/top.js" type="text/javascript"></script>
    <!--返回頂部結(jié)束-->
  • 選擇按鈕圖片
    找到自己喜愛的返回按鈕圖片，命名為top.png后添加到source/images目錄中（或修改totop.html中圖片的路徑）。

九、添加分享功能

添加分享功能很簡單，
在 _config.yml 中增加一項(xiàng)： weibo_share: true
修改source/_includes/post/sharing.html ，增加：

  // 下面的大括號(hào)是全角的，如果復(fù)制，請(qǐng)自行改成半角
 ｛% if site.weibo_share %｝
     ｛% include post/weibo.html %｝
 ｛% endif %｝

增加文件：source/_includes/post/weibo.html
訪問 http://www.jiathis.com/，獲取分享的代碼
將上面 2 步的代碼都加入到 weibo.html 中即可

另外可訪問 http://uyan.cc/ ，獲得評(píng)論的代碼，添加到weibo.html，即可增加評(píng)論功能

十、添加訪問統(tǒng)計(jì)功能

octopress模板里面默認(rèn)帶了Google Analytics工具，只需要注冊Google Analytics， 獲得一個(gè)google_analytics_tracking_id， 添加到_config.yml中對(duì)應(yīng)位置，并對(duì)網(wǎng)站進(jìn)行驗(yàn)證即可。然后可以通過Google Analytics分析網(wǎng)站的流量了。而且可以使用Google站長工具，對(duì)網(wǎng)站進(jìn)行更全面的分析，進(jìn)行SEO。

對(duì)自己的網(wǎng)站進(jìn)行驗(yàn)證，只需將網(wǎng)站提供的用于驗(yàn)證的代碼添加到source/_includes/head.html的<head>標(biāo)簽之間，網(wǎng)站部署到網(wǎng)上后，過幾分鐘即可驗(yàn)證通過，其他 需要驗(yàn)證的也同樣操作。

除了Google的統(tǒng)計(jì)工具，還有就是國內(nèi)使用很廣的CNZZ了，注冊后，添加并驗(yàn)證你的網(wǎng)站就可以添加統(tǒng)計(jì)代碼了，選好自己喜歡的樣式，獲得代碼，可添加到source/_includes/custom/footer.html中。即可查看每天你的博客的流量，進(jìn)行相應(yīng)的優(yōu)化了。

最后還要提的就是百度站長工具和 百度統(tǒng)計(jì)了，方法和CNZZ方法類似 ，統(tǒng)計(jì)代碼也可以添加到source/_includes/custom/footer.html中。但是我發(fā)現(xiàn) 似乎百度統(tǒng)計(jì)并不太準(zhǔn)確，并且百度很難搜的到我的博客。

我的統(tǒng)計(jì)代碼添加如下，使用CNZZ：

    <p>
    Copyright ? {{ site.time | date: "%Y" }} - {{ site.author }} -
    <span class="credit">Powered by <a >Octopress</a></span>
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256694231'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.#/z_stat.php%3Fid%3D1256694231%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
    </p>

十一、添加友情鏈接

在source\_includes\custom\asides目錄下添加一個(gè)blogroll.html文件，模仿about.html，添加一些友情鏈接，例如：

    <section>
      <h1>友情鏈接</h1>
      <ul>
        <li>
          <a >簡書</a>
        </li>
        <li>
          <a >CocoaChina</a>
        </li>
      </ul>
    </section>

然后在_config.yml文件中，在default_asides的數(shù)組中添加custom/asides/blogroll.html。

十二、一些漢化工作

若有需要，我們可以做一些漢化工作：在 _config.yml中，把 Read on改為 “繼續(xù)閱讀”。 在 source/_includes/custom/asides 目錄下，將Recent Comments改為“最新評(píng)論”，Categories改為“分類目錄”，將 source/_includes/asides/recent_posts.html 中Recent Posts 改為“最新文章”。

十三、在添加原文地址

當(dāng)別人轉(zhuǎn)載了我們的文章時(shí)，有時(shí)我們想要在自己的文章末尾添加原文地址，可按以下步驟添加

  1. 添加post_footer_filter.rb插件到plugins目錄下，這個(gè)插件可以在這兒 codemacro 下載到

  2. 此時(shí)默認(rèn)顯示在鏈接之前的是original link:，通過該插件代碼可看出可以通過original_url_pre參數(shù)指定。只需要在_config.yml中加入

original_url_pre: "顯示信息"
  1. 將鏈接信息與文章內(nèi)容區(qū)分出來, 默認(rèn)狀態(tài)下，加入的鏈接信息與文章內(nèi)容在顯示上無法區(qū)分。可以在sass/custom/_styles.scss中加入一行：
.post-footer{
     margin-top:10px;
     padding:5px;
     background:
     none repeat scroll 0pt 0pt #eee;
     font-size:90%;
     color:gray
}

十四、公益404

在source目錄下創(chuàng)建404.markdown，添加如下代碼，即可實(shí)現(xiàn)公益404的功能，當(dāng)你的網(wǎng)頁出錯(cuò)找不到時(shí)，可以為公益盡一份力。

---
layout: page
title: "404 Error"
date: 2013-10-10 19:17
comments: false
sharing: false
footer: false
---
<script type="text/javascript" src="http://www.qq.com/404/search_children,js" charset="utf-8></script>

博客原文地址：個(gè)性化我們的Octopress博客

參考文章：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容