王中周的技术博客

Stay hungry,stay foolish.

自定义你的Octopress博客

SEO

  • 增加统计工具

博客搭建好了以后,大家一定很想知道每天都有多少的访问量。现在有很多工具都可以帮助我们做这件事,比如Google Analytics百度统计CNZZ 等。

其中Google Analytics是Octopress自带的统计工具,使用方式也非常简单,只需要到Google Analytics申请一个app id,填写到_config.yml文件中的google_analytics_tracking_id后面即可。但Google Analytics存在翻墙的麻烦,而且百度统计功能也挺齐全,完全能满足我的需求,就选择了百度统计

集成百度统计方式非常简单:

只需到百度统计官方网站申请一个账号,将获取的代码添加到source/_includes/custom/footer.html中,重新部署即可。

  • 搜索优化

为了让自己搭建的博客更容易被搜索引擎搜到,最好将网站地址提交给各大搜索引擎,下面有两个连接搜集了各个搜索引擎的网站提交入口:

1
2
http://urlc.cn/tool/addurl.html
http://tool.lusongsong.com/addurl.html

我试了下,添加到google以后,搜索关键字的时候自己的博客确实排名靠前了。

光是将网址添加到搜索引擎还不够,你必须得为你的文章添加关键字,才能更好地被引擎搜到,在创建一篇新文章的时候,生成的makedown文件包含以下内容,以本文举例:

1
2
3
4
5
6
7
8
9
10

---

layout: post
title: "自定义你的Octopress博客"
date: 2014-04-28 11:17:31 +0800
comments: true
categories: Octopress

---

实际上我们还可以为其添加以下几项,以本文举例:

1
2
3
tags: [octopress, 博客自定义, seo]
keywords: seo, octopress, analytics, 博客自定义
description: 如何自定义Octopress博客

这样更利于搜索引擎抓取到我们的博客。

事实上,如果我们不做上述设置,Octopress会默认将文章的前150个字作为文章的关键字,供搜索引擎抓取,但那并不一定准确。

Octopress实现该功能的代码在source/_includes/head.html文件中:

1
2
3

  <meta name="description" content="如何自定义Octopress博客">
<meta name="keywords" content="seo, octopress, analytics, 博客自定义">

此外,还可以在_config.yml里添加默认的descriptionkeywords,不过我没试过。

界面相关

  • 博客首页显示文章摘要

默认情况下,博客首页文章列表中都会全部展示,要想让文章在首页中只显示一部分配置也非常简单:

首先在文章列表中你想展示的缩略部分增加标记:

1
 <!-- more -->

然后自定义_config.yml中的对应设置项:

1
 excerpt_link: "阅读更多 →"

这样就有了我博客中现在的效果: read more

  • 自定义侧边栏之增加category列表

下面以增加侧边栏category列表为例。

在创建新文章时,我们会填写以下属性:

1
2
3
4
5
6
7
8
9
10
11
12
13

---

layout: post
title: "自定义你的Octopress博客"
date: 2014-04-28 11:17:31 +0800
comments: true
categories: Octopress
tags: [octopress, 博客自定义, seo]
keywords: seo, octopress, analytics, 博客自定义
description: 如何自定义Octopress博客

---

其中的categories会为当前文章指定一个分类。我们可能有需要通过分类查找文章的需求,而侧边栏中默认只有最近提交列表。下面就介绍如何在侧边栏中显示文章分类列表。

首先,保存以下内容到plugins/category_list_tag.rb中(如果文件不存在就新创建一个):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

这个插件会向liquid注册一个名为category_list的tag,该tag就是以li的形式将站点所有的category组织起来。

然后再增加aside,复制以下代码到source/_includes/asides/category_list.html(如果没有就新建)中:

1
2
3
4
5
6
<section>
 <h1>Categories</h1>
 <ul id="categories">
  { category_list }
 </ul>
</section>

注意要将{ category_list }category_list单词的左右两边分别加个%,即写成下图所示样式: categorylist_pic

搞那么复杂是markdown排版问题。。。

最后更改_config.yml文件,让侧边栏链接到刚才新增加的source/_includes/asides/category_list.html文件:

