如何自定义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;
...