Octopress的后续配置

发表于   |   分类于   |  

在上一个博文中已经讲解了如何安装Octopress，但这只是一个简单的博客样式，还有许多东西需要我们慢慢来配置。由于本人对于HTML和CSS不是很熟悉，所以很多配置都是按照官方教程或者从网上直接复制粘贴运行的。到目前位置，配置出的博客还算满意。这里就将主要的配置记录一下

插入图片

在写第一篇博文的时候，就涉及到了这个问题。Markdown的原生语法是不支持图片的，这里用的是官方教程给出的方法，使用

1
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

其中class names可以使用left，right替换，以区别图片显示的方向。

安装Greyshade的主题

Greyshade是由Shashank Mehta建立的一款Octopress主题，深受大家的喜欢。本人的博客也使用了此主题。但是由于其侧边栏支持的社交网站不包含中国的微薄等等，考虑到被墙的关系，因此使用起来很不方便，加上如果直接使用原生主题发现对中文字体的支持很不舒服。因此有人更改了此主题，使其更加符合中国用户的需求，添加了对微博的支持。主题地址在https://github.com/allenhsu/greyshade
接下来，用户便可按照之前文章中的命令来安装主题了。

定制域名

在刚开始创建博客的时候，Github默认分配的用户名是username.github.io。当然了，你也可以将自己的用户名绑定到你的博客上

  1. 首先在你的source的目录下创建CNAME文件，并在里输入你的域名XXXXX.com
  2. 在你购买的域名管理器中，创建或修改A记录，指向207.97.227.245这个地址。
  3. 在你购买的域名管理器中，创建CNAME记录，将username.github.io.指向你的域名www.XXXXX.com
    接下来就慢慢等待吧，不同的域名管理网站对域名的解析时间不等～～

让博客中的链接在新窗口中打开

由于markdown不支持这一语法，如果要自己用html标签实现，又有些违背了markdown以内容为重的立意。可以通过将如下代码添加到 source/_includes/custom/head.html文件末尾来实现：

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function addBlankTargetForLinks () {
  $('a[href^="http"]').each(function(){
      $(this).attr('target', '_blank');
  });
}
$(document).bind('DOMNodeInserted', function(event) {
  addBlankTargetForLinks();
});
</script>

404页面

404页面也是一个博客或者网站设计时必须注意的问题。我们这里为了简便配置，使用了腾讯的公益404页面。具体创建方法如下：

  1. 在Octopress的目录下使用rake new_page['404']，这时在source目录下便会新建404/index.markdown文件，将<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>填入文件便可。

添加评论

Octopress貌似不支持评论功能，不过我们可以使用第三方强大的评论系统，例如国外的Disqus。
首先去Disqus上注册帐号，添加你的博客，然后将添加站点的信息写入Octopress的_config.yml文件中

1
2
3
# Disqus Comments
disqus_short_name: laoshuterry
disqus_show_comment_count: true # Disqus Comments

更改导航栏

文件source\_includes\custom\navigation.html文件中是导航栏的配置，默认安装完主题后，只有Blog和Archives两项。为了定制好自己博客的导航栏，我们需要加一些东西
原始导航栏如下：

1
2
3
4
<ul class="main-navigation"> 
  <li><a href="{{ root_url }}/">Blog</a></li> 
  <li><a href="{{ root_url }}/blog/archives">Archives</a></li> 
</ul>

先变为

1
2
3
4
5
6
<ul class="main">
    <li><a href="{{ root_url }}/">博客 | Blog</a></li>
    <li><a href="{{ root_url }}/blog/archives">档案 | Archives</a></li>
    <li><a href="{{ root_url }}/blog/categories">分类 | Categories</a></li>
    <li><a href="{{ root_url }}/about">关于我 | About Me</a></li>
</ul>

这时导航栏就变成了我目前博客导航栏的样子。

配“Read More”

很多人都希望在自己的博客主题不要显示太多的文章内容，这时候我们可以添加Read More标签实现。在新创建一篇博文时，可以在你想要断开隐藏的地方加入标签<!--more-->。在_config_yml配置文件中，作出如下更改

1
2
excerpt_link: "阅读更多"  	# "Continue reading" link text at the bottom of excerpted articles
excerpt_separator: "<!--more-->"

这样在首页显示时，不会显示出文章的全部，人们可以更快速的浏览你主页上面的其他内容。

这里是对Octopress的一些配置。到目前为止，Octopress的配置可以说基本完成了，还有一个问题就是SEO的事情，这个下篇文章再说。
当然了，Octopress还有很多东西是学要继续深入研究的，目前还有很多东西自己不会弄，例如字体问题，侧边栏添加个性化标签，版权信息，云TAG等等。随着我对HTML和CSS的深入学习，希望这些东西慢慢都能加入进来吧。