本文翻译自Octopress的帮助文档Theming & Customization。 本人水平有限,不当之处请指正,欢迎留言给出修改意见。
Octopress在 .themes
目录提供了一个默认主题。当你安装Octopress时,HTML和Javascripts被复制到 /source
,Sass样式表被复制到 /sass
。
你可以随意修改上述文件,不过我还是设计了一些模式,来让自定制变得更简单,更新Octopress更方便。
本文分成两部分:
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 |
|
当你 更新Octopress,下一步你要更新Rakefile
,以保证博客主页不被修改。
1
|
|
记住修改网站的导航栏(navigation),因为现在博客链接指向/
。跳到下面修改navigation这节,添加“主页”链接,更新“博客”链接指向/blog/
。
最后,source/index.html
可以成为你网站的登录页(landing page)。
修改 <HEAD>
如果你想修改<HEAD>
,请看一下 /source/_includes/custom/head.html
。
1 2 3 |
|
在这里你可以轻易地修改或移除Google Webfonts,插入javascripts等等。
修改侧边栏
Octopress整合了一些第三方服务,诸如出现在侧边栏的Twitter,Pinboard和Delicious。
在_config.yml
你可以重新安排它们的位置,为每种layout创建自定制的侧边栏,添加你自己的侧边栏section。
1 2 3 4 |
|
如果你想在侧边栏添加新的section,就在 source/_includes/custom/asides/
中创建新的文件。
许多都会想在侧边栏加一个“关于我”的section,上面提到的这个目录下已经有个about.html
文件以供修改。内容如下:
1 2 3 4 |
|
如果你要添加section到侧边栏, 必须遵循这样的模式,要有一个<section>
代码块,并以<h1>
为标题。如果想把这个section加到侧边栏里,就要编辑 _config.yml
把它加到asides列表里。
1 2 3 4 |
|
在上面的配置文件中,我向博客主页和文章页面添加了about页。 由于page_asides
没有被设置, 它会从默认列表(default_asides)中继承内容。
修改Header, Navigation和Footer
网站的这几个部分是经常被自定制的。你可以编辑 /source/_includes/custom/
里的每个文件,即使更新Octopress,你的修改还会保留。
修改Header
header的标题和子标题必须在 _config.yml
中设置。如果你想对header做其他设置,就要编辑/source/_includes/custom/header.html
:
1 2 3 4 5 6 |
|
修改Navigation
编辑/source/_includes/custom/navigation.html
来修改或添加链接到主导航栏,代码如下:
1 2 3 4 |
|
每个链接的href
都以 {{ root_url }}
开始 (如果网站部署到子目录里,这可以帮助Octopress采用不同的链接).
如果你想把你的网站部署到像 yoursite.com/octopress
这样的子目录,你必须把它加到你添加的任何链接里。
修改Footer
你可以在source/_includes/custom/footer.html
中修改footer,像这样:
1 2 3 4 |
|
你可以做任意修改,只要够酷并保留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代码的某些行被取消注释。
1 2 3 4 5 6 |
|
自定制颜色文件有几项被取消注释的颜色可以用。主题文件被分成几个部分以使文件更容易阅读。请看sass/base/_theme.scss
中关于navigation的部分。
1 2 3 4 5 |
|
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
中定义它们可以很容易地自定制。下面是布局的一些默认值:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
这些变量是用来计算相应布局的宽度和padding的。$indented-lists
变量允许你选择列表的样式是使用缩进还是正常的。