×

个性化我们的Octopress博客

96
Vanbein
2016.02.24 22:27* 字数 2193

上一篇讲了如何通过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主题,它有两种模式lightdark,安装方法差不多,在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.ymldefault_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.htmlRecent Posts 改为“最新文章”。

十三、在添加原文地址

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

  1. 添加post_footer_filter.rb插件到plugins目录下,这个插件可以在这儿 codemacro 下载到

  2. 此时默认显示在链接之前的是original link:,通过该插件代码可看出可以通过original_url_pre参数指定。只需要在_config.yml中加入

original_url_pre: "显示信息"
  1. 将链接信息与文章内容区分出来, 默认状态下,加入的链接信息与文章内容在显示上无法区分。可以在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博客

参考文章:

iOS基础
Web note ad 1