雁起平沙的网络日志

数量金融与R

为Octopress修改主题和自定义样式

| Comments

本文翻译自Octopress的帮助文档Theming & Customization。 本人水平有限，不当之处请指正，欢迎留言给出修改意见。

Octopress在 .themes 目录提供了一个默认主题。当你安装Octopress时，HTML和Javascripts被复制到 /source，Sass样式表被复制到 /sass。 你可以随意修改上述文件，不过我还是设计了一些模式，来让自定制变得更简单，更新Octopress更方便。

本文分成两部分：

  1. 自定义模板 - 学习如何修改HEAD，sidebar，header，navigation 以及footer
  2. 修改样式 - 学习如何修改颜色和布局，控制样式

1. 主题

不久前发布的 Octopress 2.0版增加了 source/_includes/custom目录。 如果你没有这个目录， 建议 升级 Octopress，因为它真的很棒。

source/
  _includes/    # Main layout partials
    custom/     # <- Customize head, header, navigation, footer, and sidebar here
    asides/     # Theme sidebar partials
    post/       # post metadata, sharing & comment partials
  _layouts/     # layouts for pages, posts & category archives

登录页 vs. 博客主页

Octopress默认地把博客主页生成在网站的根目录下。 如果你想把你的博客主页发布在别的位置，比如 blog/index.html，那么请在终端里进行下面的操作：

1
2

mv source/index.html source/blog/index.html
rake new_page[index.html]

当你 更新Octopress，下一步你要更新Rakefile ，以保证博客主页不被修改。

1

blog_index_dir = 'source/blog'

记住修改网站的导航栏（navigation），因为现在博客链接指向/。跳到下面修改navigation这节，添加“主页”链接，更新“博客”链接指向/blog/。

最后，source/index.html 可以成为你网站的登录页（landing page）。 ## 修改 <HEAD>

如果你想修改<HEAD>，请看一下 /source/_includes/custom/head.html。

<HEAD> (source/_includes/custom/head.html) 
1
2
3
4
5
6
7
8
9
10
11

<!--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">

<script src="/cn/javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>

  <!-- Add fancyBox main JS and CSS files -->
  <script type="text/javascript" src="/cn/assets/fancybox/jquery.fancybox.pack.js"></script>
  <link rel="stylesheet" type="text/css" href="/cn/assets/fancybox/jquery.fancybox.css" media="screen" />

	{% include custom/mathjax_head.html %}

在这里你可以轻易地修改或移除Google Webfonts，插入javascripts等等。

修改侧边栏

Octopress整合了一些第三方服务，诸如出现在侧边栏的Twitter，Pinboard和Delicious。 在_config.yml你可以重新安排它们的位置，为每种layout创建自定制的侧边栏，添加你自己的侧边栏section。

Sidebar configuration (_config.yml) 
1
2
3
4

default_asides:   [asides/recent_posts.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html]
# blog_index_asides:
# post_asides:
# page_asides:

如果你想在侧边栏添加新的section，就在 source/_includes/custom/asides/中创建新的文件。 许多都会想在侧边栏加一个“关于我”的section，上面提到的这个目录下已经有个about.html 文件以供修改。内容如下：

About Me (source/_includes/custom/asides/about.html) 
1
2
3
4

<section>
  <h1>About Me</h1>
  <p>A little something about me.</p>
</section>

如果你要添加section到侧边栏, 必须遵循这样的模式，要有一个<section> 代码块，并以<h1>为标题。如果想把这个section加到侧边栏里，就要编辑 _config.yml 把它加到asides列表里。

Sidebar configuration (_config.yml) 
1
2
3
4

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:

在上面的配置文件中，我向博客主页和文章页面添加了about页。 由于page_asides 没有被设置, 它会从默认列表（default_asides）中继承内容。

修改Header, Navigation和Footer

网站的这几个部分是经常被自定制的。你可以编辑 /source/_includes/custom/里的每个文件，即使更新Octopress,你的修改还会保留。

header的标题和子标题必须在 _config.yml中设置。如果你想对header做其他设置，就要编辑/source/_includes/custom/header.html：

Header (source/_includes/custom/header.html) 
1
2
3
4
5
6

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

修改Navigation

编辑/source/_includes/custom/navigation.html来修改或添加链接到主导航栏，代码如下：

Navigation (source/_includes/custom/navigation.html) 
1
2
3
4
5
6
7
8
9
10
11