1
default_asides: [asides/recent_posts.html, asides/category_list.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

完成以上步骤后,重新部署就能看到博客的右侧边栏增加了category列表了。

  • 自定义侧边栏之增加新浪微博

在博客中增加新浪模块是一个很好的和渎职互动方式,增加方式如下:

首先要从新浪微博秀获取到自定义的微博秀代码,设定好微博秀样式后将代码复制下来。

然后在source/_includes/custom/asides目录下新建weibo.html文件,按照如下格式编辑该文件:

1
2
3
4
5
6
7
8
9
10
<section>
    <h1>新浪微博</h1>
    <ul id="weibo">
    <li>

   -- 在此插入获得的微博秀代码 --

      </li>
    </ul>
</section>

将刚才赋值下来的自定义微博秀代码粘贴到上述指定位置。

最后,和自定义category侧边栏一样,我们需要在default_asides中加入custom/asides/weibo.html

重新部署后,微博秀就能正常展示啦!

  • 自定义Navigation

默认的导航栏只有Blog、Archives两项,很难满足大家的要求。下面以增加about界面为例说明如何在导航栏上增加内容。

首先编辑文件/source/_includes/custom/navigation.html,仿照Blog和Archives的写法增加一行About:

about

然后使用命令:

1
rake new_page['about']

创建一个页面,保存路径为source\about\index.markdown

编辑index.markdown文件成自己想要的样式,然后重新部署,就能看到导航栏上新增了About项目。

  • 自定义Footer

界面底部的声明部分同样可以自定义,修改文件:source/_includes/custom/footer.html成自己想要的格式即可。

  • 自定义网站主题

目前有很多第三方主题,比如:http://opthemes.com/

该网站搜集了很多漂亮的主题,对应的主题里都有安装方式。

  • 新标签页打开网站中第三方链接

Octopress博客中,默认是在当前界面中打开第三方链接,这导致网站浏览者跳到第三方链接后很难回来。

将以下代码加入source/_includes/custom/head.html文件中:

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

记得把左侧的>符号都去掉。

不过本站的链接还是会在当前界面中打开。

返回顶部按钮

文章较长时,返回顶部按钮还是很有用的。下面方法介绍了如何添加一个返回顶部按钮:

  • 实现返回按钮功能

首先创建source/javascripts/top.js,添加如下代码实现滑动返回顶部效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function goTop(acceleration, time)
{
        acceleration = acceleration || 0.1;
        time = time || 16;

        var x1 = 0;
        var y1 = 0;
        var x2 = 0;
        var y2 = 0;
        var x3 = 0;
        var y3 = 0;

        if (document.documentElement)
        {
                x1 = document.documentElement.scrollLeft || 0;
                y1 = document.documentElement.scrollTop || 0;
        }
        if (document.body)
        {
                x2 = document.body.scrollLeft || 0;
                y2 = document.body.scrollTop || 0;
        }
        var x3 = window.scrollX || 0;
        var y3 = window.scrollY || 0;

        var x = Math.max(x1, Math.max(x2, x3));
        var y = Math.max(y1, Math.max(y2, y3));

        var speed = 1 + acceleration;
        window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

        if(x > 0 || y > 0)
        {
                var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
                window.setTimeout(invokeFunction, time);
        }
}
  • 自定义返回按钮格式

创建source/_includes/custom/totop.html,设置返回顶部按钮样式和位置,代码如下:

1
2
3
4
5
6
<!--返回顶部开始-->
<div id="full" style="width:0px; height:0px; position:fixed; right:180px; bottom:150px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
  <a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="返回顶部"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script>
<!--返回顶部结束-->
  • 选择按钮图片

找到自己喜爱的返回按钮图片,命名为top.png后添加到source/images目录中(或修改totop.html中图片的路径)。

自定义域名

使用Github Pages服务搭建好博客以后,默认的访问地址是yourname.github.io形式的二级域名。大家一定迫不及待的想换成自己的个性域名了。

  • 购买域名

到各大域名购买网站购买自己心仪的域名

  • 获取自己github二级域名的IP

以我的域名wangzz.github.io为例,输入以下命令:

1
$dig wangzz.github.io

在输出内容中找到ANSWER SECTION一项,比如我的:

1
2
3
ANSWER SECTION:
wangzz.github.io. 3599    IN  CNAME   github.map.fastly.net.
github.map.fastly.net.    29  IN  A   103.235.222.168

可以看到我的IP是103.235.222.168

  • 添加A记录

得到IP以后,需要到你的域名解析服务商处添加一个A记录,将你的域名解析成对应的IP。

经过以上步骤,访问wangzz.github.io的地址就会自动跳转到自己的域名了。不过更改需要等一段时间才能生效。

参考文章

返回顶部