如何自定義octopress主題

(轉載本文時請代表原文連接：http://fzyz999.github.io/blog/2013/04/12/ru-he-zi-ding-yi-octopresszhu-ti/，順便歡迎有興趣的朋友看看個人github博客：http://fzyz999.github.io) 小序

　　搜了搜使用octorpress的網站，發現包括本博客在內的不少博客都清一色地使用了默認主題，幾乎未做任何修改。我本想搜一個現成的有創意的主題直接用，結果未能如願。看來只能本身動手，豐衣足食了。

　　自定義主題最基本的能力要求是對html、css等必定了解，但很惋惜，筆者並不知足這一要求，只能邊嘗試邊查資料邊學習。因此，若是翻譯有誤或者有知識性錯誤，請你們指正。

octopress主題和個性化

　　2.0版本的Octopress添加了 source/_includes/custom 目錄。若是你的octopress沒有這個目錄，請升級到最新版本。這個目錄頗有用。目錄結構以下：

source/
    _includes/    # 主佈局部分
    custom/     # 自定義網頁頁眉、頁腳、導航欄、邊側欄、網頁頭部信息
    asides/     # 邊側欄主題部分
    post/       # 博文元數據、分享和評論部分
    _layouts/     # 頁面、博文、分類存檔佈局

修改導航欄

向主導航欄添加或刪除連接，須要編輯/source/_includes/custom/navigation.html。這個文件的內容通常像這樣：

<!-- lang: html -->
<ul class="main-navigation">
    <li><a href="{{ root_url }}/">Blog</a></li>
    <li><a href="{{ root_url }}/archives">Archives</a></li>
</ul>

每一個連接以 {{ root_url }} 開頭(當網站被部署到子目錄中時，這會幫助Octopress生成不一樣的url)。若是你正在把你的網站部署到像yousite.com/octopress這樣的地方，這對你會頗有幫助。

設置首頁

Octopress默認把你博文的索引頁做爲首頁。若是你想自定義index頁，執行這樣的命令：

mv source/index.html source/blog/index.html
rake new_page[index.html]

接着，當你升級Octopress時，更新你的 Rakefile 以確認你的新博客主頁被保留了。

blog_index_dir = 'source/blog'

記得爲你的網站更新主導航，由於目前的博客連接到 / 。（具體請查看修改導航欄這一部份內容）添加home的連接，而後把'blog'的連接設置到 /blog/

這樣，source/index.html就會成爲你的首頁。

修改 < HEAD >

若是你想修改 < HEAD > 請編輯 /source/_includes/custom/head.html文件。

<!-- lang: html -->
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

你能夠添加或移除Google Fonts，插入javascript腳本等

修改邊側欄

Octopress在邊側欄上顯示Twiter，Pinboard一類的第三方服務。你能夠在 _config.yml 中從新調整這些，並建立自定義的邊側欄。

default_asides:   [asides/recent_posts.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html]
# blog_index_asides:
# post_asides:
# page_asides:

若是你想向邊側欄添加新的部分，能夠在 source/_includes/custom/asides/ 下建立一個新的文件。例如不少人都想建立一個About Me，該目錄下已經有一個about.html文件用於被添加到邊側欄。

<!-- lang: html -->
<section>
  <h1>About Me</h1>
  <p>A little something about me.</p>
</section>

不管合適你添加一個新的部分到邊側欄，請參照這個模式。使用 < section > 和 < h1 > 來創建標題。而後編輯 _config.yml以把他們添加進去。

default_asides:     [asides/recent_posts.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html]
blog_index_asides:  [custom/asides/about.html, asides/recent_posts.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html]
post_asides:        [custom/asides/about.html, asides/recent_posts.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html]
# page_asides:

修改頁眉

標題和附標題須要在_config.yml中編輯。若是你須要作其餘改動，請編輯/source/_includes/custom/header.html

<!-- lang: html -->
<hgroup>
  <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
  {% if site.subtitle %}
  <h2>{{ site.subtitle }}</h2>
  {% endif %}
</hgroup>

修改頁腳

你能夠在 source/_includes/custom/footer.html 中自定義頁腳

<!-- lang: html -->
<p>
  Copyright &copy; {{ site.time | date: "%Y" }} - {{ site.author }} -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

你能夠把它改爲任何你想要的樣子。但必定要酷且保留Octopress的連接。

博客樣式

自定義樣式

若是你想自定義樣式，請編輯sass/custom/_styles.scss。這個樣式表最後會被導出。

修改配色方案

你可使用HSL Color Picker這個簡單的基於網頁的顏色拾取器幫助你選擇顏色。

# In /sass/base/
    _theme.scss      # 全部的顏色都被定義在這裏
    
    # In /sass/custom/ - 修改這些文件能夠簡單地個性化
    _colors.scss     # Override colors in base/_theme.scss to change color schemes
    _styles.scss     # Easly Override any style (last in the cascade)

自定義顏色

<!-- lang: css -->
$header-bg: #263347;
$subtitle-color: lighten($header-bg, 58);
$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
$sidebar-bg: desaturate(#eceff5, 8);
$sidebar-link-color: saturate(#526f9a, 10);
$sidebar-link-color-hover: darken(#7ab662, 9);

/* Navigation */
$nav-bg: #ccc !default;
$nav-color: darken($nav-bg, 38) !default;
$nav-color-hover: darken($nav-color, 25) !default;
...