个性化我们的Octopress博客

作者: 乒什么乓 | 来源:发表于2016-02-24 22:27 被阅读1270次

上一篇讲了如何通过Github + Octopress搭建属于自己的博客，这篇主要记录一下如何个性化我们的博客，包括主题，布局排版等。

一、更换主题：

在上一篇文章中，我们安装了默认主题classic，我觉得不是很好看，所以去找了几个主题，先是选择了Slash，它是是专为 Octopress 设计的简单布景主题，清新简洁，排版完美，支持classic 主题的所有功能，并内建 Fancybox。

打开终端，输入以下指令即可完成Slash主题的安装：

$ cd octopress
$ git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate

更多关于slash的请访问http://tommy351.github.io/Octopress-Theme-Slash/index_tw.html#overview

Slash主题效果图.jpg

后来我又换成了solarized主题，它有两种模式light和dark,安装方法差不多，在octopress目录下，终端键入：

git clone http://github.com/erikzaadi/solarized-octopress-theme .themes/solarized
rake install["solarized"]

想要改变模式,编辑 sass/custom/_colors.scss 然后改变 $sol 和 $solarized:

$sol : light; // light or dark - Recommended: set $solarized  to the opposite of this
$solarized : dark; // (code syntax highlighting theme)

Solarized-light主题效果图.jpg

对于这些第三方主题，如果有自己不满意的地方，我们都是可以自己修改设计的，具体做法就是去octopress目录下修改配置文件，比如字体，配色，布局排版等等。

更多关于第三方主题请访问https://github.com/imathis/octopress/wiki/3rd-Party-Octopress-Themes

二、修改基本信息

初次打开自己的博客时，我的第一想法是修改一下博客空间名等基础的设置。想要修改，可以进入 octopress打开_config.yml文件，它分为三部分，修改其第一部分即可修改基本信息。

Main Configs

url: http://yoursite.com  # blog地址
title: My Octopress Blog  # blog名称，会出现在左上角
subtitle: A blogging framework # title下面的副标题，可以用来放你的喜欢的名人名言，或者简单介绍下自己
author: Your Name # 会出现在每篇文章下面的Posted by 
simple_search: http://google.com/search  # 右边搜索框使用的搜索引擎
description: # head.html中meta name="description"的默认content，但一般都被会截断的文章内容替换掉

Jekyll & Plugins

root: / # 网站的根目录，如果你网站是http://site.com/project这样的形式，就要写成 root: /project
# 生成文章的url形式，比如不喜欢url中带时间，习惯后缀加html，可以写成 /blog/:title.html
permalink: /blog/:year/:month/:day/:title/
paginate: 10          # 每页展现blog的数量，如果blog数量大于这个，会产生翻页
recent_posts: 5       # 右侧最近发表模块里blog的数量
# 在某篇blog中使用<!-- more -->，列表页就不会展现该blog全文，就会显示这个read on链接，指向blog全文
excerpt_link: "Read on →"
# 右侧边栏的展现，有些要下面的设置配合，比如你没有配置github_user，则这儿也不会展现github.html
# 也可以增加一些自己的页面，比如在/source/_includes/custom/asides/下增加about.html
# 然后在列表中增加custom/asides/about.html即可，这儿前后的顺序，就代表了页面上下的次序 
default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html]
# 可以给不同的页面配置不同的侧边栏  
blog_index_asides:
post_asides:
page_asides:

三、添加navigation页面

octopress默认有Blog、Archives、Tags三个导航栏，但比如我们想要添加一个About导航栏，在终端执行以下代码新建页面

$ rake new_page[about]

这会生成 source/about/index.markdown 文件。编辑该文件的内容。然后在头部导航菜单中添加页面的超链接，具体做法是编辑 /source/_includes/custom/navigation.html 文件，设置超链接，我的设置是：

    <ul class="main-navigation">
        <li><a href="{{ root_url }}/">Blog</a></li>
        <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
        <li><a href="{{ root_url }}/tags">Tags</a></li>
        <li><a href="{{ root_url }}/about">About</a></li>
    </ul>

效果为

新增About导航栏

四、侧边栏添加分类目录Categories

我们可使用第三方插件实现 octopress-tagcloud

将文件包下载，拷贝文件只同样的目录下，然后在_config.yml的default_asides中添加category_list.html目录，我的为 custom/asides/category_list.html

对于文章怎么分类呢？在文章markdown文件开头设置categories属性即可，比如：

categories: Octopress

五、添加第三方评论

配置Disqus插件

disqus 是octopress内置的comments功能，注册disqus并和你的博客网址关联后，编辑config.yml文件可以打开该功能，找到以下内容并修改

#Disqus comments
disqus_short_name: 
disqus_show_comment_count: false

填入注册 disqus 账号的名称，并将false修改为true。

另外需要注意：

disqus必须要和自己的博客地址username.github.io关联上，通过添加Website关联
在disqus的setting的edit profile中设置开启Moderation

六、侧边栏添加微博秀

通过在侧边栏添加微博模块可以多一种互动方式。

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

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

<section>
    <h1>新浪微博</h1>
    <ul id="weibo">
    <li>

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

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

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

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

重新部署后，微博秀就能正常展示啦！

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

Octopress博客中，默认是在当前界面中打开第三方链接，这导致网站浏览者跳到第三方链接后很难回来，为了用户体验，我们可设置在新标签页中打开链接

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

