Octopress部落格設定

文章目錄

• 設定首頁
• 設定文章

在上一篇《Windows下搭建Octopress部落格》中介紹了怎樣在Windows環境中搭建Octopress部落格，以及如何部署到Github中，本文主要講解怎樣對Octopress進行一些設定，比如修改部落格標題、添加側邊欄等等。

Octopress檔案目錄

首先來看下Octopress的檔案目錄吧，因為很多的設定就是從這裡開始的。

剛clone下來的Octopress源碼沒有最後的三個檔案，當執行了rake install後會產生最後的三個目錄。

• source：該目錄是執行rake install後從.themes\classic目錄中的source拷貝而來，並且添加了一個_posts目錄了，當執行了rake new_post['title']後會在_post產生博文的markdown檔案。包括後面的很多設定頁是在該目錄中進行；
• sass：也是在執行rake install後從.themes\classic目錄中的source拷貝而來。Sass 擴充了 CSS3，增加了規則、變數、混入、選取器、繼承等等特性。Sass 產生良好格式化的 CSS 代碼，易於組織和維護。
• public：剛clone源碼時public是個空目錄，當執行了rake generate後會編譯source的內容然後將編譯後的內容複寫到public目錄中，在執行rake deploy後也是講public的內容推送到伺服器上，我們最終訪問到的也是public的內容。這個目錄中的內容一般不用我們手動修改，執行rake generate來產生。

基本設定

在Octopress目錄中有一個名為_config.yml的檔案：

url: http://oec2003.github.io                           #網站地址
title: 馮威的個人部落格                                           #網站標題
subtitle: 臨淵羨魚 不如退而結網.                       #網站副標題
author: 馮威                                                         #網站作者，通常顯示在頁尾和每篇文章的尾部
simple_search: http://google.com/search   # 搜尋引擎
description:                                                        #網站的描述，出現在HTML頁面中的 meta 中的 description

在使用rake new_post['title']產生的markdown檔案中，可以對每篇博文進行一些設定：

---
layout: post                                                        
title: "我的第一篇Octopress部落格"                    #文章標題
date: 2013-05-26 18:49                                   #文章發布時間
comments: true                                                #是否允許評論
categories: Octopress                                     #文章分類
---

設定網站的description和keywords

在網頁的head部分設定name為description和keywords的meta元素可以讓網頁更容易被搜尋引擎搜尋到，下面說說怎樣在Octopress中設定首頁和每篇博文的description和keywords。

設定首頁

開啟source/index.html檔案，在檔案的頭部添加相應內容：

---
layout: default
#下面為添加的內容
description: "馮威的個人部落格"
keywords: Asp.Net,C#
---

設定文章

文章的設定直接在每篇文章對應的markdown檔案的頭部添加相應內容積即可：

---
layout: post
title: "我的第一篇Octopress部落格"
date: 2013-05-26 18:49
comments: true
categories: Octopress
#下面為新增內容
description: "我的第一篇Octopress部落格"
keywords: Octopress
---

導覽列設定

開啟檔案source\_includes\custom\navigation.html，預設情況下如下所示：

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

可以將Blog和Archives修改為首頁和歸檔，不過記得將包含有中文的檔案儲存為無BOM的UTF-8編碼格式。也可以在此添加一個標籤頁，比如加上一個關於，我們可以按下面步驟實現：

使用命令rake new_page['about']建立一個頁面，頁面路徑為source\about\index.markdown;

修改上面的navigation.html為：

<ul class="main-navigation">
  <li><a href="{{ root_url }}/">首頁</a></li>
  <li><a href="{{ root_url }}/blog/archives">歸檔</a></li>
  <li><a href="{{ root_url }}/about">關於</a></li>
</ul>

添加側邊欄文章分類

我們知道在文章的markdown檔案中有一個categories可以進行設定文章的分類，設定了categories的文章在文章的尾部會顯示分類的連結，如果想在側邊欄中展示所有的分類，可以按以下步驟進行：

1. 在plugins目錄中建立category_list_tag.rb檔案，檔案內容如下：

module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

2. 添加source/_includes/asides/category_list.html檔案，內容如下：

<section>
  <h1>文章分類</h1>
  <ul id="categories">
    {% category_list %}
  </ul>
</section>

再次強調，檔案中含有中文需要儲存為無BOM的UTF-8格式

