调整octopress主题小结

from sourrabbit & linpx http://colors4.us/blog/2012/09/06/%E8%B0%83%E6%95%B4octopress%E4%B8%BB%E9%A2%98%E5%B0%8F%E7%BB%93/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+colors4%2Fus+%28%7B%7B+site.title+%7D%7D%29

太难了,对博客主题的更改。这是我大半年以前刚开始写博时的感觉。毕竟octopress不是wordpress,很方便的随便点击几下确定键就可以了。我确实尝试过,失败了。一个很重要的原因是,我不知道css的语法。不知道的话,很简单,就去学。css不是excel啊,太难学了。我的那种抄袭式的学习方式根本派不上用场。在没有办法搞定的前提下,我选择忽略对主题背景修改的重视。这一放,就到了半年后,也就是现在。

我要求的博客样式非常简单。我想让我博客中的背景图片统一。怎么样,很简单吧。问题就在这里,我找到了满意的照片,却不知道应该放到哪个文件夹去。即使放下后,基于octopress完全定制的风格,我也不知道应该从哪儿修改文件。一切从昨天突然想到的一次google收索开始。这篇博文
参考后,帮助很大。完全符合我的风格。背景统一,干净,简介。

分离navigation bar

由于octopress基于jekyll模式,我很方便地根据文章的提示,将主题对应的源代码下载下来。没有多想。直接将这个sass/custom/_styles.scss考入我的博客文件系统里面。

统一背景图片

octopress中背景图片是直接存于css中的。更明确点说是,主背景照片为这个文件source/images/line-tile.png。在标题框中,我博客的例子就是sourrabbit&linpx,也存在一个标题背景图片。一般情况下,两张照片是不统一的,不过看起来,我个人感觉不是我想要的风格,我希望的是不会让文字阅读分心的背景图片,同时有些minimalist风格。需要统一。octopress本身文件系统是没有定义标题框背景图片的,仅是对颜色进行了一些过渡,所以我定义标题背景照片为source/images/header_bg.png。导入希望用的背景图片,同时命名为上述两个文件名字。

之后我们需要做些调整。我在sass/custom/_style.scss的第13~17行中指定了标题框的背景图片。这样直接rake之后,就OK了。

// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

@media only screen and (min-width: 550px) {


  body > header h2 { padding-left: 60px; }

  body > footer { margin-bottom: 3em; }
}



header[role="banner"] {
     background-image: url(/images/header_bg.png);
     background-repeat: repeat;
}



@media only screen and (min-width: 1040px) {

  body > nav {
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    border-radius:0.4em;
    margin-bottom: 2em;
  }

  body > footer{
      -moz-border-radius-bottomleft: 0.4em;
      -moz-border-radius-bottomright: 0.4em;
      -webkit-border-radius: 0 0 0.4em 0.4em;
      border-radius: 0 0 0.4em 0.4em;
  }

  #main{
      -moz-border-radius-topleft: 0.4em;
      -moz-border-radius-topright: 0.4em;
      -webkit-border-radius: 0.4em 0.4em 0 0;
      border-radius: 0.4em 0.4em 0 0;
  }

  #content{
      -moz-border-radius-topleft: 0.4em;
      -webkit-border-radius: 0.4em 0 0 0;
      border-radius: 0.4em 0 0 0;
  }

  #content .blog-index a[rel="full-article"]{
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
  }
}

字体的选择和修改

octopress的中文字体我就不修改了,因为不会。英文字体还是OK的,不过太死板,用的人太多。如果有想换字体的话,可以参考这个官方文件。我直接讲我的方法。

先寻找心仪的字体。我一般上google web fonts里找到后,寻找给出的字体使用链接即可样式如下<link href='http://
......>
.下面这个文件是我的字体方案,供参考。于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">
<link href='http://fonts.googleapis.com/css?family=Ruge+Boogie|Ruthie|Flavors|Rancho|Galdeano' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Philosopher:[object Object],[object Object],[object Object],[object Object]' rel='stylesheet' type='text/css'>

找到字体后,就要定义字体如何使用了。于sass/custom/_fonts.scss

// Here you can easily change font faces which are used in your site.
// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's.
// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html

//$sans: "Optima", sans-serif;
//$serif: "Baskerville", serif;
//$mono: "Courier", monospace;
//$heading-font-family: "Verdana", sans-serif;
//$header-title-font-family: "Futura", sans-serif;
//$header-subtitle-font-family: "Futura", sans-serif;
$header-title-font-family: "Flavors", sans-serif;
$header-subtitle-font-family: "Galdeano", sans-serif;
$sans: "Philosopher", sans-serif;
$serif: "Philosopher", serif;
$mono: "Philosopher", monospace;

背景文件的选择来源

上述的背景和字体选择完了后,octopress看上去一定会清爽很多。我个人的建议是,背景不要用大红大绿,要清淡,简约,不要过于喧宾夺主。因此留给我们的选择不会太多,还好我们有网络。我给出几个网站参考。

  1. Elegant Themes
    的这个网页非常好,可以调字体,可以选背景pattern,所见即所得;
  2. Ultimate Source for tiled background patterns;
  3. dinpattern;
  4. patterncooler是我背景下载的网站,牛逼在于可以选择pattern重复的尺寸,颜色,还可以免费下载。东西选择太多,反而不知道要走哪一个了。呵呵。

结语

前些天我看到了jekyll bootstrap作者整了个ruhoh.com,非常漂亮的jekyll博客平台。就不多说它网页上的好处了,居然可以无缝支持我octopress上的中文名permlink这点就让我当时就有移过去的冲动了。只是整起来花些时间,如果是打算新开博客的朋友,倒是一个很好的选择。在机子上或vps上搭好ruby平台就行了。不像octopress这样,当初为了整这个就花了好久。

博客写久了会有写博客的习惯。我和我太太就很有信心将这个博客写上60年。只是未知那时是否还是如此复杂的人机交流模式。

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s