在上一篇《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 →" # "Continue reading" link text at the bottom of excerpted articles
excerpt_link: "閱讀全文→" # "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的每個文件都打開看看基本就了解個大概了。