<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 }}/blog/categories">分类目录</a></li>
  <li><a href="{{ root_url }}/blog/categories/金融工程">金融工程</a></li>
  <li><a href="{{ root_url }}/blog/r-lang">R语言</a></li>
  <li><a href="{{ root_url }}/blog/categories/数据科学">数据科学</a></li>
  <li><a href="{{ root_url }}/blog/categories/网站设计">网站设计</a></li>
  <li><a href="{{ root_url }}/blog/about">关于本站</a></li>
  <li><a href="{{ root_url }}/blog/contact">商业合作</a></li>
</ul>

每个链接的href都以 {{ root_url }}开始 (如果网站部署到子目录里，这可以帮助Octopress采用不同的链接). 如果你想把你的网站部署到像 yoursite.com/octopress 这样的子目录，你必须把它加到你添加的任何链接里。

你可以在source/_includes/custom/footer.html中修改footer，像这样：

Footer (source/_includes/custom/footer.html) 
1
2
3
4
5
6
7
8
9
10
11
12
13

<p>
  Copyright &copy; {{ site.time | date: "%Y" }} - {{ site.author }} -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

<script type="text/javascript">
$(document).ready(function() {
  $(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none'
  });
});
</script>

你可以做任意修改，只要够酷并保留Octopress的链接就可以。

2. 样式

控制样式

如果想添加或控制样式，编辑sass/custom/_styles.scss。样式表最后才引入， so you can override styles with the cascade.

修改配色

请查看HSL Color Picker，它可以帮助你选择颜色，是一种易用的基于网页的选色工具。

# In /sass/base/
_theme.scss      # All colors are defined here

# In /sass/custom/ - Change these files for easy customization
_colors.scss     # Override colors in base/_theme.scss to change color schemes
_styles.scss     # Easly Override any style (last in the cascade)

Octopress的所有颜色都是以Sass变量的形式在 /sass/base/_theme.scss文件中定义。 想自定制你的配色，就要编辑sass/custom/_colors.scss 并在sass/base/_theme.scss中控制颜色。

Octopress官方网站用的是默认的’classic’主题，颜色在自定制颜色文件中稍微做了调整。仔细看这个文件，你会看到sass代码的某些行被取消注释。

Custom Colors (sass/custom/_colors.scss)View on Github 
1
2
3
4
5
6

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

自定制颜色文件有几项被取消注释的颜色可以用。主题文件被分成几个部分以使文件更容易阅读。请看sass/base/_theme.scss中关于navigation的部分。

Navigation (sass/base/_theme.scss)View on Github 
1
2
3
4
5

	/* Navigation */
	$nav-bg: #ccc !default;
	$nav-color: darken($nav-bg, 38) !default;
	$nav-color-hover: darken($nav-color, 25) !default;
	...

The !default rule lets the variable be overridden if it is defined beforehand. is imported before the _theme.scss it can predefine these colors easily. There are comments to help out with this in the source.

主题里的许多颜色是用 Sass’s color functions来设置的。 你可以通过设置$nav-bg变量为navigation选择新的背景颜色，并且其它颜色会做相应的改变。虽然这不是很完美，但是它对大多数颜色都是合适的。

修改布局

# In /sass/base
_layout.scss     # Responsive layouts are defined here

# In /sass/custom - Change these files for easy customization
_layout.scss     # Override settings for base/_layout.scss to change the layout

和颜色一样， /sass/base/_layout.scss里的宽度像$max-width: 1200px !default;定义，在sass/custom/_layout.scss中定义它们可以很容易地自定制。下面是布局的一些默认值：

Layout Defaults (_layout.scss)view on Github 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	$max-width: 1200px !default;

	// Padding used for layout margins
	$pad-min: 18px !default;
	$pad-narrow: 25px !default;
	$pad-medium: 35px !default;
	$pad-wide: 55px !default;

	// Sidebar widths used in media queries
	$sidebar-width-medium: 240px !default;
	$sidebar-pad-medium: 15px !default;
	$sidebar-pad-wide: 20px !default;
	$sidebar-width-wide: 300px !default;

	$indented-lists: false !default;

这些变量是用来计算相应布局的宽度和padding的。$indented-lists 变量允许你选择列表的样式是使用缩进还是正常的。

推荐文章

关于sass和scss，请看http://blog.visioncan.com/2011/sass-scss-your-css/

Comments