Octopress博客配置

以下介绍了我的Octopress博客的配置情况。

0.添加主题

Octopress有很多精美的主题,在这里可以看到很多:http://opthemes.com/ 。本博客使用了greyshade主题,该主题的作者是Shashank Mehta,主题的介绍页面在http://shashankmehta.in/archive/2012/greyshade.html。
这里介绍了greyshade主题的安装:
假设你已经安装好了默认主题,并且当前在octopress目录下,只需要输入以下命令即可:
$ git clone git@github.com:shashankmehta/greyshade.git .themes/greyshade
$ echo “\$greyshade: color;” >> sass/custom/_colors.scss
$ rake “install[greyshade]”
$ rake generate

1.添加About Me页面

首先创建about页面:rake new_page["about"],就会在创建source/about目录的同时创建index.markdown,使用编辑器编辑即可。
然后打开source/_includes/custom/navigation.html,修改成如下:



然后使用rake generate命令,就会产生相应的静态页面。使用rake preview预览即可。
如果想在username.github.io中看到,不要忘了rake deploy以及git命令提交到github。

2.添加社会化分享按钮

只需要添加著名的社会化分享按钮addthis.com即可。去addthis.com注册,获取代码。
将代码粘贴到source/_includes/post/sharing.html中。例如我的sharing.html文件为:

3.添加社会化评论

Octopress已经提供了一个评论插件,名为Disqus,我们只需要到Disqus注册帐号,在注册的时候输入网站域名(username.github.io即可)。注册时的shortname很有用,下面代码中要修改的就是shortname!!注册成功后修改octopress目录下的_config.yml文件:

#Disqus Comments
disqus_short_name: shortname
disqus_show_comment_count: true

另外,这里注意,在修改_config.yml的时候,一定要注意冒号后面有个空格,否则在rake generate的时候会有解析错误
最重要的一点,_config.yml文件修改好之后必须generate之后才能在本地preview到。而其他文件,比如post了一个新的文章,如果处在preview状态,刷新一下localhost:4000会立马看到。

4.添加新浪微博支持

原始的greyshade主题不支持新浪微博,这里稍加修改,即可在页面左下角显示新浪微博的按钮。本修改方法来自于allenhsu,在这里向作者表示感谢。

首先,在sass/parts/_header.scss文件中去掉第316行,margin-right: 15px;更改为:
margin-right: 5px;
margin-bottom: 15px;
然后,还是在上一个文件里,在320行往后添加weibo相关代码,最终代码段如下:
&:hover{
opacity: 1;
}
&.weibo{
background: image-url(‘social/weibo.png’) center no-repeat #e32529;
border: 1px solid #e32529;
&:hover{
border: 1px solid darken(#e32529, 10%);
}
}
&.facebook{
background: image-url(‘social/facebook.png’) center no-repeat #3B5998;
border: 1px solid #3B5998;
&:hover{
border: 1px solid darken(#3B5998, 10%);
}
}
第三步,在source/_includes/header.html中,修改代码,在类为social的div下加上如下代码:

5.imagepop plugin

这是一个添加图片的插件,可以按照比例缩放图片,点击图片可以查看原图,项目地址在imgpop
这里重复一下安装过程:

octopress/Gemfile中添加以下代码,就可以得到相应依赖:
gem ‘erubis’
gem ‘mini_magick’
运行bundle install,安装相应依赖
将开源项目中的_style.scss中的内容添加到octopress/sass/custom/_styles.scss
将开源项目中plugins中的两个文件复制octopress/plugins文件夹下
将开源项目中的imgpop.js文件复制octopress文件夹下
ok~~

参考资料:

greyshade
yanjiuyanjiu.com
zonyitoo.github.io
imgpop