IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    自定义你的Octopress博客

    王中周发表于 2014-04-28 11:17:31
    love 0

    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里添加默认的description和keywords，不过我没试过。

    界面相关

    • 博客首页显示文章摘要

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

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

    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='http://foggry.com/#{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="http://foggry.com/images/top.png" border=0 alt="返回顶部"></a>
</div>
<script src="http://foggry.com/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的地址就会自动跳转到自己的域名了。不过更改需要等一段时间才能生效。

    参考文章

    • SEO统计

    • 增加category列表

    • Theming & Customization

    • Add About Page

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

    • 增加新浪微博秀

    • Octopress主题样式修改



沪ICP备19023445号-2号
友情链接