> <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，添加如下代码实现滑动返回顶部效果:

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，设置返回顶部按钮样式和位置，
其中的width、height、right、bottom为图片在网页中的位置，可根据图片大小自行设定，示例代码如下：

    <!--返回顶部开始-->
    <div id="full" style="width:50px; height:50px; position:fixed; right:80px; bottom:100px; 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中图片的路径）。

九、添加分享功能

添加分享功能很简单，
在 _config.yml 中增加一项： weibo_share: true
修改source/_includes/post/sharing.html ，增加：

  // 下面的大括号是全角的，如果复制，请自行改成半角
 ｛% if site.weibo_share %｝
     ｛% include post/weibo.html %｝
 ｛% endif %｝

增加文件：source/_includes/post/weibo.html
访问 http://www.jiathis.com/，获取分享的代码
将上面 2 步的代码都加入到 weibo.html 中即可

另外可访问 http://uyan.cc/ ，获得评论的代码，添加到weibo.html，即可增加评论功能

十、添加访问统计功能

octopress模板里面默认带了Google Analytics工具，只需要注册Google Analytics，获得一个google_analytics_tracking_id，添加到_config.yml中对应位置，并对网站进行验证即可。然后可以通过Google Analytics分析网站的流量了。而且可以使用Google站长工具，对网站进行更全面的分析，进行SEO。

对自己的网站进行验证，只需将网站提供的用于验证的代码添加到source/_includes/head.html的<head>标签之间，网站部署到网上后，过几分钟即可验证通过，其他需要验证的也同样操作。

除了Google的统计工具，还有就是国内使用很广的CNZZ了，注册后，添加并验证你的网站就可以添加统计代码了，选好自己喜欢的样式，获得代码，可添加到source/_includes/custom/footer.html中。即可查看每天你的博客的流量，进行相应的优化了。

最后还要提的就是百度站长工具和百度统计了，方法和CNZZ方法类似，统计代码也可以添加到source/_includes/custom/footer.html中。但是我发现似乎百度统计并不太准确，并且百度很难搜的到我的博客。

我的统计代码添加如下，使用CNZZ：

    <p>
    Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} -
    <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256694231'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1256694231%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
    </p>

十一、添加友情链接

在source\_includes\custom\asides目录下添加一个blogroll.html文件，模仿about.html，添加一些友情链接，例如：

    <section>
      <h1>友情链接</h1>
      <ul>
        <li>
          <a href="http://jianshu.com/">简书</a>
        </li>
        <li>
          <a href="http://cocoachina.com/">CocoaChina</a>
        </li>
      </ul>
    </section>

然后在_config.yml文件中，在default_asides的数组中添加custom/asides/blogroll.html。

十二、一些汉化工作

若有需要，我们可以做一些汉化工作：在 _config.yml中，把 Read on改为 “继续阅读”。在 source/_includes/custom/asides 目录下，将Recent Comments改为“最新评论”，Categories改为“分类目录”，将 source/_includes/asides/recent_posts.html 中Recent Posts 改为“最新文章”。

十三、在添加原文地址

当别人转载了我们的文章时，有时我们想要在自己的文章末尾添加原文地址，可按以下步骤添加

添加post_footer_filter.rb插件到plugins目录下，这个插件可以在这儿 codemacro 下载到
此时默认显示在链接之前的是original link:，通过该插件代码可看出可以通过original_url_pre参数指定。只需要在_config.yml中加入

original_url_pre: "显示信息"

将链接信息与文章内容区分出来, 默认状态下，加入的链接信息与文章内容在显示上无法区分。可以在sass/custom/_styles.scss中加入一行：

.post-footer{
     margin-top:10px;
     padding:5px;
     background:
     none repeat scroll 0pt 0pt #eee;
     font-size:90%;
     color:gray
}

十四、公益404

在source目录下创建404.markdown，添加如下代码，即可实现公益404的功能，当你的网页出错找不到时，可以为公益尽一份力。

---
layout: page
title: "404 Error"
date: 2013-10-10 19:17
comments: false
sharing: false
footer: false
---
<script type="text/javascript" src="http://www.qq.com/404/search_children,js" charset="utf-8></script>

博客原文地址：个性化我们的Octopress博客

参考文章：

网友评论

Sealwk:你好：我按照你写的第四部分“侧边栏添加分类目录Categories”，使用你推荐的这个插件“octopress-tagcloud”，预览的时候为什么不显示呢？
操作步骤：
1.将tag_cloud.rb放至octopress/plugins下；将category_list.html和tag_cloud.html放至octopress/source/_includes/custom/asides下
2.修改_config.yml文件，在default_asides字段中增加asides/category_list.html, asides/tag_cloud.html
3.新增一篇文章，在文章开头categories中增加分类
4.rake preview
请问，操作步骤没问题吧？另外，我发现“octopress-tagcloud”的3个文件在各自目录下都显示红色，跟这个有关系吗？
乒什么乓:@Sealwk 实在不好意思，我已经没有用 Octopress 很久很久了，所以关于这个问题我有点无能为力，你去谷歌一下吧
d9431116937e:你好我在更换主题执行rake install['slash']时，得到如下报错，
## Copying Abacus theme into ./source and ./sass
mkdir -p source
cp -r .themes/Abacus/source/. source
rake aborted!
unknown file type: .themes/Abacus/source/.
/Users/love/octopress/Rakefile:44:in `block in <top (required)>'
Tasks: TOP => install
(See full trace by running task with --trace)
我看了一下，他要拷贝的Abacus目录下并没有source这个目录，请问下该如何解决呢
乒什么乓:你可以换个主题试试
4588e4274830:还没用过这个博客..
乒什么乓:@代码描绘人生可以尝试下，有自己域名也是可以绑定的