×

利用Octopress和Github搭建个人博客(二):自定义主题

96
单刀土豆
2016.06.14 19:13* 字数 1188

引言

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

目录

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

一 Octopress目录结构介绍

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

Octopress 目录结构.png

初始的 Octopress 目录下是没有 sourcesasspublic_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 目录下然后提交到 Githubmaster 分支上,我们最终看到的网站内容就是 master 分支下的内容。所以 public_deploy 中的内容都是自动生成的,不要手动修改,否则在运行 rake generaterake 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 文件。

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

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

3 设置导航栏: Navigation

Navigation 的配置方法和 Header 类似,直接修改 /source/_includes/custom/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>

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

rake new_page['page_name']

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

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

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 > div {
  background-image: none;
}
body > div > div {
  background-image: none;
}

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

四 总结

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

技术博客
Web note ad 1