3. 修改_config.yml檔案，在default_asides項中添加asides/category_list.html，值之間以逗號隔開。

default_asides: [asides/category_list.html, asides/recent_posts.html]

如果想將最新文章的Recent Posts修改為中文，修改source\_includes\asides\recent_posts.html即可。

在側邊欄中還可以添加其他的一些組件，如新浪微博、我的豆瓣、最新評論、標籤雲等，添加頁面以及讓其顯示的方法和上面類似，只是在內容取值有所差別。

添加評論

Octopress自身不支援評論功能，不過我們可以使用第三方的評論系統，國外的有Disqus，國內的有多說等。下面介紹怎樣在Octopress中使用Disqus。

首先需要在Disqus註冊一個帳號，登入後點擊Dashboard，然後添加網站資訊

然後在_config.yml檔案中進行下面設定

# Disqus Comments
disqus_short_name: oec2003   # oec2003為添加網站資訊時的Site Shortname
disqus_show_comment_count: true

添加著作權聲明

這裡所說的著作權聲明是指每篇文章後面的著作權資訊

首先source\_includes\post目錄中添加license.html檔案，檔案內容如下：

{% if site.post_license %}

<DIV style="font-size:12px;BORDER-BOTTOM: #bbbbbb 1px solid; BORDER-LEFT: #bbbbbb 1px solid; BACKGROUND: #f6f6f6; HEIGHT: 120px; BORDER-TOP: #bbbbbb 1px solid; BORDER-RIGHT: #bbbbbb 1px solid" class=oec2003right>
<DIV style="MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 5px; MARGIN-RIGHT: 10px">
<IMG alt="" src="http://images.cnblogs.com/cnblogs_com/oec2003/219566/r_fw90100.jpg" width=90 height=100></DIV>
<DIV style="LINE-HEIGHT: 200%; MARGIN-TOP: 10px; COLOR: #000000">
作者： <A href="http://oec2003.github.io/">馮威</A> <BR>
出處： <A href="http://oec2003.github.io/">http://oec2003.github.io/</A>
<BR>本文基於<a target="_blank" title="Creative Commons Attribution 2.5 China Mainland License" href="http://creativecommons.org/licenses/by/2.5/cn/">
署名 2.5 中國大陸</a>許可協議發布，歡迎轉載，演繹或用於商業目的，但是必須保留本文的署名
<a href="http://oec2003.github.io/">馮威</a>（包含連結）。 </DIV></DIV>
{% endif %}

在sass\custom\_styles.scss添加如下樣式資訊來控製版權資訊的樣式

.oec2003right
{
    background: #C3D9FF;
    height:120px;
    border:1px solid #BBBBBB;
}

.oec2003right a:link
{
    color: #0057b6;
    text-decoration: none;
}
.oec2003right a:visited
{
    color: #0057b6;
    text-decoration: none;
}
.oec2003right a:active,a:hover
{
    color: #0057b6;
    text-decoration: underline;
}

修改檔案source\_layouts\post.html

在_config.yml添加配置項用來控制是否顯示頁面的著作權資訊

# Post License
post_license: true

最終展示效果：

使文章以摘要形式展示

預設情況下在部落格的首頁是顯示每篇文章的全部內容，更多時候我們只想在首頁展示文章的一部分內容，當點擊閱讀全文時進入到文章的詳細頁面，在Octopress中可以很輕鬆實現該功能：

1. 在文章對應的markdown檔案中，在需要顯示在首頁的文字後面添加<!—more—>，執行rake generate後在首頁上會看到只顯示<!—more—>前面的文字，文字後面會顯示Read on連結，點擊後進入文字的詳細頁面;

2. 如果想將Read on 修改為中文，可以修改_config.yml檔案

#excerpt_link: "Read on &rarr;"  # "Continue reading" link text at the bottom of excerpted articles

excerpt_link: "閱讀全文&rarr;"  # "Continue reading" link text at the bottom of excerpted articles

幾個參考

添加最新評論到側邊欄

http://yanping.me/cn/blog/2012/02/07/comment-sidebar/

添加標籤雲

http://codemacro.com/2012/07/18/add-tag-to-octopress/

總結

其實所謂的設定都是去修改Octopress的源檔案的一些內容，或是根據Octopress的檔案組織方式去添加一些頁面等，將Octopress的每個檔案都開啟看看基本就瞭解個大概了。