利用Octopress和Github搭建个人博客（二）：自定义主题-原创手记-慕课网

引言

在为Octopress博客自定义主题之前，你应该已经搭建好了基础环境。如果还没开始搭建可以参考利用Octopress和Github搭建个人博客（一）：基础环境搭建。在搭建好基础环境之后，如果单纯的写写博文，默认主题也是可以满足需求的。但既然选择了用 Octopress 和 Github Pages 来管理自己的博客，不折腾折腾都对不起自己。不要求效果有多炫，但要方便浏览查找。

一 Octopress目录结构介绍
二安装第三方主题
三主题样式修改
四总结

一 Octopress目录结构介绍

在更改主题之前有必要了解一下 Octopress 目录下的文件结构，后续所有的修改都在这个目录下进行的。Octopress 的目录文件如下：

初始的 Octopress 目录下是没有 source、sass、public、_deploy 这几个文件夹的，运行 rake install['theme_name'] 命令后会生成这几个文件夹。

_config.yml: 站点的配置文件，也是后续需要修改最多的文件。
source: 该目录是执行 rake install['theme_name'] 后从 .themes\theme_name 目录中的 source 拷贝而来(theme_name 是你选择的主题名)，并且添加了一个 _posts 目录了，当执行了 rake new_post[''title''] 后会在 _post 生成博文的markdown 文件。包括后面的很多设置页是在该目录中进行；
sass：也是在执行 rake install['theme_name'] 后从 .themes\theme_name 目录中的 sass 拷贝而来。关于 sass 可以参考这里
public: 当执行了 rake generate 命令后会编译 source 目录下的内容然后将编译后的内容复制到 public 目录中。
_deploy: 在执行 rake deploy 命令后，会将 public 的内容拷贝到 _deploy 目录下然后提交到 Github 的 master 分支上，我们最终看到的网站内容就是 master 分支下的内容。所以 public 和 _deploy 中的内容都是自动生成的，不要手动修改，否则在运行 rake generate 和 rake deploy 命令后所有的更改都会被覆盖掉。

二安装第三方主题

在做任何主题相关的修改之前，最好选定一款自己喜欢的主题，否则后续再更换主题，会覆盖之前的修改。Github 上有很多第三方的主题，可以到这里下载。运行类似如下命令进行主题安装：

cd octopress
git clone git://github.com/macjasp/cleanpress.git .themes/cleanpress
rake install['cleanpress']
rake generate

三主题样式修改

1 基本配置修改

在选定好主题之后就可以进行自定义修改了。首先更改基本配置，Octopress 的基本配置存在 _config.yml 文件里，具体内容如下：

url: http://glgjing.github.io  # 网站的url
title: GLGJing's Blog          # 网站的标题
author: GLGJing                # 网站作者，会显示在底部等位置
simple_search: https://www.google.com/search #搜索引擎
description:                   # 网站描述

此处列出了主要的博客配置信息，有些配置项大概看名字就知道功能了，例如网站 title，email 等；有些配置项比较复杂，后面单独介绍，如添加评论插件、侧边栏等。

2 设置标题栏: Header

Octopress 的很多自定义配置是存储在 /source/_includes/custom/ 目录下的，如果想要更改标题栏，可以修改该文件夹下的 header.html 文件。

<h1><a href="%7B%7B%20root_url%20%7D%7D/">{{ site.title }}</a></h1>
  {% raw %}{% if site.subtitle %}
    <h2>{{ site.subtitle }}</h2>
  {% endif %}{% endraw %}

其中的 title 和 subtitle 可以直接在 _config.yml 中修改。

3 设置导航栏: Navigation

Navigation 的配置方法和 Header 类似，直接修改 /source/_includes/custom/navigation.html 文件。

<ul class="main-navigation"><li><a href="%7B%7B%20root_url%20%7D%7D/">主页</a></li>
  <li><a href="%7B%7B%20root_url%20%7D%7D/blog/archives">文章</a></li>
  <li><a href="%7B%7B%20root_url%20%7D%7D/about">关于</a></li>
</ul>

如果想添加新的页面，可以运行如下命令：

rake new_page['page_name']

该命令会建立 source/page_name/index.html 文件，然后编辑此文件，添加自己想要展示的内容即可，再在 navigation.html 里添加正确的路径即可，如:

<a href="/page_name">新标签页</a>

4 设置尾栏: Footer

修改 /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>

可以将不需要的信息去掉，添加自己想要的信息如：流量统计工具，个人声明等。

5 设置背景图和 LOGO

想要更改背景图片，可以在 sass/custom/_styles.scss 中添加如下内容：

html {
  background: #555555 url("/images/bg3.jpg");
}
body &gt; div {
  background-image: none;
}
body &gt; div &gt; div {
  background-image: none;
}

更改 LOGO 图片可以直接替换 /source 目录下的 favicon.png, 或者将 LOGO 图片放入 source/images 中，然后修改 source/_includes/head.html，找到 favicon.png，修改其路径指向你的图片即可。

四总结

这里介绍了 Octopress 主题配置的几个主要部分，其他更细节配置如：字体的配置优化、侧边栏的定制、评论插件的配置等，会在后续的博文中更新。