如何自定义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。这个文件的内容一般像这样：

<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文件。

<!--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文件用于被添加到边侧栏。

<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

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

修改页脚

你可以在 source/_includes/custom/footer.html 中自定义页脚

<p>
  Copyright © {{ 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)

自定义颜色

$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;
...